上篇回顾：写给不是设计师的-渐层配色(上) http://www.ui.cn/detail/136367.html

(中)篇主要会介绍以下三个主题：

- 基础复习/练习

- 球型(放射状)渐层变化

- 金属渐层变化(在下一篇xD)

强烈建议没有读过(上)篇的伙伴们，先藉由(上)篇来建立渐层应用的基本知识，而接下来的(下)篇再有了上篇的基础之后，肯定能带给您更多的帮助。小弟我也会尽可能提供您更多有用的好东西。

我是Samuel。目前职场工作经历0年(未满一年xD)，於学生时期就热爱尝试新鲜事物以及跨领域的合作(真是一条不归路)。2013年与设计系伙伴们共同完成孕妇照护系统Fetus Care；2014年暑假於i-Fit担任iOS实习工程师与介面实习设计师，同时非常感谢Chiao(IDEO)在这段时间给予的职涯建议以及分享设计思考的经验；於2015年取得经由陈雅淑教授的指导取得NTUST嵌入式系统领域的硕士学位。目前是一位对於设计与使用者体验相当具有热忱的iOS工程师。

一、基础复习/练习

讲在最前面 →在上篇有部分的读者反应不知道到底1/5区间是什麼东西，该如何把它从检色器上面打开来做参考？NoNoNo，1/5区间其实是一种感觉 →小弟在选色的时候都会在脑海裡将检色器切分成25个区块，就如同下图一样：

以上图為例，在选择渐层顏色变化时就会在下图1/5的红色框框区间内选择：

哈，一定只能这么少喔？其实在设计上面并没有一定要怎么做，只要你爽，然后业主买单就好，但小弟建议您最多最多维持在2/5的区间就好，如果再往外进行调整的话 →想必您已经开始发现顏色差异上升，甚至因為灰阶的影响，开始导致渐层出现变脏的状况。

练习一

首先我们先从一个结合类似色以及色阶变化的练习开始 → 这个练习是一个相当常见的波浪渐层图样(广泛运用在UI/视觉设计中)：不同的渐层区块搭配了透明度的变化以及正确的选色来做出一种乾净(渐层上篇的重点)，好像很厉害(每一篇的重点)的图像视觉。

练习1

‧ 选择顏色

选择顏色是做出乾净渐层最重要的一个步骤。下图是我在(练习1)裡面所使用的五种渐层组合，每一种组合都有微调色相来让顏色的变化更為细緻→记住儘可能不要跟我使用相同的顏色来做练习喔！

