10年经验的资深设计师，总结了这份 UI 配色终极奥义

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

零售业有一个有趣的研究成果 —— 「七秒钟定律」：在选择商品和服务时，人们在选择商品和服务时 ，只需要 7 你可以在几秒钟内确定你是否感兴趣，在这个短暂的时间内 7 在几秒钟内，颜色的作用占据了 67%。

在小手机屏幕上添加这么多颜色并保持联系和逻辑并不容易。如果你仍然对颜色匹配一无所知，不知道如何开始颜色匹配，那么你需要了解我几年经验总结的颜色匹配想法。

拾色器中的黄金三分法

无论我们用 PS、AI，还是 Sketch、XD、Figma，与色彩打交道最多的地方是拾色器窗，让我们来看看这些案例：

虽然是不同的应用，但这种拾色器的用法是相似的，但是很多新人并没有理解拾色器的正确应用逻辑。

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

HSB 它是颜色科学中对所有颜色属性的理论划分，是一种概念定义，可以用来解释任何颜色，也就是说，可以和解 RGB 和 CMYK 相互转换，并且 HSB 选色逻辑更清晰、简洁、干练。

因为正确的选色过程是先确定优秀的色相，然后在这个色相维度下选择亮度和饱和度，所以首先要注意色相的选择条。

细心的学生应该已经发现他们的头和尾都是红色的。这是因为色调序列是一个从头到尾连接的环形模式，所以它实际上是色环的柱状显示图。它的应用与色环没有实际区别。

接下来，我将讨论关键点、饱和度和明度选择区。我自己的习惯是通过黄金三分法将这个选择区切割成等比 9 一个区域，然后明确它们在哪里 UI 对应的情绪和应用场景。

在过去的大量分析中，互联网产品的主要颜色和重要的辅助颜色聚集在右上角，一些次要和不可预测的颜色聚集在中间和上面，而文本背景颜色聚集在左边，无人区域是我们避免的关键对象。

下面我们分析几个案例，看看它们在这个选择区的颜色分布:

你也可以把一些主流应用程序作为截图，然后把它们作为截图 UI 当元素颜色排列在彩色面板中时，会得到基本相同的结果。记住这九个区域的场景划分可以帮助我们非常高效和安全地完成它 UI 配色。

UI配色中的颜色选择

在众多的 UI 在设计规范中，色彩部分的介绍必须包括三种类型，即：

1. 主色的选择

主色是应用的核心色，是品牌的象征色，比如饿了么的蓝色，微信的绿色，JD.COM的红色，淘宝的橙色。

确定主色并不像你想象的那么复杂。关键是你想让用户感受到什么样的情绪，然后通过情绪关联一般的颜色范围，然后进行微调。

在今天的互联网产品中，主色的应用范围已经在拾色器区域的右上角解释过了。这与平面设计中的颜色非常不同。

移动产品应该在一个大的空间里争夺用户的注意力，吸引用户的兴趣，所以低饱和度和浅色调不能实现这个目标，所以今天的主色饱和度越来越极端，比如我们之前的总结：

支付宝为什么要换？ Logo 颜色？现在分析一下 Logo 的主色趋势

再加上屏幕 RGB 显示特性、高对比度和高动态范围的特性可以为用户提供更好的印象。因此，选择主色最安全的方法是在确定色相类型后，在右上角区域选择合适的色值。

2. 辅助色的选择

辅助颜色是丰富应用中的次要颜色，它将包含一到几种不同于主色的颜色，除了品牌传播外，还具有更强的实用性。

正如我们前面提到的，色环将在这里派上用场。我们知道色环是一个连接颜色序列的环形模型。它包含了最简单的原则之一，即两种颜色在这个环中的角度越大，视觉差异越大，对比度越强，如下图所示：

这些配色方式不能闭着眼睛随意选择，只能作为判断颜色对比度的标准。真正辅助颜色的选择取决于实际场景的功能。

例如，通知、提醒、取消大红色、确认和同意使用绿色或蓝色、收集、评分和评估橙色。它们都是用户心目中建立的标准颜色类型。遵循传统方法是最简单、最安全的辅助颜色选择方法，没有其他想法。

在没有标准元素颜色的情况下，再考虑色环的应用 「角度原则」，颜色越突出，在色环中离主色越远，越不需要突出就越近。

例如，在下面的携程案例中，主色在蓝色的情况下，支付、保险金标签等需要突出的颜色，使用主色的互补色， 让我们一眼就能看到并产生强烈的操作欲望。

3. 选择中性色

