2017 UI流行趋势 - 色彩探索

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
41267 23 621 2016-12-21

设计风向标的更新周期越来越短。那么现在的视觉设计圈更新迭代速度这么快,2017年 UI 又会流行什么呢???

Image title


设计风向标的更新周期越来越短,基本每一年都会有新的设计理念推出,每隔十个月就会有一些视觉技巧在挑战现在的主流设计理念。

那么现在的视觉设计圈更新迭代速度这么快,即将到来的2017年 UI 又会流行什么呢???


不妨先从本质分析,整个设计行业的基础因素“人”已经在潜移默化发生了新的变化。

80后设计师稳重的成为行业里的主力军,90后小鲜肉带着一股跳跃性的思维在圈里逐渐崭露头角,他们更敢于创新、用色大胆并且把设计当成兴趣爱好去钻研,成长速度快的惊人。当80、90两个年代两股设计洪流交织在一起时,沉稳与新奇并存,严谨与敏捷互补。


今天就先以色彩做案例,从一些优秀作品中感受下色彩应用领域发生的一些变化.....



1、双色渐变


“渐变色”一个不算新鲜的传统视觉表现手法,相信大多数80后设计师都会在以往的某个时期对渐变色的使用情有独钟!

从2013年至今,扁平风以强烈简洁的功能界面区分,抛弃多余的元素,减少过度美观修饰对信息的干扰等等优势在设计潮流中着实稳稳的走过了三个年头。

但是一切皆扁平的纯色理论中,也有一定程度上存在着各种小弊端,如:页面信息难以拉开层次关系;缺少个性\特性展现;过度弱化的视觉信号;失去对事件的控制感等等...


所以不少新锐设计师在试着打破扁平的魔咒,渐变色就是目前被设计师们重新拾起的武器。

选择色谱盘上的邻近色进行糅合,产生了双色渐变,绚丽中又不浮夸,运用得当会为页面增色不少。

简单干净的双色渐变开始让简单的设计赋予活泼有趣的气息。


Image title


如下案例:

Image title

(Behance 案例)

Image title

(Dribbble 案例)

Image title

     (Behance 案例)

Image title

(Dribbble 案例)


 

2、轻量渐变


轻量渐变色与双色渐变色相比,具有更加柔和、减少跳跃的属性。适合使用在需要突出产品意识的同时,又加入了一些活泼的调性。

由于轻量渐变色通常采用同一颜色的深浅三个色度内的渐变过度,用量更轻,起伏很淡,对用户的视觉传达是似有似无的心里暗示。

与扁平纯色相比,轻量渐变融入了光源切入点,气氛的变化,所以轻量渐变色展现的是色彩的“柔性美”及“温和气质”。

轻量渐变色在卡片或者较大面积时使用更佳!


如下案例:

Image title

(Dribbble 案例)

Image title

(Dribbble 案例)

Image title

(Dribbble 案例)

Image title

(Behance 案例)

Image title

(主流 APP 案例)


 

3、彩色投影


投影同样也是一个视觉老技巧。但是以往投影多流行的是灰色或者重色的运用。近期另一种更大胆活泼的形式开始悄然流行,就是“彩色投影”或者叫“融入式投影”。

投影的颜色会随着投影源的主体色彩而改变,这样的好处是可以把投影带来的层次感控制在良好的弱体验之间,让投影的主体更好的融进整体画面中。也避免了部分亮色系搭配时,灰色投影显脏的问题。同时也可以让界面及色彩更突出和饱满。

所以,越来越多的新锐视觉设计师开始在研磨彩色投影的神奇功效...


如下案例:

Image title

(Dribbble 案例)

Image title

(Dribbble 案例)




视觉展现趋势的设计技巧还有很多,今天只抛一个色彩相关的小点供大家脑洞。


不要误解这里谈到的似乎不是全新的方法,设计趋势就是在开历史的倒车,或是老声常谈。其实每次处于时下的变化和感知都是微弱的,但每次都会推陈出新的地方,正如iOS从诞生到今天走过九个年头也发展了10个版本,但不能说它只是从强质感转身成扁平化经历了两个阶段! 


设计趋势也是一样,其实每一次潮流下驱动的变化都是当前时代人对美的重新定义和认知,也是符合当前感性体验的不断升级。像几年前的投影是鲜明层次需求渴望的重色使然,时下流行的彩色投影则是对整体和谐性与层级关系双重把控下的更高要求!


BTW

* 趋势的摸索往往弯路多于正途,也不是所有的趋势都适合每套产品的调性,需要设计师根据产品的业务策略、用户体验、产品风格等自行把控,避免盲目追求趋势造成风格走偏。

但正是这些不断的尝新探索才推动了产品对设计不断持重的体验升华!


(* 该文不是教程,如需学习如何做出舒服体验色彩设计技巧,可以查找其他朋友的相关文章,有不少优秀图文教程;

* 观点如有雷同,正说明大势所趋!~~~

* 分观点灵感来源于UI界优秀培训机构 BIG·D 老牛)

