UI界面配色方法终极指南！一篇长文搞定所有问题

静Design · 公众号 · 设计 · 2022-04-14 12:26

正文

静电说：要培养对颜色的敏感度，你必须要了解色彩的原理。在这个基础上去感悟，久而久之，色彩会在你手中变的游刃有余。下面这篇终极色彩指南非常值得一看~让我们不妨再系统梳理一下你的配色技巧吧！

颜色是一种高度刺激的视觉语言。该元素主要用于使用户在屏幕上进行操作或突出显示他们必须知道的信息。

即使是同一朵花，蓝花和红花所传达的感觉也是不一样的。它不仅传达一种情绪或细微差别，而且还用于传达信息。和红绿灯一样，绿色表示积极，黄色表示警告，红色表示禁止。

颜色像火一样。正确使用会给你想要的结果，但过度使用会毁了设计。在数字产品设计中，您需要帮助用户根据优先级快速采取行动，您需要非常小心地使用颜色。让我们找出它有什么属性可以很好地处理颜色之“火”。

颜色属性

要知道颜色是如何工作的，我们需要知道它们有什么属性。颜色具有三个属性。有区分独特颜色种类的色相（hue）、区分原色深浅的饱和度（saturation）、区分明暗的明度（Brightness）。这三个属性用于创建各种视觉效果。首先，形状主要以亮度构成，颜色根据元素的功能进行分类。一般来说，我倾向于使用黑白和一种强调色。有时不止一种颜色用于不同的功能但重要的信息。

颜色模型

在使用Sketch或 figma 时，您经常会看到这些名词。什么是 RGB，什么是 HEX？如何在数字环境中表达颜色？设计中使用的颜色，电脑处理的颜色，显示器显示的颜色，都因规格而异。色彩空间是指用于管理在此数字环境中表达的色彩的标准。在数码产品中，颜色主要是RGB、HSL、HSB等，工作时主要使用HEX和RGB。

RGBA（红、绿、蓝、透明度）：这是一种通过将光红、绿、蓝三基色与表示透明度相结合来表现各种颜色的基本方法。

HSV/HSB（色相、饱和度、值或亮度）：这是一种直观且易于处理的颜色属性）。

HEX：从RGB转换为十六进制的代码，与其他元素相比具有可以一次复制粘贴的优点，是一种通用的颜色值，在各种环境中都易于输入。

所有程序都使用 HSB 来选择颜色并使用 Hex 显示它们。当您想使颜色变暗时，在设计时要方便得多，因为当您看到 HSB 的情况时，HSB 可以更直观地处理颜色属性，您可以减少 B 而不是通过混合红色、绿色和蓝色来变暗的 RGBA。但是在开发的时候，每个属性打个逗号打个逗号比较麻烦，所以我倾向于使用HEX，打码最少，容易区分。

主色和辅色

我倾向于严格和限制性地使用颜色，因为在数字产品 UI 中滥用颜色会干扰内容导航。我们定义了颜色层次结构来管理标准。服务中使用的颜色服务基本使用原色、二次色和黑白（Black, White）。根据服务的性质，我们可能会决定更多不同的颜色组合。服务中使用的原色在很大程度上遵循品牌的图形惯例。

主色：需要颜色的最常用的颜色

辅色：使用主色时使用的颜色，需要与其他元素区分开来。

黑白：主要用于背景和文字，最亮和最暗的颜色

颜色层级（重要性）

既然已经决定了产品中要使用的颜色类型，在页面上使用颜色时，请遵循信息的重要性。基本骨架由黑色和白色组成，使用主和辅色强调功能或必须知道的信息等重要元素。在这种情况下，当认知或行为是特殊情况下的重要因素时，与其他信息不同，使用适合含义的颜色。它突出了重要的最终行为要素和必须验证的信息。

色彩占比

在决定使用哪些颜色之后，您需要决定使用什么比例。由于颜色是一种强烈的刺激物，因此您应该通过对所有元素使用颜色来避免眼睛疲劳。最舒适和可接受的比例可以利用室内使用的 60-30-10 规则。背景颜色使用 60% 和 30% 分配，10% 分配给要强调的元素或面向文本的服务。考虑总量分配背景色后，在10%以内一点一点地添加点色来调整颜色比例。

正如室内空间设计因目的而变化一样，色彩匹配也适用于空间。

对比

如果颜色模糊，眼睛需要集中注意力才能看到细微差别，因此最好使对比度尽可能强。如果你处于必须模糊区分颜色的情况下，你需要考虑元素是否真的足以通过颜色来区分它们。如果您决定以不同的方式表达一种颜色，则需要提供足够的对比度以使该颜色与其他颜色明显区分开来。考虑背景颜色和与其他元素的相对关系调整颜色。颜色对比度遵循WCAG划分的等级，主要以AA级为标准。

A（最少）——3:1

AA - 4.5:1

AAA — 7:1