极有可能被低估的三种有趣的网页设计趋势

设计出不同凡响的网站是许多设计师一直追求的事情,所以大家着迷各种时尚的元素,漂亮的配色,流行的趋势,复古的样式,等等。经过时间验证的经典设计、固定的搭配是不错的选择,而逐步展露头角的新趋势,则能更好的满足这一需求。

设计出不同凡响的网站是许多设计师一直追求的事情,所以大家着迷各种时尚的元素,漂亮的配色,流行的趋势,复古的样式,等等。经过时间验证的经典设计、固定的搭配是不错的选择,而逐步展露头角的新趋势,则能更好的满足这一需求。

一种全新的设计手法,融合了最新的设计技巧,展现和前人不同的气场,用更现代的气质来承载内容,这样的网站无疑会更加吸引用户,让访客难以忘怀。今天要聊的三种设计趋势其实已经出现一阵子了,但是作为一种相对综合的设计手法,他们并没有引起广泛的关注。只需要使用现有的元素、色彩和排版手法,就可以实现这三种设计效果,但是它们不论是从美学特征上,还是从功能性上,都不输于其他的趋势。有兴趣么?不妨来看看吧。

1、双色调配色方案

双色调配色已经存在很长的一段时间了,单我们几天所说的双色调方案是在全屏设计背景下,加入渐变效果和高冲击力视觉设计下的双色调配色方案。在扁平化的大势之下,Spotify 大范围使用双色调配色,将这一设计手法推到了潮头。

那么双色调配色具体是怎么一回事呢?

简单说来,是两种色彩来构成一套配色。最常见的双色调配色会选择互补色来进行组合。在更复杂的场合中,会使用其他的组合来营造特定的感觉,打破约定俗成的配色风格,可能会有惊喜。

大多数双色调效果是使用一个色彩鲜艳的色调叠加在照片上实现的,强化深浅色彩对比,从而营造出色彩冲击力。Shopify 对于这种手法的运用非常的纯熟,在恰当的排版设计搭配下,将数十位设计师照片以这种独特的方式展现出来。

从技术的角度上来看,双色调配色可以同许多其他的设计手法、技术一同搭配使用,比如全屏设计,比如响应式设计,比如插画,正如同上面的那些案例中的诸多技术一样。除了独特的视觉效果,它可以用来强调,对比。这是一种非常强的表现手法,用的时候记得适量使用。

极有可能被低估的三种有趣的网页设计趋势 极有可能被低估的三种有趣的网页设计趋势 极有可能被低估的三种有趣的网页设计趋势 极有可能被低估的三种有趣的网页设计趋势

2、分屏式设计

分屏式的网页设计案例正在成倍增长。从技术上来讲,这类网页的设计师喜欢将屏幕均分为并排的两个区块,两者尺寸大小都一样,有的时候还会加上轮廓来强调区域的概念。

这样设计的效果是很酷炫的,在代码编写到位的情况下,网页在桌面端打开的时候,两个区块并排显示,而在移动端上,并排的区块智能地以上下堆叠的形式呈现出来。

分屏是设计的使用其实是可以嵌套细分的,它可以是简单的对半分,也可以套个栅格,无限分割下去,这样的案例非常的多。被划分的区块可以承载相似的、对比的内容,也可以承载截然不同的媒体类型,而栅格式细分的区块还能帮助网站的设计者探索用户真正感兴趣的内容。

分屏式设计对用户是友好的,和响应式设计可以很好地结合起来,同时还可以加入更多的新技术和设计手法。

下面是一些高效分屏的技巧:

  • 当你没有太强的视觉设计之时,注意字体和色彩的搭配
  • 吸引用户的注意力让他们从左向右看,从而引导用户的视觉运动。
  • 使用色块来分割屏幕,为主要信息留下足够的空间,确保整体的可读性。
  • 将分屏视作为超大的卡片。将不同的内容制作成更小的区块,在大的卡片中组成马赛克。
  • 尽量确保每个区块中内容的简单易读。

极有可能被低估的三种有趣的网页设计趋势 极有可能被低估的三种有趣的网页设计趋势 极有可能被低估的三种有趣的网页设计趋势 极有可能被低估的三种有趣的网页设计趋势

3、空间共享式排版

你可能在其他地方看到过这个趋势:文字排版被延伸到了共享的设计空间。在绝大多数的网站中,图像、背景和文字是最主要的元素,它们要么相互嵌套有机组合,要么相互分离。

但是越来越多的设计师开始试图打破元素之间的界限,不同类型的视觉元素打破固有的位置,进入其他元素的空间,堆叠,交叉,错落。看起来还是非常有趣的。

但是考虑到整体的可读性,这种设计还是相当具有挑战性的。

要使用这种设计技巧,最好搭配以简单的排版。文字应当同其他的元素有足够的对比性,从而确保它在横跨多个不同元素的时候,保持基本的可读性和辨识度。这也使得绝大多数这类网站都倾向于使用黑色和白色的文字。

字体尺寸也是一个值得注意的属性,它和色彩控制同样重要。你还需要注意文本部分在不同尺寸的屏幕上的显示和运动,也就是响应式变化中的断点。

在诸多设计案例中,最值得注意的是Deux Huit Huit 。横跨首页主图的文字的运动方式,当它穿越图片、背景的时候,是如何确保它的可读性的。