中性色是页面中文本和背景中使用的颜色。它们承担着最基本的层次表达和易于阅读的责任。大多数新手认为中性色无关紧要，但实际情况恰恰相反。

主色辅助色决定了界面视觉是否辉煌，而中性色的应用直接决定了页面是否能正常使用。如果我们看到更多的原型案例，我们应该明白，即使只有黑色、白色和灰色，我们理解这些页面并使用它们也不会有任何障碍。

中性色的配置是制定一个由深到浅的灰度阶梯，应用于相应重量的元素。判断颜色重量的主要依据是 HSB 中的 B（明度） 值。

虽然中性色指的是无个性，但它不仅仅是纯灰色。常见的做法是为中性色增加适量的蓝色饱和度，提高观看体验（满足RGB的某些特点）。

在这种做法中，颜色越浅，饱和度应用的颜色值就越低。如果这个规律在拾色器中表现出来，我们可以得到一个 L 类型曲线，我称之为 「中性曲线」。

掌握主色、辅色、中性色的选择方法，那么对于UI配色的意义，你已经掌握了一半，接下来你需要了解更具体的实践思路。

四象限的配色方法

配色不仅仅是颜色本身的价值，每个人都在研究各种颜色心理学和理论，但很少关心它们是如何应用的，如何配置。

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

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

主色将作为顶部标题栏或其他重要模块的背景色进行大面积应用，以加深用户对品牌的认知和认知。该产品还包含了大量的功能和服务，需要使用丰富的颜色来暗示和吸引用户的注意。

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

在这种配色中，主色的应用比例也很大，出现频率高，其他颜色很少出现。更适合图片内容丰富的主题，或相对正式、品牌意识强的应用。

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

这是大多数主流应用的趋势，降低了主色比例，为内容模块的展示留出了更多的空间，突出了自己的服务和功能。

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

通常，由于产品的服务相对单一，但也需要用户注意，设计师会尽量避免给用户太多的干扰。

每次我们进行配色时，我们都需要规划我们想要应用哪种配色应用，然后开始实施。有了这个目标，整个项目设计中的配色步骤是很自然的。

配色过程演示

在实践之前，我们将简要介绍应用程序或界面的标准配色过程。流程顺序如下：

如何使用这个过程，我们用图虫APP修改的案例来演示。首先，我们从四象限中第一个主色比例高、色彩丰富度高的类型入手。

1. 配色过程演示

原型是 UI 设计的基本艺术能力，在开始具体的设计、颜色匹配之前，建立页面框架原型是一个必要的条件，以下是我们准备的原型案例。

然后，我们决定将橙色作为应用程序的主色，并在拾色器中确认。

有了主色，你可以填充页面的颜色和图片。由于我们的主色比例很大，所以首先可以使用的是顶部标题栏的背景色，以及底部 Tabbar 选择颜色，大按钮颜色等。

然后，我们开始整理中性色的使用，选择新的颜色来填充文本和背景，清楚地显示模块级别和文本信息的权重。

最后，添加辅助颜色和其他颜色元素。建议将此步骤放在最后一步。因为颜色越丰富，控制就越困难，整个画面很容易显得凌乱，所以首先完成基础设施可以更好地帮助我们判断颜色的使用是否合理。

接下来，我们使用彩色金刚区图标，然后使用其他颜色来丰富页面的颜色内容，如用户关注、认证用户、标签等元素。

2. 其它配色类型的应用

根据第一个方案，我们可以使用这个原型来实现其他三个方案的配色。

例如，以下主要颜色占很大比例，但颜色丰富度较低。由于其他辅助颜色不再适用，我们不再填充顶部导航栏的背景，而是应用更多的元素来减少辅助颜色的数量。

然后是主色比例小、色彩丰富度高的方案，进一步降低主色应用比例，然后在金刚区、标签等场所使用更丰富的配色方案。

最后，主色比例小，色彩丰富度低的方案开始增加中性色元素的使用，只保留一些核心元素使用主色，辅助色很少。

根据四种不同的配色方案，我们可以得到四种不同的配色结果和风格。在每次设计实施之前，我们可以尝试这种方法，并选择我们满意的方案。

再次强调，UI 配色是一门极其强调形式的应用科学，最终的做法往往与我们一开始认为的效果大不相同。因此，我们需要有几个替代方案可以随时调整和选择合理的方案。

总结

以上是我们关于配色知识点的分享，希望对大家有所帮助 UI 对配色的理解。

更多配色方法：

欢迎关注作者微信微信官方账号:「超人电话亭」