饭世钢5分钟设计手册——UI配色

2016-05-05 本文已影响667人饭世钢

色彩，说多了都是泪。

它极难掌握，一不小心就会矫枉过正。设计之初，由于种种原因——品牌、情感、喜好，经常会选择了对比较为强烈的颜色，往往给人一种不够自然的感觉。但却因为自己沉浸其中，并未察觉。

这时，就应该静下心来，从基本原理与情感设计出发，提醒自己专注颜色本身的效用与情感，使自己运用颜色的技法更加调和。在你有所疑虑的时候，不妨尝试“缩小”视角，专注于需要吸引用户注意的按钮等需要强调的元素上。

大自然，可以说是所有创作的源泉。和谐在其中孕育，那就从设计的角度成为一名大自然的搬运工吧——将这种自然的和谐转化到数字世界，转化到自己的设计之中。无论你现在在干什么——紧张地加班还是穿梭在拥挤的人流，于风中摇曳的树木花朵无意中被你瞥见，散发出别样的气息，你的呼吸平缓下来，氧气在鼻腔聚集，头脑清醒，身体激活，心情舒畅，打了鸡血，继续干活。感同身受、不言自明、潜移默化，我们都在追求这样的设计。在我们绞尽脑汁的时候，“自然”自然而然地做到了。那么，为何不从拥有自然和谐之美的苍穹、云朵、日落、花草中寻觅色彩，为我所用呢？

从基础开始

原色、间色、复色（见上一篇手册“色轮”）

颜色的掌握并非易事，但是也没有所谓的“选错颜色”，关键是你怎么使用、怎么同其他颜色配合。一般前辈都会建议先从间色、复色开始练习，这类颜色相比原色不扎眼、更淡雅，所以也不容易出错。

原色、间色、复色.png

下面的颜色是iOS原生的，鲜亮活泼，是按钮、图标、被激活状态的绝佳选择。

iOS Colors.jpg

如果对颜色的运用不是很熟练，那就尝试最低程度地使用有彩色，着重增加被激活状态元素的吸引力，这并不是所谓的下下策，“少即是多”，看看iOS是怎么做的。

颜色激活界面.jpg

数字世界的颜色模式

Hue色调，Saturation纯度（饱和度），Brightness明度与Alpha透明度

学习色彩，最重要的是学习色彩的基本性质。在数字世界，有多种表示颜色的模式，很多人使用的是如RGB、CMYK等颜色模式。但是将颜色分解为红绿蓝来解释，是难以理解的。相对来说，HSBA模式是较容易掌握的一种。色调、纯度、明度、透明度本身就是色彩的性质，便于理解也便于实操。

配色方法

单色配色法

进行配色时最常用的方法是挑选一个主色，然后在其上添加10%-50%透明度的白或黑色图层，组成一套配色方案。对于那些初学者来说，围绕一个主色进行设计是一个明智的选择。“少即是多”是永远是设计中的黄金法则。

单色配色.png

通过叠加白/黑图层获得同色系颜色，增加了层次，相得益彰。慢慢熟练之后，便可手动调整纯度和明度（这就是HSBA模式的优势），只要将它们保持在一个色系，你就能得到完美协调的单色配色了。

为主色叠加图层.jpg

近似色配色法

近似色配色法就是选取同主色相近的颜色组成一套配色方案。此时，我们往往会去参考色轮。近似色尤其适合软件内容过于单调乏味的情形。使用相似的颜色可以提供视觉上的变化，活跃界面的氛围。

近似色配色.png

通过调整Hue值（加减30～50），你也可以得到近似色配色。

互补色配色法

互补色配色法就是选取对比相对较强烈的颜色进行配色，这一方法也较难掌握。在色轮中，互补色其实就是一组呈180度相对的颜色。我们常说的“红配绿”就是一组互补色。由于对比强烈，能够瞬间激活界面的气质，但却很容易产生视觉上的刺激与疲劳，应谨慎使用。一般将滑块滑块移动颜色条一半的距离即可得到互补色。

互补色.jpg

为了降低对比，还可以通过降低饱和度、增加明度等方法来进行调和。

互补色配色.png

高亮低纯配色法

可以说，高亮度/低纯度的无彩色是颜色中最重要的一个色系。无彩色本身色调调和，不会使设计显得沉重。过多使用有彩色会降低软件的可用性，而无彩色非常善于韬光养晦，并不会过多地吸引用户的注意，并能够很好地服务于产品内容的展示。那么高亮低纯配色就是借助无彩色的优势进行配色。获得高亮低纯的色调只需将S值调到接近于0，再将B（Brightness）调至接近白或者黑即可。

无彩色配色.png

其它蹊径：艺术作品

设计无处不在，色彩往往是艺术的点睛。站在一件作品面前，我们首先被吸引的就是它对于色彩的表现与运用。所以，当你被某个艺术作品所折服时，不如多做一件事——将它保存下来，从中提取出艺术家所使用的颜色，组成自己的配色方案。

走向大师之路：自制配色

自制配色对于设计来说是最佳的方法，但是对色彩把握的要求较高。借助色轮等工具选取配色，必然缺少对产品内在调性的把握，缺乏“精确度”。另一方面，“信手拈来”也会增加了损失品牌契合与可用性的风险。所以，根据自身对产品、品牌的理解进行配色其实才是最佳的设计之路。

在配色的学习中，经验的积累至关重要。学习观摩优秀的作品，是初学者成长的必经之路。我们不仅仅是需要欣赏，更要分析作品，分析出用了哪些颜色，是原色、间色还是复色。只有这样，才可以站在前辈的肩上快速起步。在下面这一作品中，设计者将相似色与无彩色结合进行设计。主色（淡绿）用来高调显示当前动作；辅色（深绿）用来调和主色，并增加变化。明暗有致的两种无彩色用作背景色服务于内容展示的同时，又衬托出有彩色，使整个设计和谐有序。

例.png

工具

Adobe Color

Adobe Color是一款非常智能的配色工具，它可以识别图片中的主色调，甚至是复杂背景中的配色。不光如此，它不仅可以智能生成“鲜艳”、“明快”、“温和”、“深厚”等配色方案，还可以根据你设置的聚焦点定制自己的配色方案。这些配色还可以通过Adobe Cloud自动同步到你的Photoshop等其它Adobe产品中。但工具只是辅助，它并不是完美的。不过，它足以给我们提供很大的帮助——通过一些调整，我们从喜爱的图片中提取出满意的配色方案。