一份全面系统的渐变色自学指南 人人都是产品经理

一份全面系统的渐变色自学指南人人都是产品经理来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。点此查看详情踏入新创科技业以来，总是听见许多设计师/工程师朋友们在抱怨设计师与工程师之间的合作有多么的…不融洽（糟糕），要码是设计师常常抱怨工程师没有美感，不重视设计细节，或是连Guideline都不读完就来跟我讲该怎样设计（→强烈建议iOS/Android工程师不管未来是否会接触接口设计都花些时间把iOS的HumanInterfaceGuideline跟MaterialDesignGuideline给看完，这是基本啊！！基本啊！！在线已经有满坑满谷的翻译文章啰，所以别再拿看不懂英文当借口啰）；另一方面就是工程师也常常会抱怨设计师总是把写动画当作小画家，把写程序当成写国字（Framer会红的原因？！）或是总是有着过于天马行空的设计想法。很幸运的是这个状况几乎不曾发生在小弟迄今的工作经验当中，主要是因为一起工作的前辈们就是一群神级的工程师或是神级的工程师+设计师，即使是学生时期合作的设计师们也都是相当优秀的伙伴。但考虑到80%..90%的工程师们都会有过这么一段与设计奋斗的辛酸史，在这边希望能藉由一连串的基础概念，以及小弟日常工作运用到的知识来帮助广大的非设计师职场伙伴来多了解一些设计的眉眉角角。当然，（设计师+工程师联机）与PM的战争又是另外一个故事了。小弟我既不是本科系（设计相关）出身，也不是资工相关出身，但有幸接受几位厉害前辈（Hammer，Sophy，Fran）的指导，目前是一位对设计与使用者体验具有相当热忱，但却是个设计做不好，拍照拍不好的iOS工程师。因为不具本科系背景这样的先天性优势（劣势）？！太艰涩的理论就…期许各领域的前辈们在阅读之余能给予一些指教啰。这边首先针对渐层的主题写了一篇（上），来聊聊常常使用的渐层类型，该如何快速有效的运用这些渐层类型，以及分享一些在线设计师们优秀的作品。在一切开始之前，首先推荐一个网站uiGradient，无聊没事的时候可以上去晃晃找点渐层配色的灵感。这系列文章主要会介绍四个主题：色彩学类似色渐层（LinearGradient）对比色渐层（LinearGradient）金属色渐层色彩学底下这就是传说中的伊登色相环，Theend。<imgclass=size-fullwp-image-187003aligncentersrc==jb201606014width=220height=220/></p>蛤？为什么没有介绍一下色彩学，因为…其实在这里还不需要太了解啊，好麻那我们稍微来说一下什么是色相环好了：基础的十二色环由瑞士设计师约翰·伊登所提出，其结构为：等边三角形内的三原色─红、黄、蓝作为第一次色，将三原色两两相加可调出橙、绿、紫等第二次色，如果再将这六种颜色中两相邻的颜色等量互调，得到该两色的中间色（第三次色），便产生了十二色色环。是不是已经看不下去了？这种太理论的东西对于非专业的我们稍微有些太遥远啰，当然并不是说这些设计的理论不重要，只是对于刚入门的伙伴们我们可以稍稍缓一些，在建立了相关基础之后我们再来更进一步聊聊这些色彩学应用的理论。这篇文章所应用到的渐层运用方法其实只要简单理解一下伊登色相环，相近色，对比色以及色相明度彩度等等的基础概念就够啰。<imgclass=size-fullwp-image-187002aligncentersrc==jb2016060122width=336height=276/></p>类似色渐层灰阶渐层：首先我们先从配色的基础的开始，白→灰的渐层可以说是大自然中光影变化最基本的一种类型，这样子的渐层搭配也是最建议初学者拿来练功用的喔（再运用白→灰的渐层时并不需要考虑到检测器上各渐层区段的差异，这些差异只要一用不好就很容易导致颜色灰阶过高（脏掉）或是饱和度（彩度）不均匀的问题）。以下图范例而言，左侧上浅下灰的渐层，在搭配内光晕后能够轻易的让图形浮凸于纸面；右侧上灰下浅搭的渐层，则可以搭配内阴影来呈现凹陷于纸面的效果。<imgclass=alignnonesize-fullwp-image-187001aligncentersrc==jb2016060121width=800height=400/></p>上浅下深（左）上深下浅（右）上面两种是基本中的基本，如果想要做出中间凹陷，但是凹陷的部分是浮凸出来的感觉，除了上灰下浅的基本技巧之外还要稍微运用一点放射状渐层来分别调整上部以及底部的光影，下一篇会提到更多这样的观念喔。<imgclass=alignnonesize-fullwp-image-187000aligncentersrc==jb2016060118width=800height=400/></p>是不是有一种凸出来的感觉呢?当然，上图几个示范的三维效果其实还不够完整，但以现在FlatDesign盛行的状况，对于光于影的变化有一些基础的了解对于取悦团队中的设计师妹妹肯定是相当有帮助的（笑）。有了基本的视觉雏形，我们可以再进一步的进行渐层（渐层角度，渐层区段，内外光晕）的微调，同时考虑到光影的变化以及阴影的角度位置，就可以轻易的作出如下图范例的效果啰！（下图除了白→浅灰的渐层之外，为了做出凹陷的平面，同时也运用了浅黑→深黑的渐层变化）<imgclass=alignnonewp-image-186999aligncentersrc==jb2016060120width=503height=367/></p>DesignedbybyPacoforSmartisan那么究竟该如何制作一个简单的灰阶渐层呢？其实做起来就跟下面这张图一样容易→<imgclass=size-fullwp-image-186998aligncentersrc==jb2016060124width=800height=525/></p>主要的调整就只在检色器的最最最最最左侧上下移动即可，如果希望带点淡淡的色泽可以往右边稍微移动一点点，这样的效果有时候会运用在物体本身是白色但周围是有色背景时，物体因为背景产生的反光影响到白色物品的表面色泽。如果希望整体给使用者的印象是清爽干净的，渐层中搭配的灰色就不应该太重，如示意图从白色往下调整一点点即可，若是选用深灰色来做搭配，产生的则是另一种沈稳的效果。该如何简单实作上面的时钟icon呢?Step1.绘制一个上浅下深（颜色相近）的圆角矩形作为icon背景（光源在上）。<imgclass=wp-image-186997aligncentersrc==jb201606018width=622height=311/></p>Step2.为图形加上内阴影（底部）与外阴影来凸显出立体感。<imgclass=wp-image-186996aligncentersrc==jb2016060115width=636height=318/></p>Step3.绘制中间的钟面部分，运用浅黑→深黑的渐层来制作凹陷的平面，同时搭配椭圆形状+高斯模糊来制作简单的光影效果以进一步模拟圆弧凸面的效果。<imgclass=wp-image-186995aligncentersrc==jb2016060117width=610height=305/></p>Step4.最后在绘制指针时要稍微注意一下渐层拉的角度喔！！在绘制时请务必随时记着光照射的方向→在这里因为指针的边缘较细，指针尖端边缘的部分会因为反光而较为明亮，因此我拉的渐层既不是正0度或是90度而是顺着指针方向的25度左右。后续的部分较简单我们就先不多谈啦（其实是懒惰）XD<imgclass=wp-image-186994aligncentersrc==jb2016060114width=368height=358/></p>高彩度色系渐层讲完了灰阶的基础渐层搭配，我们来看一下其他色系的搭配。单纯在同一个颜色当中进行明度彩度的调整如下图跟灰阶的部分相当类似就不再赘述啰。<imgclass=wp-image-186993aligncentersrc==jb2016060119width=554height=277/></p>这边只补充一个小重点，同色系的渐层选色请记