没学过渐变颜色的同学有福了。这是我见过的最适合实用的渐变颜色教程。从最简单的灰度渐变到相似色/对比色渐变的推广，教学非常细致易懂，插入了很多渐变技巧和示例教程(如何拉渐变以免脏/画带渐变的锤子时钟图标等。)，良心推荐！

��ͷ��ҳ���上篇：一份全面系统的渐变色自学指南中篇：如何用渐变色绘制高格调的渐层背景 球体下篇：写给非科班设计师的渐变色学习指南

作者Angela Tsou推特:@ mini _ cu高玉玺的脸书:www.facebook.com

在此之前→本文不是教你如何使用工具的文章，也就是说我不会告诉你如何使用Sketch3/ Photoshop/illustrator工具。不过本文的例子都是Sketch3或者Photoshop做的。如果你需要任何样图/成品图，请给我发信息询问。

自从进入新技术行业以来，我一直听到很多设计师/工程师抱怨设计师和工程师之间的合作是多么的不协调(不好)。关键是设计师经常抱怨工程师没有美感，不注重设计细节。或者你可以不看指南告诉我怎么设计(→强烈建议iOS/Android工程师花点时间看iOS的《人机界面指南》和《材料设计指南》不管以后会不会接触界面设计，这是基础！！基础！！网上已经有很多翻译的文章了，不要拿英语当借口。另一方面，工程师经常抱怨设计师总是把写动画当小画家，把写程序当写国民性人物(为什么Framer会流行？！)或者总是有一个过于野心勃勃的设计思路空。

幸运的是，这种情况在弟弟迄今为止的工作经历中几乎没有发生过，主要是因为一起工作的前辈都是一群神级工程师或者神级工程师和设计师，甚至学生时期合作过的设计师都是优秀的合作伙伴。然而，考虑到80%...90%的工程师都有过如此苦苦挣扎于设计的历史，希望小弟在日常工作中应用的一系列基本概念和知识，能帮助广大非设计师职场伙伴对设计的眉角有更多的了解。

当然，和PM的战争是后话。

弟弟，我既不是本科(设计相关)，也不是员工相关，但有幸得到几位厉害的前辈(锤子、索菲、弗兰)的指点。目前是iOS工程师，对设计和用户体验很有热情，但不擅长设计和拍照。因为没有本科背景这样的先天优势(劣势)？！太难的一个理论是……期待各领域前辈看完之后给点建议。首先我写了一篇关于渐变主题的文章(第一部分)来谈谈常用的渐变类型，如何快速有效的使用这些渐变类型，分享一些网上设计师的优秀作品。

在一切开始之前，先推荐一个网站，uiGradient。无聊的时候可以上去找一些渐变配色的灵感。
本系列文章将主要介绍四个主题:

色彩学类似色渐层（Linear Gradient）对比色渐层（Linear Gradient）金属色渐层

色彩学

这下是传说中的伊甸色戒指，结束了。

蛤？为什么不介绍一下色彩学，因为，其实你在这里不需要了解太多，所以麻，我们稍微说一下什么是色环:

基本十二色戒指由瑞士设计师约翰·伊登提出，其结构为:

等边三角形中的红、黄、蓝三原色作为原色，橙、绿、紫三原色成对相加可以调出二次色。如果六种颜色中的两种相邻颜色被相等地互调，则获得两种颜色的中间颜色(第三种颜色)，并且产生十二色的颜色环。

我看不下去了。这种太理论化的东西，对于非专业人士来说有点太遥远了。当然，这并不意味着这些设计理论不重要，但对于我们的初学者来说，我们可以慢一点。在建立了相关的基础之后，我们再来进一步说说这些色彩应用的理论。其实简单了解一下伊甸园色环、相似色、对比色、色相明度、彩度的基本概念就够了。

类似于颜色渐变

灰度渐变:首先我们从配色的基础开始。白色→灰色渐变可以说是自然界中最基本的光影变化类型，这种渐变搭配也是新手最推荐练习的(再次使用白色→灰色渐变时，不需要考虑探测器上各个渐变段的差异，使用不好容易导致颜色灰度过高(脏)或者饱和度(色度)不均匀的问题。对于下图中的例子，左侧顶浅底灰的渐变，配合内光晕后，很容易使图形在纸面上凸起；在右侧，顶部灰色，底部浅的渐变可以搭配内阴影，表现出纸张凹陷的效果。

上浅下深(左)上深下浅(右)

以上两个是基础中的基础。如果想让中间凹陷，但凹陷的部分是浮凸的感觉，除了上灰下浅的基本功外，还要用一点径向渐变分别调整上下的光影。下一篇文章会提到更多这样的概念。

有凸出的感觉吗？

当然上图展示的立体效果还不够完整，但是以平面设计的盛行情况来看，对光影的变化有一些基本的了解来取悦团队中的设计师姐妹肯定是有帮助的(笑)。有了基本的视觉原型，我们可以进一步微调渐变(渐变角度、渐变截面、内外光晕)，同时考虑到光影的变化和阴影的角度位置，我们可以很容易的做出下面这个例子的效果！(除了白色→浅灰色的渐变，在下图中，为了做出凹平面，还使用了浅黑色→深黑色的渐变)

由Paco为Smartisan设计

那么如何制作一个简单的灰度渐变呢？其实和下图一样容易做到→

主要调整是在颜色检测器最左边和最左边上下移动。如果想有淡淡的颜色，可以向右移一点。当对象本身是白色但被彩色背景包围时，有时会应用这种效果，背景的反射会影响白色对象的表面颜色。如果希望给用户的整体印象清新干净，渐变中的灰度匹配不要太重，比如原理图可以从白往下调一点，如果选择深灰色进行匹配，会产生另一种稳定的效果。

如何简单实现上面的时钟图标？

第一步。画一个上浅下深(颜色相似)的圆角矩形作为图标背景(光源在顶部)。

第二步。添加内阴影(底部)和外阴影，突出立体感。

第三步。画出钟面的中间部分，利用从浅黑到深黑的渐变做一个凹平面，配合椭圆高斯模糊做一个简单的光影效果，进一步模拟弧凸效果。

第四步。最后，画指针的时候，稍微注意一下渐变拉的角度！！绘图时请时刻记住光线照射的方向→这里，因为指针边缘较薄，指针尖端边缘会因为反射而变亮，所以我拉的渐变不是正0度或90度，而是沿指针方向25度左右。后续部分简单。先不说了(其实懒)XD

高色度梯度

完成了灰度的基本灰度匹配，再来看看其他颜色的匹配。简单调整同色的明度和彩度，如下图，和灰度部分挺像的，这里就不赘述了。

这里只补充一个小点。请记住移动到颜色检测器的右下角，以进行同一颜色系统的渐变颜色选择。说三遍很重要。这种移动方式主要是为了避免在调整色阶的同时灰度提升过快，渐变不太可能脏或者造成过大的色差。另外，对于初学者来说，当所有物体都在同一平面时，整体角度效果应该是一致的(毕竟光主要来自同一个地方？)。

接下来我们来看一下稍微高级→选择渐变。对于我这样的新手来说，有几个问题:1。搭配渐变颜色感觉不对(不自然)；2.匹配的渐变颜色似乎有点暗(脏)。那么如何才能避免这些问题，做出漂亮的渐变呢？

事实上，制作像上面所示的渐变非常容易。除了上面提到的一些小技巧，你只需要注意两个基本原则。对于光色系统的渐变，像光色系统渐变的例子，亮度的调整间隔不要太大(1/10)。在颜色检测器上，我们可以改变色度和色调，以匹配喜欢的渐变变化，但上下移动的范围应该保守，否则渐变很容易产生肮脏的视觉效果。

△浅色渐变示例

至于深色系的渐变，亮度的变化可以更大，但请记住，除非渐变开始时的颜色选择是相当深的深色系，否则请尽量确保亮度的变化在1/4–1/5的范围内，以避免脏污或色差过大的问题。

△深色渐变示例

补充一个类似于配色图形变化(透明度)的例子，蓝绿色和绿色渐变的使用相当普遍，当这类颜色的明度和彩度较高时，往往能给用户带来活泼明亮的视觉印象。

高亮度颜色梯度

以上各组灰度的配色都比较高。现在我们来看看如何处理高亮度的灰度配色模式。处理基本的高清灰度相对容易，这样可以保证所选的颜色保持在颜色检测器上部的1/5以内，同时也不要让色度变化太大，从而达到下图所示的效果。

莫名其妙的，好像写了很多东西。我们用一个例子来实践这些渐变。这个例子是设计师阿德里安·费尔南德斯利用渐变制作的瀑布效果。

第一步。首先，我们将工作块分成三个块，并用相似的颜色填充这些块。这里选择的蓝色→蓝绿色与作者使用的颜色相同。建议练习时尝试不同的颜色。有了白色透明色块，可以快速制作简单的渐变和立体效果。注意这里没有使用渐变。

第二步。用三块浅顶深底的概念，从上到下做渐变，拉出画面的层次感。

第三步。用不同宽度的矩形(选择高亮度低色度的蓝色→透明度在50%-100%范围内的蓝绿色)来模拟瀑布的水流。

第四步。添加透明度渐变(

第五步。作者实际成品在这里，有兴趣的朋友建议临摹完成练习，对于循序渐进的应用肯定会更得心应手。当然，从作者的成品中，我们可以发现还有很多细节需要从第四步开始调整。由于渐变中色彩的微妙变化，以及每个设计师对色彩的偏好和敏感度，即使是临摹的作品，最终往往也会感觉完全不同。

对比度

什么是对比色？

在色环中，直线两端的颜色为180度，称为对比色。基本上，制作渐变的原理是相当相似的，但是在使用带有渐变的对比色时，我会特别注意几个小技巧:

对比选色的彩度差异不要太大。在选色上不一定要拘泥于刚刚好180度，基本上160–200度这个区间都可以达到相当不错的效果。建议画面的配置上一个做为主色一个作为副色。请根据类似色渐层章节中的概念来制作渐层。对比色渐层范例

相信你也应该发现，近几年界面设计/展示中应用渐变的情况相当普遍。比如我很喜欢的泰国设计师Tintins和美国的设计工作室Awesomed都在作品中使用了相当多的渐变。此外，我们还可以发现渐变往往能莫名其妙地带出一些看似强大的感觉，有一种将光影融入设计的感觉。对于初学者来说，使用渐变来制作一个干净易用的界面是比较困难的。以后我们会和大家分享一些工作经验。以下几组是我用上述技巧拉出的对比色渐变界面:

下一篇会跟大家聊聊金属渐层该如何使用，有时间会再谈谈放射状的渐层可以产生怎么样的视觉效果啰。