极有可能被低估的三种有趣的网页设计趋势 极有可能被低估的三种有趣的网页设计趋势 极有可能被低估的三种有趣的网页设计趋势 极有可能被低估的三种有趣的网页设计趋势

结语

各种各样的设计趋势很 多,许多趋势在你刚刚了解它们的时候就已经过时了,那些真正站得住脚的趋势大多能同其他的技术、趋势、设计手法能很好的兼容、搭配。而今天我们所说的三个 趋势正好符合这一特征,它们能够兼容现代的风格,流行的布局与开发框架,更重要的是它们能看,够看,好看,也不会破坏你的审美。

实现它们并不难,更新、替换、删除也不是麻烦的事情,如果你看厌了现在的网站首页,不妨试试这些新东西,也许能让你心情更好,让用户获得惊喜。

 

原文来自:优设

译者:@陈子木

原文地址:webdesignerdepot

原文作者: Carrie Cousins

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30014/

(0)
CatherineCatherine
上一篇 2017-05-26 16:47
下一篇 2017-05-26 18:53

相关推荐

  • 交互设计测试评估

    - END-作者  Rachel Xu欢迎将文章分享至朋友圈,拒绝转载~VUI进化论达尔文老爷爷说,你的语音交互设计该进化了~长按指纹 > 识别图中二维码 > 添加关注不关注,怎么进化~

    2018-04-18
  • 好的交互设计能促进“内容消费”

    现在的人们,每天都消费着大量的快餐文化,海量的内容、体验、感知往往都只是一看而过,真正停下脚步独立的思考已经越来越少了。茫茫产品的出现,如何利用瞬间的体验和舒服的交互让用户“停”下来,为你的产品花费时间,促进产品的内容消费,已经是一个产品经理值得深入思考的话题。

    2017-05-19
  • 【搞笑篇与交互无关】哈士奇究竟是怎样的“神犬”?

    哈士奇一辈子不认识主人,它们可能会觉得你有点特殊,但是它们也不会细琢磨,毕竟它们被智商局限的死死的。 养哈士奇永远不要撒手,它们也不是逃走,只是傻,要跑出去玩几个小时才会发现"矮马!我家呢? 求求你别再…

    2015-04-19
  • 交互设计与用户体验分析实例——外卖产品

    题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。

    2016-10-26
  • 【译】为什么要在绘制线框图之前画草图

    我们在设计的过程中都会有意无意忽略掉很多步骤,大部分原因是我们都不了解这些步骤。当有人问你,交互设计的价值在哪里?会不会觉得很难回答出来,就算答了也觉得很虚。因为本质上我们都不懂。当你了解了整个流程…

    2015-08-19
  • 新知 | 在打造用户体验上,连雷军都要向这家企业学习

    在我们之前发布过的一篇文章《小米八周年:雷军揭秘四大成功之道》中提到过,雷军在创建小米时受到了美国零售连锁超市好市多(Costco)的启发,从价值体系上来看,小米与好市多相同,都是希望用户能以可承受得起的价格享用更好的产品。好市多以优质、低价出名,在全球拥有700多个分店。从2006年到2016年,好市多的市值增长了五倍,如今的市值约为670亿美元。好市多亚洲区总裁张嗣汉在2018零售业年会上分享了好市多的运营模式、会员制度,以及管理层...

    2018-05-04
  • 【交互设计方案】记分对比法运用

    交互设计中,为什么需要这种方法? 在交互设计工作中经常会遇到这样的问题,某些位置的设计牵扯到比较复杂的场景,要考虑的因素比较多,这些设计点往往是最容易引起争议的,因为团队成员不一定都能快速了解全部的场…

    2015-10-09
  • 皮克斯教给我们的22条改善用户体验的原则

    注:皮克斯动画工作室(Pixar Animation Studios),简称皮克斯。1986年,在史蒂夫·乔布斯以1000万入主以后,创作了《玩具总动员》、《海底总动员》、《头脑特工队》等经典3D动 画电影。2006年,皮克斯被迪士尼以74…

    2016-06-12
  • 不懂这几个交互原则,你一定是假的UED设计师

    如果你对这个题目很陌生,那请赶紧登上这辆末班车,来不及解释了。在日常工作中,我们总是会遇到产品或者开发对你发问“这个按钮为什么要放在这里”,“这里显示的信息条目为什么只剩这几个”blablabla之类。不管是为了在对接流程中更加有理有据,也为了使自己的设计更人性更好用,了解这几条基本原则,也是非常必要的。除非有更好的选择,否则就遵从标准。交互设计之父 Alan Cooper最为人熟知的或许就是这句“除非有更好的选择,否则就遵从标准”了,...

    2018-03-15
  • Sketch book 各种材质产品手绘表现-别人家的手绘本,拿走、收藏... [更新]

    ▲点击关注最不可思议干货今天给大家共享一波Sketch book 各种材质产品手绘表现...拿走、收藏...手绘飙车活动进行时,点击按钮加入...手绘零基础▼点击看>此方法,让零基础小伙伴们透视准确率达到98%...津美优设2017暑期1期课程|格物造型.第5天: 线稿基础-借体推敲Ⅱ点击看>此方法,让零基础小伙伴们形态推演能力爆棚!造型推敲、设计发散!津美优设2017暑期1期课程|格物造型课程.第6天:借体推敲Ⅲ点击看>此方法让零基础...

    2018-03-23