谈渐变／附干货（高颜值渐变神器WebGradients）

WebGradients

一、渐变色&互联网

最近大家都知道淘宝2017设计升级了，最明显可见的一点就是，加入了渐变的设计元素，从logo到icon、按钮、背景等。

淘宝2017新概念

渐变色几年前已经在设计圈兴起，第一感觉就是很炫很酷，与互联网这种快速发展、多变、炫丽的形象很符合。大多设计师都争相效仿，把渐变色运用在互联网产品的概念设计中。

互联网产品中最普遍的渐变运用是：1、同色相不同明度／纯度的渐变；2、临近色的渐变。

左：绿色渐变／右：红黄渐变

为什么这两种渐变最常见呢？

首先，同一个色相的渐变（如：绿色渐变、红色渐变等）和临近色的渐变（红黄渐变，黄绿渐变，绿蓝渐变等）都不会带来太大的视觉冲击，能柔和地结合在一起，同时又带来变化，比单色多了流动性，使颜色更加生动，但这一份生动不会很扎眼、很刺激。充分地表达了包容性和多样性，与互联网的特征一样。

渐变色和互联网都有着包容性和多样性的特征。

---

二、渐变色的流动性

刚刚已经提到了渐变色的流动性，它的流动性主要是因为颜色的变化带来的方向感，变化的轨迹会带来运动的视觉效果。

横向渐变

---

三、渐变色的质感

渐变色除了给颜色变化带了流动性之外，还有多了“质感”，这里的质感包括体积感、材质感。单个颜色本身就可以通过色相、明度、纯度带来一定的材质感和重量感（不同颜色会带来不同材质和重量的联想），但渐变的颜色可以带来的光的变化感，从而形成体积感和质感。

1、体积感：颜色的变化必然带来对比，对比就会出现较亮的颜色和较暗的颜色，亮的颜色会较凸起，暗颜色会压下，就如同一个有体积的东西在光照下，有亮面有背光面／有高光有投影一样。

2、材质感：不同材质的东西对光的反射不一样（形成的高光和反光不一样），就像是不锈钢和石头一样，在同样的有光环境下，不锈钢的高光的大小和亮度都和石头不一样（一个是镜面反射一个是漫反射），所以渐变的颜色可以通过渐变的属性（渐变颜色的色相、明度、纯度、变化的明度纯度差，变化的节奏等），带来各种材质的感觉。

右边比左边看起来更有光泽

---

四、介绍一个高颜值渐变网站－WebGradients

一个提供180多种渐变颜色参考的网站，提供的颜色属性都清晰标明，还可以下载成PSD, Sketch, PNG 甚至直接复制成一段 CSS 渐变代码。

网站提供的渐变颜色都很美腻。

WebGradients

它的加载页是这样的：

加载页

案例展示：

同样类型的网站还有一个大家都比较熟悉的：UIgradients