一份全面系统渐变色自学指南探究.pdfVIP

一份全面系统的渐变色自学指南 踏入新创科技业以来 ，总是听见许多设 师/工程师朋友们在抱怨设 师与工程师之间的合作有多 么的…不融洽 （糟糕 ），要码是设 师常常抱怨工程师没有 美感 ，不重视设 细节 ，或是 连Guideline都不读完就来跟我讲该怎样设 （ → 强烈建议iO S/A ndro id 工程师不管未来是否会接触 接口设 都花些时间把iO S的Human Int erf ace Guideline跟Mat erial Design Guideline给看完 ，这是 基本啊 ！！基本啊 ！！在线已经有满坑满谷的翻译文章啰 ，所以别再拿看不懂英文当借口啰 ）；另 一方面就是工程师也常常会抱怨 设 师总是把写动画当作小画家 ，把写程序当成写国字 （Framer会 红的原因 ？！）或是总是有着过于天马行空的设 想法。 很幸运的是这个状况几乎不曾发生在小弟迄今的工作经验当中 ，主要是因为一起工作的前辈们就是 一群神级的工程师或是神级的工程师+设 师 ，即使是学生 时期合作的设 师们也都是相当优秀的 伙伴。但考虑到80 ..90 的工程师们都会有过这么一段与设 奋斗的辛酸史 ，在这边希望能藉由一 连串的基础概念 ， 以及小弟日常工作运用到的知识来帮助广大的非设 师职场伙伴来多了解一些设 的眉眉角角。 当然 ，（设 师+工程师联机 ）与PM的战争又是另外一个故事了。 小弟我既不是本科系 （设 相关 ）出身 ，也不是资工相关出身 ，但有幸接受几位厉害前辈 （Hammer ，So phy ，Fran ） 的指导 ，目前是一位对设 与使用者体验具有相当热忱 ，但却是个设 做不好 ，拍照拍不好的iO S工程师。因为不具本科系背景这样的先天性优势 （劣势 ）？！太 艰涩 的理论就…期许各领域的前辈们在阅读之余能给予一些指教啰。这边首先针对渐层的主题写了一 篇 （上 ），来聊聊常常使用的渐层类型 ，该如何快速有效的运用 这些渐层类型 ，以及分享一些在线 设 师们优秀的作品。 在一切开始之前 ，首先推荐一个网站uiGradient ，无聊没事的时候可以上去晃晃找点渐层配色的 灵感。 这系列文章主要会介绍四个主题 ： 1. 色彩学 2. 类似色渐层 （Linear Gradient ） 3. 对比色渐层 （Linear Gradient ） 4 . 金属色渐层 色彩学 底下这就是传说中的伊登色相环 ，T he end。 蛤 ？为什么没有介绍一下色彩学 ，因为…其实在这里还不需要太了解啊 ，好麻那我们稍微来说一下 什么是色相环好了 ： 基础的十二色环由瑞士设 师约翰·伊登所提出 ，其结构为 ： 等边三角形内的三原色─红、黄、蓝作为第一次色 ，将三原色两两相加可调出橙、绿、紫等第二次色 ，如果再将这六种颜色中两相邻的颜色等量互调 ，得到该两色的中间色 （第三次色 ），便产生了十 二色色环。 是不是已经看不下去了 ？这种太理论的东西对于非专业的我们稍微有些太遥远啰 ，当然并不是说这 些设 的理论不重要 ，只是对于刚入门的伙伴们我们可以稍 稍缓一些 ，在建立了相关基础之后我们 再来更进一步聊聊这些色彩学应用的理论。这篇文章所应用到的渐层运用方法其实只要简单理解一 下伊登色相环 ，相近色 ，对 比色以及色相明度彩度等等的基础概念就够啰。 类似色渐层 灰阶渐层 ：首先我们先从配色的基础的开始 ，白 → 灰的渐层可以说是大自然中光影变化最基本的 一种类型 ，这样子的渐层搭配也是最建议初学者拿来练功用的喔 （再运用白 → 灰的渐层时并不需要 考虑到检测器上各渐层区段的差异 ，这些差异只要一用不好就很容易导致颜色灰阶过高 （脏掉 ）或 是饱和度 （彩度 ）不均匀的问题 ）。以下图范 例而言 ，左侧上浅下灰的渐层 ，在搭配内光晕后能够 轻易的让图形浮凸于纸面 ；右侧上灰下浅搭的渐层 ，则可以搭配内阴影来呈现凹陷于纸面的效果。 上浅下深 （左 ）上深下浅 （右 ） 上面两种是基本中的基本 ，如果想要做出中间凹陷 ，但是凹陷的部分是浮凸出来的感觉 ，除了上灰 下浅的基本技巧之外还要稍微运用一点放射状渐层来分别调整上部以及底部的光影 ，下一篇会提到 更多这样的观念喔。 是不是有一种凸出来的感觉呢? 当然 ，上图几个示范的三维效果其实还不够完整 ，但以现在Flat Design盛行的状况 ，对于光于影的 变化有一些基础的了解对于取悦团队中的设 师妹妹肯定是相当有帮助的 （笑 ）。有了