渐变的艺术作为一个视觉设计师，无论是在做WUI或者GUI，每天我们都在用渐变。今天我和大家一起聊聊渐变。
大家都知道渐变是Ps里的基本功能。PS渐变工具两头设置好不同颜色。一拉就有了，太简单了，还需要研究吗？实际上如何选用合适的渐变是一个设计师的基本功，也是一个界面好的的开始，更是一门艺术。
推荐阅读》《60种渐变色配色分享！》《配色新手的福利！两个渐变色配色网站》《180种渐变色》
效果类渐变
我从应用场景层面把界面设计分2类，效果类界面与应用类界面。一类是效果类，如网站专题，娱乐性的软件操作界面，单一界面用户停留时间不会太长，界面需要追求华丽的效果，夺人眼球。所以需要华丽的渐变搭配。
·效果类界面使用的渐变具有饱和度高，渐变跨度大的特点。
·渐变亮部暗部色相可不一致。
·渐变塑造的质感比较厚重
应用类渐变
另外一类是应用类界面，如常见的电商网站，应用操作类的软件。这类界面用户视线需要在界面停留很长时间。所以需要褪去华丽的渐变，给用户创造出简单舒服的界面，所以这界面需要的是轻量级的渐变。
·应用类界面使用的渐变明度跨度小。
·渐变亮部暗部色相保持一致
·渐变塑造的质感比较平实
选择合适渐变的手法
先介绍下HSB颜色模式的知识。HSB分为色相、饱和度、明度三个因素。色相（H）代表这是什么颜色，比如蓝色，如果我们说这个蓝色比较淡，那就是饱和度（S）比较低。如果说这个蓝色比较暗，就是明度（B）比较低。
通过ps拾色器我们可以观察到效果类渐变色相、饱和度和明度色值都在变，变化的幅度都比较大。而应用类一组渐变色相几乎是不变的，只是饱和度和明度色值在变。色值一般在10到15左右。
再来看通过变化色相、饱和度和明度会得到什么样的渐变。
组1色相发生变化，选取更加亮的颜色。这种手法用于效果类渐变，配合不同的颜色可稍许调节明度。
组2色相不变，明度增加。这种手法用于应用类渐变，只调节明度。使界面保持色系高度统一。
组3色相不变，饱和度增加，这种手法效果类渐变应用类渐变都可以使用，比如土黄色，如果使用组2手法，容易使颜色显得很脏，这时候通过饱和度调节，加些颜色，使界面保持亮丽。
选用合适颜色的渐变
一个合适的渐变先从选择合适的颜色开始，那么什么界面适用用什么颜色的渐变了？
灰黑渐变给网站带来科技感，玻璃质感营造了时尚娱乐气息。
蓝色渐变用在公司、企业类官网，展示企业严谨形象，加深提高品牌
暖色调渐变（橘色、黄色、红色）应用在电子商务类网站，运用暖色调渲染气氛，让用户感受到网站整体的活跃氛围和愉悦感。
黑色、咖啡色、紫色酒红色、可应用在奢修品网站上，表现一种定位高端、产品品质一流的感觉。
一些渐变使用注意点：
·一个界面上应用的色彩体系不宜超过4个以上，否则界面显得杂乱无章。1个色相的就是一个色彩体系。
·一个界面上出现的渐变尽量保持明度跨度一致。举例说渐变A的明度跨度为+10，同一个界面上的渐变B的渐变跨度不应该为+30。
不必死板的都要+10，因为色彩是微妙感性的，不应该过于被数字所束缚，但严谨的色彩体系一定是有系统有意识的控制颜色。
如下图，绿色系渐变明显跨度比其他3组要大，显得突兀。
·灵活使用灰度渐变，会让你的界面统一高雅。
·渐变与整体界面气质保持一致，如果整个界面走平实路线，那么就要统一到底，不要界面中突然冒出无厘头的玻璃质感。
