色彩，说多了都是泪。
它极难掌握，一不小心就会矫枉过正。设计之初，由于种种原因——品牌、情感、喜好，经常会选择了对比较为强烈的颜色，往往给人一种不够自然的感觉。但却因为自己沉浸其中，并未察觉。
这时，就应该静下心来，从基本原理与情感设计出发，提醒自己专注颜色本身的效用与情感，使自己运用颜色的技法更加调和。在你有所疑虑的时候，不妨尝试“缩小”视角，专注于需要吸引用户注意的按钮等需要强调的元素上。
大自然，可以说是所有创作的源泉。和谐在其中孕育，那就从设计的角度成为一名大自然的搬运工吧——将这种自然的和谐转化到数字世界，转化到自己的设计之中。无论你现在在干什么——紧张地加班还是穿梭在拥挤的人流，于风中摇曳的树木花朵无意中被你瞥见，散发出别样的气息，你的呼吸平缓下来，氧气在鼻腔聚集，头脑清醒，身体激活，心情舒畅，打了鸡血，继续干活。感同身受、不言自明、潜移默化，我们都在追求这样的设计。在我们绞尽脑汁的时候，“自然”自然而然地做到了。那么，为何不从拥有自然和谐之美的苍穹、云朵、日落、花草中寻觅色彩，为我所用呢？
从基础开始
原色、间色、复色（见上一篇手册“色轮”）
颜色的掌握并非易事，但是也没有所谓的“选错颜色”，关键是你怎么使用、怎么同其他颜色配合。一般前辈都会建议先从间色、复色开始练习，这类颜色相比原色不扎眼、更淡雅，所以也不容易出错。
原色、间色、复色.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产品中。但工具只是辅助，它并不是完美的。不过，它足以给我们提供很大的帮助——通过一些调整，我们从喜爱的图片中提取出满意的配色方案。
Adobe Color.png
Sip
色彩的灵感就在你身边。当你遇到优秀的摄影、设计时，绚烂的色彩永远是吸引眼球的第一原因。那时，请不要偷懒，也别站在那里，赶紧拍下来、截个图，提取其中的颜色，你的配色也就出来了。
下个Sip（https://itunes.apple.com/ca/app/sip-color/id934379679?mt=8），现在就做好准备吧。
Sip.jpg
Dribbble（https://dribbble.com）
Dribble中每个作品都附带color palette（.aco）。甚至可以按照颜色搜索作品。
稳妥的中性配色方案
虽然主色容易提取，背景色、字体颜色却并非如此，可谓差之毫厘，谬以千里，细微的变化便会对整体界面感觉产生或好或坏的重要影响，需要细致的调整和不断的实践。下面是一些经过实践检验的中性色调界面设计。
蓝
蓝色能让人联想到天空与海洋，是一种令人感到舒适的颜色。当用户看到蓝色，会产生一种神清气爽、平静可靠的感觉。并且，蓝色能和大多数颜色进行配搭。
蓝.jpg
灰
界面设计中需要避免纯黑。这也和手机屏幕本身的黑色有关。
如果你要是用灰色，那就确保其B值要么低于30%，要么高于70%。普通的灰色调一般会显得比较呆板，显得与其它颜色不够协调，所以尽量避免使用。
灰.jpg
还有，对比要鲜明
色彩不应成为可读性、清晰性的障碍。舒适阅读的沉浸体验需要对比。为了对比优良，用黑对白，淡蓝对深蓝，高明度对低明度。
设计也需要调试。做个实验，设置好字体，然后调整背景的B值，当B值处于中间调时，就会发现文字失去了可读性。
实验.png
实验.png
自制配色
除了蓝色系和灰色系，你还可以根据自己的需要定制配色，自制配色极具探索性，也会更加冒险，如果觉得这样做就不要担心效果，多实践多对比才能出好结果，说不定还有惊喜等待着你。
颜色工具可以调整HSBA属性。在确定主色后，修改H值以单色配色、近似配色、互补配色的顺序挑选辅色。然后，微调S值、B值获得明快的主次对比。
当你想寻找同主色的相似色作为辅色时，你就需要调整色调了，前辈的经验是，移动整个色条一半的长度更容易找到合适的配色。
颜色工具.png
深色系/浅色系UI
有时你不得不为了打造品牌或可用性在深色系与浅色系之间徘徊，就像任何电子阅读器都会要求有夜间模式一样，精致小巧的Apple Watch的黑色背景也有可读性这方面的考虑。
浅色系UI设计指南
1 内容应比背景明亮，Hover、Active状态的元素最好是“点亮”而不是“变暗”。
2 注意不要过度使用有彩色。过多的颜色反而会分散用户的注意力，降低可用性。恰当将你的有彩色使用在按钮和高亮状态的元素上。
3 避免使用中性灰度的颜色。通常，亮白色的最佳B值范围在90-100%之间。
中度灰与亮白.png
深色系UI设计指南
1 不要使用纯黑。纯黑会使细节丧失，并且纯黑与白色的对比过于强烈。
2 如果执意使用，记得用深灰色去缓和高对比。
3 如使用了蓝色，就要避免使用灰色。相比深灰，深蓝色更能制造出和谐的效果。
深蓝底.png
最后，颜色的文化内涵
此外，在某些背景下，颜色还具有特定的内涵。比如，红色意味着破坏性的操作，绿色则表示开启的、有积极意味的状态，蓝色通常用以显示可跳转的链接，而不可点击的操作都是用灰色填充。在使用这些颜色的时候，我们要特别注意不要对用户造成误导。例如，我们不应将“删除”按钮填充为绿色。
慎重使用有特殊含义的颜色.png
网友评论