陌北默

analysis-and-application-of-color-trends-in-2017_01

@Laurel小国王 信息大爆炸以来,用户在使用产品时,面对着越来越多的信息,往往容易眼花缭乱。为了突出内容,减少过度美观修饰对信息的干扰,扁平化风格应运而生并开始流行。抛弃多余的元素,以强烈简洁的功能界面区分,扁平化已经成为了UI设计中的主流风格。

analysis-and-application-of-color-trends-in-2017_02

然而,扁平化风格还是存在着不足的,比如:简洁有余,张力不足。有些时候,扁平化设计会变得太了以至于影响了可用性。如果用户界面太了,可操作性的元素就会淹没在一片看起来都一样的扁平化元素之海中

那么如何补救由扁平设计造成的问题?

作为一种设计方法,近扁平设计仅仅当扁平化风格能提升可用性时才采用它。它并不会武断地认定或暗示渐变和投影是有害的。

近扁平设计允许利用细微的投影和渐变来营造空间感、距离感、视觉层次感、视觉线索和边缘效果。因此设计师为了弥补扁平化的这种缺陷,重新在色彩上寻求突破口。使用渐变色就是其中最有利的武器。

analysis-and-application-of-color-trends-in-2017_04

2017年开始,UI界面上的色彩运用越来越大胆。如新版的淘宝,摒弃了之前单一的橙色,而采用了比较年轻态的渐变色,主色调、导航栏图标采用暖色单色相的渐变色。

app设计中,此类渐变多用于app内导航栏图标,入口图标等的设计。

analysis-and-application-of-color-trends-in-2017_05

通过使用单色相渐变,淘宝APP的整个页面感觉更通透了、充满了活力,再没有呆板与窒息感。

最近大火的一款游戏APP——纪念碑谷2也是的背景也是采用了单色相的渐变作为游戏背景,在让整个画面丰富的同时又不会太抢夺主体的色彩,使画面显得清新透气而不沉闷。

analysis-and-application-of-color-trends-in-2017_06

使用色系相近的不同颜色,带来强烈的视觉冲击,有种梦幻的感觉,最早尝试这种风格的是insins拟物风时期的logo一直广受好评,在进入扁平风时代后,ins没有简单的将logo拍平,而是采用了强烈的多色渐变,让人耳目一新。它极简风格的UI界面,对用户十分友好,用户只需要欣赏美丽的照片,然后双击点赞就行了。

最近苹果推出的ios11,也在扁平化的基础上做了一些改进,除了让标题更粗更黑,也将可点击的组件加上了渐变色,其中不乏强烈的多色相渐变。

 

analysis-and-application-of-color-trends-in-2017_07

画面中的色彩具有两种或以上的渐变手法,多色相渐变在视觉上的表现力会更强一些,给用户更强的视觉冲击力,这类配色在Web 端、banner设计、插画设计等运用居多。

analysis-and-application-of-color-trends-in-2017_08

然而,新潮的设计师们并不满足此,他们把渐变玩出了更多的花样。其中最出色的便是今年强势改版的优酷视频APP

analysis-and-application-of-color-trends-in-2017_09

不过这种风格还是比较复杂,不适合做尺寸较小的icon。可以看到,优酷后来将icon改回了单色相渐变。

analysis-and-application-of-color-trends-in-2017_10

不仅是GUI设计,对色彩的大胆使用也蔓延到平面设计。此类色彩的运用多用于电商H5活动页面,能够极大地调动活动所要营造的氛围,给用户最强的视觉冲击力,最终达成消费的目的。

analysis-and-application-of-color-trends-in-2017_11

讲了辣么多,那么如何讲以上一些渐变色如何运用到实际上来才能让自己的设计稿显得高大上呢?

教你玩转渐变色

一、直线型渐变

我们将渐变色的部分分为ABC三个部分进行取色分析

analysis-and-application-of-color-trends-in-2017_12

从上面的案例取色分析可以看到,如何让自己的渐变色配色不要看上去太脏,那么取色的亮度(B)就要很高,渐变色里的色值都在90以上。因此亮度的取值很重要哦!

 

二、垂直性渐变+球形渐变

由于Web界面面积比较大,在大面积使用渐变的时候。如果只是使用垂直的线性渐变是略显单调的,这个时候我们需要加一个球形的渐变,增加画面的丰富性。

球型渐变的制作很简单,新建一个图层,选择有羽化边缘的笔刷样式,在画面上轻轻扫一笔,然后用剪切蒙版盖在前面做好的有垂直渐变的底色上。

analysis-and-application-of-color-trends-in-2017_13

这两招你学会了么?色彩的运用还是需要多看多临摹才能把握精髓。还在等什么,快打开PS,练一练吧。

本文由老虎帮星龙社团成员编写:

张第升:http://www.zcool.com.cn/u/14092733

小国王:http://littlekingking.zcool.com.cn/

analysis-and-application-of-color-trends-in-2017_14

转载请注明:学UI网 » 2017年色彩趋势分析与运用[渐变色篇]

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
如何把大师级别的作品转化为自己的能力如何把大师级别的作品转化为自己的能力
HJUX香港设计之旅HJUX香港设计之旅
别再盲目配色了!为你的配色装上GPS!别再盲目配色了!为你的配色装上GPS!
适合秋季的5个版面调色板适合秋季的5个版面调色板
同类色配色,我是这么做的同类色配色,我是这么做的
漂亮的专辑封面设计(二)漂亮的专辑封面设计(二)
漂亮的专辑封面设计(一)漂亮的专辑封面设计(一)
渐变质感技法(五):巧用模糊渐变渐变质感技法(五):巧用模糊渐变
「插件」一分钟学会 Material Design 配色插件「插件」一分钟学会 Material Design 配色插件
新手也能轻松学会的配色技巧新手也能轻松学会的配色技巧