(1)-(5)运用到的其实都是上一篇提到类似色渐层中 →高明度色系渐层的变化，复习一下”确保明度与彩度的调整都保持在检色器的上方1/5内”的基本法则。先看看第(1)组的渐层用色，是不是完全符合这样的调整区间？在微幅调整彩度/明度的情况下，进行色相的左右移动，最后选择与蓝色(#7BD2F8)相当接近的蓝绿色(#72E8CE)作為渐层起点/终点：

再来看看第(3)组的渐层用色，在完全没有调整色相的情况下，我将彩度的变化向左调整了约1/5个区间来作為这一组的渐层选色。

讲到这裡可能有很多人会疑惑為什麼是1/5？彩度的差异更多难道不好吗？我个人认為设计上面其实是没有绝对的，让我们来简单看一下如果把彩度拉高的效果会是怎麼样：

其实除了最下方最大彩度差异的搭配之外，其餘两种都在可接受的范围之内，在我看来甚至可以说是相当不错的选择，端看您使用上面的需求→不过因為这次练习的目标是要组合出乾净/剔透而且不跟其他顏色冲突的渐层图像，因此在这边我还是会确保彩度/明度的差异都在检色器的1/5区间裡面，藉此避免当顏色重叠时持续累积的灰阶 →导致最终整体顏色过重或是视觉效果变脏。

‧ 步骤

在选色完成之后，就会是一层一层往上叠加囉！

使用(2)的顏色做出第一层，透明度30%。

使用(3)的顏色做出第二层，透明度40%。

使用(4)的顏色做出第三层，透明度40%。

使用(5)的顏色做出第四层，透明度40%。

使用(1)的顏色做出第五层，透明度30%，这层渐层角度差异较大的原因是我想试著做出更多的融合感觉，也非常建议各位伙伴尝试使用不同的渐层角度来玩玩看產生的效果喔。

做到这边大家应该发现怎麼顏色好像都融在一起分不太清楚？跟上面的范例似乎不太一样 →最后这一步是相当重要的一步，為了让重叠的类似色渐层能更明显的產生区隔，我在每一个渐层区块上面加了内阴影，举第一层与第二层的应用為例：

没有内阴影

有内阴影

虽然变化不大，但是不是能够发现有内阴影的版本其实立体感更强，同时也能拉开与同色系渐层区块的差距。而内阴影的选色其实非常简单，运用的还是同样的一个小技巧 →选择本身的顏色往右下角稍微加深一些(1/5之内)，作為你使用的内阴影顏色即可。

附上两个用相同原理调色的Demo→所以就别照著调色啦，自己配一个。

练习二

接下来我们再来看一下上篇的学习目标应该要如何製作。

註：这边只会带您进行右边的练习，左边的部分请在参阅(上)篇之后自行运用想像力產出

练习2

Step1.选择顏色

选择顏色是做出乾净渐层最重要的一步←复製贴上。同样不唬烂的选色模式(下图)，保持彩度明度在检色器的1/5区间之内进行调整，利用这样的限制来有效抑制大幅度调整色相的不协调性，这样子的用色使得图层在作為背景的同时也呈现了较强烈的渐层变化感。

Step2.製作底部基座

运用上浅下灰的渐层，搭配底部的阴影就能够轻易地製作出具有立体感的圆弧底部基座。(忘记请复习上篇)

Tips. 大部分在使用的阴影的时候请不要傻傻地选了一个黑色搭配透明度，这样子的阴影通常会！很！脏！除非要刻意强调阴影的对比效果，请尽量选用底色加深的顏色(往右下移动移动在移动)作為阴影色。

Step3.製作凹陷区

运用上灰下浅的渐层，搭配内阴影就能够轻易地製作出具有凹陷感的按压区。(忘记请复习上篇)

Tips. 小细节补充 →一般在製作凹陷的区块时，我通常会在区块底部加上白色的阴影(模糊=0)来做出反光的效果让整体更有细节喔。

Step4.打光与填上文字

在下图中红色框起来的圆形当中，我运用了白 →灰黑的渐层，利用覆盖(Overlay)的混色模式(覆盖(Overlay)的混色模式会让图层白色的部分去加亮底色，图层深色的部分去加暗底色)，搭配透明度的效果做出光从右上照过来的光感。最后搭配符合整体色调(#36D9E7)的细黑体(Helvetica Neue-Thin)文字(如果在这个作品中使用新细明体或是华康少女体我一定会揍你

二、球型(放射状)渐层变化

相信很多像我一样刚入门的人每次再看见那麼多种渐层类型时多少都会有些疑惑，上一篇已经讲完许多基本的运用方式，相信各位对於各种渐层类型应该没有那麼恐惧囉。那我们接下来就开始看看球型(放射状)渐层变化到底可以拿来做什麼吧！

一般来说小弟我最常运用放射状渐层来处理 →补光，球体，光晕这三种状况。小弟之前设计的icon也算是运用放射状渐层的概念xD。

那麼接下来我们就依序来聊聊它们的应用场景：

补光

补光这样的技巧通常会被运用在真实感较强的物体上面 →这边我们用上篇最后所Demo的蛋黄来做教学。

Step1.底部基座

.相信以各位练习到现在的能力，要做出底下这样的icon，由纯色(#FEA740)搭配基本白 →灰渐层基底的样式应该已经是轻而易举囉？！如果还不行 →请回去复习之前的内容

Step2.精华xD

一切的精华就在这神奇的一步，我们现来看看想像中的光源相对於荷包蛋的位置应该是长什麼样子：

由上图可以知道，荷包蛋的另外一端(右侧)应该会比左侧(光源直接照射)来的暗，利用放射状渐层 →模拟光由光源的聚焦点(最亮点)然后往外逐渐变暗散去的效果，就可以做出最重要的补光特性囉。

Step3.加强视觉效果

加上外阴影(#D3CBB7 透明度:50%)，这边选择是跟蛋黄顏色较接近的顏色作為阴影 →可以把他想像成蛋黄映射在蛋白產生的反光结合阴影產生的顏色。

Step4. 凸显光源点

最后 →為了更凸显光源的聚焦点，我在这裡额外加了一个橘白色区块(左图)搭配高斯模糊来增强光源效果，成果為右图。

球体

‧ 类型一

球体可以说是放射状渐层最最常见的应用 → 就跟下图一样简单：

Tips：在这边為了让球体的效果更加强烈 →我们可以加一点内阴影(稍微亮一点点来模拟底部地板產生的反光)以凸显球体本身的立体效果。

- 类型二

让我们稍微进阶一点，开始尝试看看不一样的球体感觉 →首先先拉出如下图的底色渐层：

接下来我们尝试运用放射状渐层(#F8EFDD，中心透明度100% →最外侧透明度0%)来填上左上角的光：

最后我们对光源使用高斯模糊来解决界线过於清晰的问题：

讲到这裡，相信各位读者应该也发现到 →放射状的渐层其实非常适合拿来模拟”有弧度”的光源，毕竟在自然界当中几乎不存在任何刚刚好垂直的线性渐层，绝大部分的物体都是有弧度或是有形体变化的。

光晕

- 类型一

举个最简单的例子 →有一颗太阳在发光，他的光会随著距离越来越弱..吧xD?所以在画一颗简单有著散射光的太阳时，理论上应该要利用放射状渐层拉出下面的效果。(渐层的头跟尾都填上#FFCF0A，只是头的透明度是80%而尾的透明度是0% →藉此模拟光向外发散的效果。)

同样的原理也可以利用在下图的范例：

出处：http://huaban.com/pins/696301970/

范例中的背景就模拟了夕阳阳光从左上角洒入画面的感觉 →

搭配上篇运用的渐层效果以及前述的渐层练习，要做到这张图的效果应该不会太难xD(下图)。

註：当然，这张图最难的其实是细节上面的调整。

‧ 类型二

放射状渐层其实相当适合作為UI背景使用，可以轻鬆依照下列选色(看到这句话应该都觉得很扯，我每次读文章最讨厌看到的就是轻鬆製作/配合版面类型这种有讲跟没讲一样的指导文xD)，拉出富有层次感的渐层变化。

既然很讨厌，那当然还是要说明一下上图的用色是如何选择的，我在这边做的事情其实非常简单，在橘-紫的区间依照色相表由左往右的任意选色，微调明度/彩度在1/5的区间之内，就可以轻易搭配出Demo上面和谐，不冲突的渐层效果囉。

做出来的背景效果 →

‧ 类型三

在上一篇小弟练习的icon-clock裡面，同样在背景运用了放射状渐层达到聚焦的效果。有需要Sketch档的朋友欢迎利用Facebook发讯息跟我索取喔。