你今天渐变了吗？
文章版权归：rong360ued 转载请署名
郭沫若说“宇宙内的东西没有一样是死的，就因为有一种节奏（可以说就是生命）在里面流贯着”，我说宇宙内的东西没有一样是死的，就是因为有许多色彩装饰了我们眼前的世界。“天国的色彩”在流动，这种流动变化形成无穷的渐变秩序······ 而生活中处处都是渐变的色彩世界。
在iOS7以后，界面设计已经趋于扁平化，在扁平化设计兴起之时，渐变是设计师最简单的手法之一，也是移动端APP设计常用的设计技巧。
什么是渐变色
所谓渐变色是指某个物体的颜色从明到暗，或由深转浅，或是从一个色彩缓慢过渡到另一个色彩，充满变幻无穷的神秘浪漫气息的颜色。
色彩可以给我们不同的感受和情绪，而渐变色则可以给我们更多的想象空间。纯粹的渐变色使得色彩更生动缓和，不单调，可以丰富整体设计感，却又不会增加视觉负担。合理的使用渐变色可以吸引用户视觉焦点、渲染氛围、提升美感、传递情绪等。
了解了什么是渐变色，我们来分析一下色彩的渐变现象和表现形式：
色彩的渐变现象
渐变现象分为两种：色相渐变和明度渐变。
首先我们来介绍一下色相渐变，牛顿透过二菱镜将太阳光折射成红橙黄绿青蓝紫七色光谱，得到了一个全色相的色环，把色彩按色相环的顺序排列组合就形成了渐变色彩形式中的色相渐变。色相渐变言简意赅则是由一个颜色到另一个颜色的渐变或是多个颜色的渐变（如下图）。
其次为明度渐变，色彩的明度有两种，一是同一色相不同明度，如同一颜色加黑或者加白掺和以后能产生各种不同的明暗层次。二是各种颜色的不同纯度，每一种纯度都有与其相应的明度。色彩的明度变化也会影响到纯度，（如下图）蓝色加入黑色后明度降低，加上白色则明度提高。
渐变的表现形式
这里我们简单做个介绍，渐变色有五种形式:
线性渐变
径向渐变
角度渐变
对称渐变
菱角渐变
在日常设计工作中线性渐变、径向渐变用的较多（如下图）。
了解了渐变色的一些基本概念后，接下来我们再分析下在使用渐变色过程中几种常用的表现手法：
一、双色渐变
双色渐变是渐变设计中很重要的组成部分，是设计师们最常用的创作手法之一。其渐变现象可多种多样。渐变方向主要指从一个颜色到另一个颜色的渐变，如下图五从A-B，它有横向渐变、纵向渐变、对角渐变三种方式。
这种手法可作为设计的主视觉存在，也可是诸多特性中的一个。
其效果是独一无二的，可以让画面更加丰富、活泼，同时使画面更整体统一，提升美感。下面我们赏析下双色渐变表现手法的案例设计作品。
（横向渐变）
（纵向渐变）
（对角渐变）
二、图片上的渐变色叠加
在图片上叠加色彩已经流行了相当长的一段时间。
这种渐变通常在背景、照片中使用，可让画面更具神秘、优雅、更具吸引力，让用户注意到上面更加重要和更关键的元素。
其中半透明的叠加可以让画面更细腻，同时也奠定了画面的主色调，这种设计对于大图的作用尤其明显，可以为图片带来耳目一新的感觉。
使用过程中要注意对背景图的挑选，色调应与内容的含义相匹配，叠加后需强化页面信息的可读性，不要只为了装饰而装饰，否则呈现出来的结果会完全相反。下面我们赏析下在图片渐变色叠加表现手法中的案例设计作品。
整个页面多处采用了渐变，头部用的图片叠底和双色横向渐变，到中间卡片机票信息和下方button都采用了双色横向渐变。
头部使用了绿色双色横向渐变，整体页面控制在绿色色调中让画面更协调，同时也保持了信息可读性。
以上都采用了卡片式设计，每一个卡片都给了统一的双色低透明度的渐变色，更好的增强图片本身的氛围，让画面更具神秘感，吸引用户。
三、多层次渐变叠加
对于Instagram放弃了复古相机样式的应用图标，并引入了更简洁的用户界面，此次改版的主要目的是让用户更专注于他人分享的内容。
斯普拉特表示：“我们认为，彩色内容应当直接来自于社区用户分享的照片和视频。我们剥离了界面中的彩色和噪声，而用户的内容应当处于中心地位。” 不管这个设计好坏与否，你不得不承认第一眼看这个彩虹色让你眼前一亮。也让我们重新认识到在UI设计中，使用得当的渐变色彩，可以使界面和图标的设计感得到迅速提升。
Instagram图标主要由一组线性对角渐变，加两组球形径向渐变叠加组成。
顶部由图层 1双色渐变和图层2、3单色低透明度渐变叠加组成，使画面更柔具有层次感。
（三层径向渐变叠加组成）
四、色块渐变
渐变的颜色不只可以运用在一个色块上，还可以运用在一组色块上。设计师会采用相同色、同类色、近似色、对比色、补色来将每个菜单项清晰区分开，让界面平衡在一个频率上，这样的画面多姿多彩，也更富有节奏感和舒适性。
五、网格渐变
AI网格工具绘画出的成品不亚于3D，是一种很好的矢量画图方法，绘画技巧相对复杂，要求较高，广泛用于平面设计作品中。网格配色的运用，考验设计师的颜色搭配功底，调整每一个瞄点让色彩过渡自然，也可采用多图层的叠加方式。
写实类手法，需要耐心做细微的调整，注重瞄点透明度的使用
运用渐变色的几种手法就写到这了，还有更多的方式待大家去挖掘。
安利时间
对设计师而言，想要用好渐变色，需要有更好的色感，在色彩搭配和透明度上多下功夫。在这里推荐下面两个网页，特别实用可在线调整渐变色的方向和再线生成css代码供开发。
配色网站推荐一（webgradients）
http://webgradients.com
配色网站推荐二（uigradients）
https://uigradients.com
写到这里，已经花了比较大的篇幅来阐释了渐变色的定义与功能，渐变色的二种现象和二种表现形式，以及图文安利说明了渐变色的五种表现手法，所以在这里以展望未来作为简单的结尾来结束对渐变色的讨论。
瑞士美学家伊顿说过“主观色彩趣味不足以解决全部的色彩问题，客观规律知识对于正确评价和使用色彩是非常必要的”，可见系统了解色彩的知识体系是相当重要的。
在如今互联网高速发展的时代，渐变色在网络领域还是实体成品当中都充分得到人们的运用和认可，但是反之人们对于视觉效果的要求越来越苛刻，人们的审美水平也在不断发展。在UI设计中，渐变大多是配合着投影、外发光使用，以增强渐变的立体感。
所以，虽然渐变色在设计领域当中是常用的表现手段，有其独到的表现方式，表现出特有的运用价值，但是不要为了渐变而渐变，如给功能上和可读性带来了坏影响，那么物极必反最终以作品的失败告终。因此渐变色也不是想上就上，哪怕硬要上也要注意方向。
关注不错研究室订阅号回复以下内容：
回复“进群”进高质量的分类社交圈
回复“mac”下载《2017软件 含PS,AE,AI,INDesign,Dreamweaver》等，全年可下载！
本周电子书推荐
链接: https://pan.baidu.com/s/1c23Xu0o 密码: jpqr（链接7天内有效）
联系客服
