2017年色彩趋势分析与运用[渐变色篇]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

教你玩转渐变色

一、直线型渐变

我们将渐变色的部分分为A、B、C三个部分进行取色分析

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

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

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

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

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

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

张第升:

小国王:

(0)

相关推荐

  • 天地有大美!打造沙丘日月星辰背景插画[AI教程]

    小编:今天带大家学习制作沙丘日月星辰背景插画,最后可用来做三个不同时间变化的手机界面背景.过程中我们可以学到渐变色的用法技巧,保持对于主色的控制以及掌握AI中渐变工具和符号喷枪等工具-最后的效果是非常 ...

  • 打造细腻光感抽象渐变背景[PS教程]

    前言:工具的两面性 渐变应该是这两年的一个视觉风格趋势,将扁平化的平涂填色改为渐变以后,瞬间灵动了不少.在追逐渐变的过程中,我们都很高兴能在PS或AI这类软件中看到有渐变工具,这个工具为我们的创作带了 ...

  • 教你绘制一只小老虎[AI教程]

    小编:今天@Ethan为大家带来一篇插画教程,在本教程中,你将学习如何创建一幅可爱的老虎插图,我们使用基本的形状和变形效果.过程比较简单,大家跟着操作,可以轻松完成.如果感兴趣,还可以自己创新尝试画一 ...

  • 毛线编织纹理图标教程[AI教程]

    前言 毛线编织纹理中的一针一线,最能传达温暖.体贴和一种温馨的亲和力.织物的质感如果运用在这类设计中将会非常出彩.今天我们就来学习在AI中如何掌握这一技法,这个技法的精髓的就在于对于细节和整体的把控, ...

  • 梦幻童话!绘制细节丰富的水上城堡群像[AI教程]

    @飞屋睿建筑是空间的诗学,是简单几何抽象美感的极致表现.尽管我们并没有学建筑设计,但还是可以从建筑的美学中汲取到灵感.最适合用以绘制建筑的还是矢量软件,比如AI等.今天我们就用AI来绘制一组童话里的梦 ...

  • 20个小技巧教你设计惊艳的三折页[大量案例]

    设计一款让公司备受瞩目的三折页 宣传册可不仅仅只是陈述公司业务的最好载体.即使是一个简单的三折页,你也能大有可为.毕竟宣传册可是最多功能的宣传物料. 与传单和海报不同,宣传册可以更好地讲述你的品牌故事 ...

  • 一起制作Alphabear图标[AI教程]

    @张泡泡教你制作Alphabear图标,主要运用AI渐变,形状叠加来呈现,还是有很多不足,看完记得练习哟! 首先对AI文件进行设置,[编辑 > 首选项 > 单位] 常规:像素 描边:像素 ...

  • 如何设计挥毫泼溅感毛笔字[AI教程]

    前言 对于毛笔的各种书体,虽然在网络里有许多书法类字体资源,但是试过后都会发现其效果并不十分理想.主要是由于东方书法的韵味有其自身运笔的独特性和它本身的不可复制性.如果我们能写出这样的字体当然是好事, ...

  • [新手教程]苹果电脑的基本操作

    习惯使用Windows系统的朋友,突然转到用Mac OS,可能连基本的操作都不会.这里给这位介绍一下Mac OS的话常规基本操作:包括开关机.常用快捷键.Dock的设置和使用. 开机.关机和重启 01 ...