UI色彩那些事（下）

人们对色彩的敏感程度高于形状，色彩能在第一时间吸引人们注意力，也是最容易被人们记住的元素，在UI设计中也非常重要，更是逐渐形成了一些色彩的使用规范、技巧与惯用颜色。

上篇我们已经分析了UI设计中品牌色和中性色的使用，今天继续功能色和辅助色这两方面。想回顾上篇内容的小伙伴可以直接传送门进入→《UI色彩那些事（上）》。

功能色顾名思义就是代表某种功能或意义，现在常用功能一般都已经有了与其匹配的惯用色，我们在选择的时候遵循现有规律即可，这样对用户来说学习成本才是最低的，能够清晰明了一看就懂。

大家最常见熟悉的功能色，比如绿色代表正确成功，红色代表错误。

再比如从链接文字，带颜色的文字会给人以可点击感，有些情况下会选择的主题色，但也有一些主题色不适合的情况，比如主题色是红色，红色本身会带有些警告警示的意味；黄色明度高不适合小文字的阅读等。

除了主题色，还有一种通用的选择就是使用蓝色作为链接文字的颜色，这是从web时期就培养出来的视觉习惯，用户也很熟悉。点击前为蓝色，点击后用紫色。

提醒、警示性则以橙红色为主，橙红色系能带来视觉刺激，最能引起用户注意。不管是徽标圆点，还是文字提醒，都选择了它。

上篇中提到品牌色是体现公司文化、产品特色的重要视觉元素，是人们脑海中对于产品的强烈记忆点。但在一些情况下，只有品牌色不足以表达完整的视觉效果，所以还需要辅助色的帮助，丰富视觉层级，减少审美疲劳。

辅助色的选择可以从三个方面来考虑，分别是：相近色、互补色、渐变色。

· 相近色

相近色其实就是与主题色相近的颜色，比如Tints and shades系统：通过对主题色加入白色或黑色（tints加白色，shades加黑色），改变主题色的明度与饱和度，增加颜色的层级变化，以满足不同场景的需要。

常见的使用场景比如web端按钮的常态、经过与点击的色彩，就可以使用tints和shades系统的算法来得到。

· 互补色

互补色则与相近色刚好相反，相近色的色相不发生改变，而互补色则是选择不同色相，色环相对180°的色彩产生强烈对比。

熟悉的例子比如Airbnb、厨房故事都是采用互补色的配色方式。

· 渐变色

渐变色选择与主题色在色环内15°的色彩，色相与主题色接近又稍有不同，保持色彩的冷暖一致，过渡更加自然，视觉效果自然和谐。

PS：15°以内是安全区域，指不超过15°的范围，但并不是指选择相差最大的色彩，根据现在微渐变的流行趋势，选择与主题色更相近的颜色会更加适合。且不同色相给人视觉上的感观区别程度也不一样，我们还应根据具体情况选择，多尝试对比。

除了色相上的变化，也可以使用上面定义的同类色来制作渐变色，选择明度和饱和度的变化，这种方式是比较保险的方式，是一张安全牌出错几率小一些，效果更加可控，对新手小伙伴更加友好。

当然现在也有不少配色工具可以帮助我们，推荐我个人觉得比较好用的两款

·Color Scheme Designer

确定主色后可以选择单色、互补色、类似色等搭配。

http://www.peise.net/tools/web/

·material design palette

www.materialpalette.com

选择两种颜色后，可以有颜色搭配及页面预览。

· 选择功能色的时候遵循现有规律对用户来说学习成本最低，一看就懂。

· 渐变色既可以选择色相的变化，也可以选择明度、饱和度上的变化，需要根据当下流行趋势及具体情况选择。

参考引文

http://1t.click/aUyw《颜色》