3.2 如何快速进行UI配色

没有不好的颜色，只有不好的搭配。色彩是设计中最具表现力和感染力的因素，它通过人们的视觉感受产生一系列的生理、心理感受和类似物理的效应，唤起用户不同的情绪和感受。对于设计新人，配色始终困惑着他们，“为什么我的页面总是太花哨？”“为什么别人的作品那么大气？”初学者在学习配色之前，应先学习色彩心理学的知识，理解色彩对于不同人群带来的感受。多看优秀的设计作品和观察周围美丽的事物，从中获得优秀的配色灵感，从而提升对色彩的认知。多进行配色练习，随着时间的推移，设计师会做得越来越好，本篇就通过对色彩的深入了解，来学习如何快速进行UI配色。

一个完整的UI配色应包含主色、辅助色和灰度色（灰度色的配色规范请阅读上一篇）。主色通常与品牌色一致，在导航栏、图标、按钮、菜单等都会使用到。确立了主色后，可以选择与主色色调一致但能拉开层次的同色系色彩或邻近色作为辅助色。此外，在一些场景中需要强调内容，因此选择与主色对立的互补色作为第二辅助色。如果色彩过于鲜艳，还可以降低饱和度和明度，让色彩变得柔和一些。

理解了UI配色的步骤后，接着我们来学习几种常见的配色方案。请注意：真正的色环如上图所示，但为了更加清晰地展示，下文中的示例仍然使用了十二色环。

单色

单色是指某个色彩的明度变化，即在色彩上叠加10%～90%白色或黑色得到的一组颜色。单色搭配由于彼此之间色相相同，因此能和谐共处。

QQ音乐品牌色为绿色和黄色，但其界面设计仅使用绿色作为唯一主色调，单色的界面没有花里胡哨，给人一种冷静、清爽的感觉。

在界面中，搜索栏背景色由主色加上10%的黑色得到，听歌识曲界面中的圆形雷达图浅色背景由主色加上60%的白色得到，如下图。

邻近色

邻近色是指在色环上任意三个相邻的颜色，它可以在同一个色调中建立起丰富的质感和层次，和谐但不单调，理所当然成为最安全的配色法则，例如黄色、橘黄、橙色互为邻近色。

蚂蜂窝的品牌色为橙色，其界面设计也延续了品牌色作为主色调，并选择橙黄和红色作为辅助色，邻近色的界面主次分明、丰富饱满。

互补色

互补色是指在色环上对立的两个颜色，例如黄色和紫色、橙色和蓝色、红色和绿色等。互补色有着非常强烈的对比度，在颜色饱和度很高时，可以产生许多十分震撼的视觉效果。通常画面为了吸引眼球经常会使用互补色，但使用不当也有可能使设计显得非常突兀。

Airbnb的品牌色为红色，其界面设计使用品牌色的互补色作为主色调，并选择品牌色作为辅助色，互补色的界面功能清晰、高效简洁。

分散互补色

分散互补色是指寻找三种颜色，其中两种互为邻近色，另一种与它们形成互补色，例如绿色和红色、橙红。这种搭配既能保持互补色醒目的强烈对比及视觉上的趣味性，又能让颜色变得柔和。

优酷的品牌色为蓝色和红色，它们本身互为补色，其界面设计使用蓝色作为主色调，选择红色及橙色作为辅助色，分散互补色的界面醒目但不凌乱。

对立色

对立色是指寻找三种互相平衡的颜色，在色环上任意三个三角对立的颜色，使用其中一种颜色作为主色，其他两种颜色作烘托，这样才能在色彩间取得平衡，产生和谐效果。

36Kr的品牌色为蓝色，其界面设计延续了品牌色作为主色调，并选择三角对立色的红色和橙黄作为辅助色，使界面充满了科技感，在冷静之余又不失活力。