配色，设计师的世纪难题。从平面到屏幕，CMYK 到 RGB，墨点到像素，色彩越来越丰富，形式越来越复杂。UI 的开展从拟物的繁琐细节中摆脱出来，却在色彩的展现中放飞了自我。

零卖业有个有趣的钻研成果 —— 「七秒钟定律」：人们在挑选商品和服务时 ，只需求 7 秒钟就能够断定是否感乐趣，而在这瞬间的 7 秒钟内，色彩的作用占到了 67%。

要在小小的手机屏幕中进入这么多颜色，并连结其中的联系和逻辑，实在不易。若你还对配色一无所知，完全不知道配色应该怎么入手，辣么你需求打听一下，我几年经验总结的配色思路。

拾色器中的黄金三分法

无论咱们用 PS、AI，还是 Sketch、XD、Figma，和色彩打交道至多的地方即是拾色器窗口，咱们来看看这些案例：

固然是不同的应用，但是这个拾色器的用法如出一辙，但是，许多新人并无搞懂拾色器的正确应用逻辑。

许多人知道，UI 的色彩使用 RGB 模式，但是拾色器要紧的选色道理遵循的是 HSB 模式的逻辑，也即是色相（H）、饱和度（S）、明度（B）。

HSB 是色彩科学中对全部颜色属性的表面划分，是种观点上的定义，能够用来注释任何色彩，也即是说能够和 RGB 和 CMYK 互相转化，且 HSB 的选色逻辑更清晰、简洁、精悍。

因为一个正确的选色过程，是先断定出色相，然后再在这个色相维度下选出明度和饱和度，因此咱们首先要关注色相选定条。

细心的同窗应该已经发现了，它们的首尾都是血色，那是因为色相的序列是一个首尾相接的环形模式，因此它现实上即是色环的柱状展示图，应用起来和色环没有现实差别。

接下来就要说到重点，饱和度和明度选定区，我自己使用的习气，是将这个选定区通过黄金三分法的方法切割成等比的 9 个区域，然后明白它们在 UI 中的对应感情和应用场景。

在以前的大量剖析中，互联网产物的主色和重要辅助色都会往右上角聚集，少许次要、不可点的色彩聚集在中上方，而笔墨背景色则聚集在左侧，无人区则是咱们重点避让的对象。

底下咱们剖析几个案例，看看它们在这个选定区中的色彩漫衍情况：

大家也能够自己拿少许合流的应用做截图，然后把它们的 UI 元素色彩分列到拾色面板中，就会得到根基一致的结果。牢记这9个区域的场景划分，能够赞助咱们很高效、平安地实现 UI 配色。

UI配色中的色彩选定

在浩繁的 UI 设计规范中，色彩片面的介绍，都势必包含三品种型，划分是：

• 主色：应用的焦点色彩，品牌色
• 辅色：丰富页面视觉和转达效果的次要颜色
• 中性：没有色相的笔墨、背景用色

1. 主色的选定

主色是一个应用的最焦点的色彩，品牌的象征色，好比想到饿了么的蓝色、微信的绿色、京东的血色、淘宝的橙色。

断定主色，并无大家想象的辣么复杂，它的要点在于——你想让用户感觉到类感情，然后通过感情关联一个大致的色彩局限，再进行微调。

在今天的互联网产物中，主色的应用选定局限在拾色器区域的右上角，前方已经有注释了。这和平面设计中的用色有很大的不同。

挪动端产物要在一个方寸大的空间中争夺用户的注意力，引起用户的乐趣，辣么低饱和平淡的色调是无法实现这个指标的，因此今天主色饱和度越来越极致，好比咱们之前整理的一篇总结：

为何支付宝要换 Logo 颜色？剖析下目前 Logo 的主色趋向

再加上屏幕的 RGB 表现特征，高比拟度，高动静局限的特质能给用户提供更好的观感。因此选定主色最平安的做法，即是在断定色相范例后，在右上方区域选出适宜的色值。

2. 辅助色的选定

辅助色是丰富应用中的次要色彩，它会包含一到几何个和主色不同的色彩，除了品牌转达外，具备更强的实用性。

前方咱们提到过色环，这里就要派上用场了。咱们知道色环是个色彩序列首尾相连的环形模型，它蕴含一个最质朴的准则，即两个颜色在这个环形中角度越大，辣么视觉迥异性越大，比拟越强，好比下图的展示：

这些配色的模式是不能够闭着眼随便挑的，它们仅仅作为一个色彩比拟度的校验规范。而真正辅助色的选定，是凭据现实场景的功效决意的。

好比通知、提醒、作废用大血色，确认、和议用绿色大概蓝色，收藏、打分、评价用橙黄色。都是已经在用户心智中建立了规范的用色范例，跟着通例技巧来做，是没有别的思路的情况下最简单、最平安的辅助色选定方法。

没有规范元素用色的情况下，再思量应用色环的 「角度准则」，越需求被突出的颜色，能够在色环中离主色越远，越不需求被突出的则越近。