全部评论:23

  • 风逸仙

    2018-11-21 14:12

    例子都不接地气,好看不中用,没法落地

  • 记忆的橡皮擦

    2017-01-10 11:33

    雷同的怎么了,反正我没看过,感谢分享!

  • JTsniffrose

    2017-01-05 10:37

    @王羽枫: 谢谢,了解。只要最终的目的是相同的就好。

  • 王羽枫

    2017-01-04 16:19

    @骏翊其林: 有朋友已经回复CSS3可以实现。 在补充一点: 前端网页(H5)通过CSS3实现渐变色; App Native 的开发也可以系统原生组件实现渐变色和彩色投影

  • 撒颗雷

    2017-01-04 11:46

    @骏翊其林: CSS3可以实现双色渐变。只不过效果没有软件过度的这么自然,可能算法上有问题。

  • yolanda1999

    2017-01-03 14:10

    这是2016年的趋势吧,2017可能会在这基础上有新的趋势

  • FloraHsu小胖

    2017-01-03 10:44

    设计师都有自己的标签,可以把这篇文章当做一个想法或建议,适合不适合都跟着要表达的主题走~ 文章挺好的~

  • Eriets

    2016-12-29 16:16

    年年说现成的 这些东西2015年说到现在。而且你还说的没啥营养的话 误导新人

  • 王羽枫

    2016-12-28 17:45

    @JTsniffrose: 在你的回复中顺便回答下其他朋友的留言: 这篇小文章只是抛个观点,观点雷同很正常,仁者见仁智者见智。不代表有人说了就不能在第二个人说同样的事。 另外观点不是教程,如何使用这些技巧需要每位产品设计师都从各自的产品思考和设计策略自行把握。这里不是要告诉大家这些方法是如何推导出来的。趋势摆在眼前每个人都自己的感受,可以认也可以不认。 这篇文章要表达的重点是在结尾: “趋势的摸索往往弯路多于正途,也不是所有的趋势都适合每套产品的调性。” 1、因为平时听到不少声音说重提渐变质感是不是设计回流了?! 所以抛个色彩设计手法的变化说下,在历史的沉淀中技巧变化其实有了新的演示,别把相同字眼的东西看成是开倒车了。 2、主流趋势需要被打破,需要做创新,不是今天流行扁平就十年内都是扁平。 另外同意你的观点,用户体验才是设计本质,流行趋势只是表现手法的选择而已,选择权在设计师自己。 这篇小文章只是抒发下我个人观点的理解,或对或不对,时间验证。

  • vipksw

    2016-12-28 14:47

    适当的页面以及布局用双色渐变效果的确比较好,但是目前扁平毕竟还是主流趋势,不要盲目跟随,这个度还是要靠自己把握

  • Mr丶YE

    2016-12-27 16:20

    你说轻量渐变的话还行,双色渐变完全不能接受啊~

  • 迎风而行

    2016-12-27 14:41

    2017年我不知道,反正2016年已经流行。

  • 迷路的麋鹿S

    2016-12-26 09:44

    拿别人的整体页面和我们本土的小图标相比。。。。666

  • JTsniffrose

    2016-12-25 15:48

    希望你对这种流行趋势是有更充分有力的证实与调研而出来的结果,并不是拿着今年 dribbble 上比较火的飞机稿自己写出个设计趋势,(更何况这篇与在 medium 上的一篇文章及其相似),写的说法也很片面没有原因(为什么这个产品会用这种方式,只是为了好看而去用吗?)不是说你写不好,而是怕对新手造成误导,一味的追求这种「流行趋势」而忘记做设计的初衷是为了解决问题,回归用户本身的使用体验。以上只是我的一点建议,并无针对性,如有冒犯请忽略~

  • 骏翊其林

    2016-12-24 08:46

    你好!问几个问题:界面的渐变色块部分可以被代码直接做出来吗?还是必须要用切图的方式做出?会不会增大服务器的运行压力?谢谢大神解答

  • CISCO111

    2016-12-23 19:32

    服装潮流在轮回;音乐曲风在轮回;设计趋势也在轮回,在轮回中我们确实开辟到了更高层次的路

  • 世_无_界

    2016-12-23 17:17

    已有类似的文章 我看过

  • 万向科技CEO

    2016-12-23 16:42

    喜欢渐变色的处理看起来很舒服。页面活泼多了

  • 葱一元

    2016-12-22 19:11

    扁平风格的界面看多了就会觉得索然无味,看到渐变的风格,就明朗多了~

  • 踏雪寻冰

    2016-12-22 09:50

    还真是渐变色的应用越来越多了,看来扁平的时代是要发生变革了

  • 大表狗

    2016-12-21 16:20

  • 王羽枫

    2016-12-21 13:58

    @yu0910: 互勉互勉!!!也期待你对流行趋势的更多探索!

  • yu0910

    2016-12-21 10:05

    看到自己的作品~ 哈哈 羽枫兄 加油!

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票