好比下方携程的案例，主色在蓝色的情况下，支付、保险金标签这些需求被重点突出的色彩，使用了主色的互补色， 让咱们一眼就能瞥见并产生猛烈的操纵愿望。

3. 中性色的选定

中性色，是页面中笔墨、背景用到的颜色，它们负担起最根基的层次阐扬、便于阅读的重担。多数小白觉得中性色无关紧要，现实情况凑巧相反。

主色辅助色决意了界面视觉是否出彩，而中性色的应用直接决意了页面能不能够正常使用。若看过相对多的原型案例，就应该清楚，即便惟有黑白灰的状况下，咱们明白这些页面和进行使用也不会有丝毫的障碍。

中性色的配置，即是订定一个由深到浅的灰度阶梯，应用在对应权重的元素上，色彩轻重的要紧校验依据是 HSB 中的 B（明度） 值。

中性色固然指的是无个性，但并不是只能用纯灰色，多见的一种做法，即是为中性色增加适量的蓝色饱和度，提升观看体验（满足RGB的某种特征）。

这种做法，颜色越浅的时分饱和度应用色值就越低，将这个规则在拾色器中进行阐扬，辣么咱们就能够得到一个 L 型曲线，我称它为 「中性曲线」。

掌握对于主色、辅助色、中性色的选定技巧，辣么对于UI配色的奥义来说，你已经掌握了一半，接下来就要打听更详细的现实思路了。

配色方法的四象限

配色并不是惟有色彩的色值自己，大家一直在钻研种种色彩生理学和表面，却很少体贴它们怎样应用，怎样配置。

因此，我凭据主色和辅助色应用总结了一个配色的四象限表格，再划分看看它们对应的案例：

1. 主色占比大，色彩丰富度高

主色会作为顶部标题栏或别的重要模块中的背景色，进行大面积应用，加深用户对品牌的认知和辨识度。而产物中又包含了大量功效和服务，需求用丰富的色彩来进行暗示，吸引用户关注。

2. 主色占比大，色彩丰富度低

这类配色中，主色的应用占比也大，出现频率高，鲜有别的颜色出现。相对适用于图片内容丰富的题材中，大概是相对正式、品牌感强的应用。

3. 主色占比小，色彩丰富度高

这是多数合流应用的趋向，低落主色占比，留出更多的空间给内容模块的展示上，突出自己带有的服务和功效。

4. 主色占比小，色彩丰富度低

通常，会应用这种方法是因为产物的服务是相对单一，但也需求用户投入注意力的应用，设计师就会尽力以免赐与用户过量的搅扰。

每次在进行配色的时分，咱们都需求对自己要应用类配色应用方法做出计划，然后再着手实行。有了这个指标，后面在整个项目的设计中的配色步骤即是水到渠成的事情了。

配色流程演示

在现实前，咱们要简单讲讲一个应用大概界面的规范配色的流程了，流程顺序以下：

详细应该怎么使用这套流程，咱们用一个图虫APP改版的案例来做演示，首先从四象限中的第一个主色占比高、色彩丰富度高的范例做起。

1. 配色流程演示

原型是 UI 设计的根基艺能了，在首先详细设计、配色前，搭建页面的框架原型是一个必备的条件，底下，是咱们已经筹办好的原型案例。

然后，咱们断定以橙色作为应用主色，并在拾色器中进行确认。

有了主色，就能够对页面进行色彩添补和图片添补了。既然咱们主色是占比大的，辣么首先能够用到的即是顶部标题栏的背景色了，以及底部 Tabbar 中的选中色，大按钮色等。

接着，咱们首先整理中性色的使用，选定新的颜色来添补笔墨和背景，清晰的阐扬模块层级，笔墨消息的权重。

最后，即是增加辅助色和别的色彩的元素了，这个步骤建议都是放在最后一步操纵。因为色彩越丰富，越难控制，容易让整个画面显得杂乱无序，因此先实现基础搭建，能够更好的赞助咱们校验彩色的使用是否合理。

底下，咱们使用彩色的金刚区图标，然后将用户关注、认证用户、标签等元素使用别的色彩，来丰富页面的色彩内容。

2. 别的配色范例应用

凭据第一个方案，咱们能够再用这个原型来实现别的的三个方案的配色。

好比底下的主色占比大，但是色彩丰富度低的。因为已经不太适用别的辅助色，因此主色添补上咱们不再添补顶部导航栏的背景，而是将更多元素应用主色，削减辅助色数目。

然后是主色占比小，色彩丰富度高的方案，进一步低落主色应用的比例，然后在金刚区、标签等处使用较为丰富的配色。

最后，即是主色占比小，色彩丰富性也低的方案，辣么使用中性色的元素就首先增加，只保留最焦点的少许元素使用主色，和极少的辅助色。

凭据四种不同的配色方案，咱们就能够得到四种不同的配色结果和风格，在每次设计首先实施前，咱们都能够凭据这种做法来做尝试，并选出自己写意的方案。

要再次夸大，UI 配色是极端夸大形式的应用科学，最后做的往往会和一首先想的效果有极大收支，因此需求咱们有几个备选方案，能够随时进行调整，并选出合理的那个。