UI必学基础！用最直白易懂的方法讲配色！

 

 

如今，受国内激烈的市场竞争的限制，C 为了争夺用户的注意力，终端产品的界面设计越来越复杂，颜色也越来越丰富（花哨）。极简主义风格只存在于少数头部产品和工具产品中。

这种氛围会传递到招聘要求，即对作品集的审视，往往更注重能够驾驭复杂视觉风格的作品，而不是极简风格。

因此，除了界面设计中界面和组件框架风格的设计创新外，最重要的是界面颜色匹配的管理和性能。颜色匹配作为所有设计类型的最终问题之一，长期困扰着主要问题 UI 设计师。

因此，我们今天的主题是用最简单和适用的逻辑来解释 UI 配色方法！

一、对色彩选择模式的理解

要学会配色，首先要了解颜色和 UI 什么“色彩”应该搭配在设计上。

首先是对颜色的描述，我相信你或多或少听说过 RGB、CMYK 其他名词，它们是不同场景下的颜色描述方法。

例如，显示器成像是由不同颜色的像素点组成的，而像素点的颜色由三个发光晶体管控制，即 Red 红、Green 绿、Blue 蓝色，它们发出不同强度的光来混合，从而在新像素点上形成最终显示的颜色，因此也被称为 RGB 色。

对于现实世界中物体的染色和印刷，有必要使用特定的颜料进行着色。为了节省成本，工业界不可能提供数百万种颜料类型，因此使用它们 Cyan 青色、Magenta 洋红色、Yellow 三种黄色作为混合的基础，产生其他颜色。因为 Black 黑色和灰色很难与其他颜色混合，所以它们是单独提供的，所以有 CMYK 色。

在 UI 在设计中，我们的设计内容不需要打印，所以只会被打印出来 RGB 但是模式记录和显示。 RGB 色彩记录模式比较复杂，即每个色值都有 0-255 的 256 这三个值分别记录在一个颜色中，混合后的颜色很难判断。

所以虽然 UI 中用的是 RGB，但是我们每天使用的颜色选择 HSB 模式，即将颜色划分为色相 Hue、饱和度 Saturation、明度 Brightnessd。它是对颜色逻辑的定义，将根据应用程序的需要转化为 RGB 和 CMYK，所以不要担心它不是 RGB 不能显示怎么办。

而多数 UI 软件的颜色选择面板，即使用 HSB 根据颜色选择逻辑设计，有一个横向色相条和一个矩形区域，表示明度和饱和度。

虽然色相条是长方形，但使用后应该会发现它的头尾是红色的，因为 HSB 在模式下建立的色相是一个 360 度的环形，也叫色环。用于选色面板的色相条，就是这个色环截开拉直后的效果，所以首尾颜色相同。

使用 HSB 选色的逻辑 —— 首先确定色相，然后调整饱和度和亮度。

如果饱和度 S 如果值为零，则没有颜色相，只留下黑、白、灰，即中性色。亮度 B 值控制亮度，0 也就是说，黑色完全没有亮度，100 最亮的是白色，也就是颜色越深，颜色越深 B 值越小，B 颜色越大，颜色越亮。

学会使用 HSB 颜色选择和微调是颜色匹配的关键，因为专业的设计过程将有明确的颜色应用理念，将直接通过颜色面板找到他们想要的颜色，甚至直接手动输入值，而不是拖动颜色面板作为盲盒进行测试。

在 UI 在设计过程中，如果默认情况下软件的颜色面板是其他模式，则优先将其切换为 HSB （有些是 HEX）模式。

二、UI 了解界面的颜色类型

理解选色模式是第一步，第二步是理解 UI 界面中使用的颜色类型是什么，为进一步掌握配色做准备。

在过去，我们将界面配色分为三种类型：主色、辅助色和中性色，但这次我们必须做出新的定义来满足当前的需求 UI 需要设计趋势。

UI 界面中使用的颜色可分为四类：品牌色、功能色、中性色、装饰色、内容色等。

1. 品牌色

品牌色彩是产品品牌基调和个性的核心色彩，用于区分自身与其他产品的区别。品牌颜色不仅是一种，而且包括主色和辅助色。

首先，品牌的主色调是品牌的核心色调，是与品牌绑定的色彩锚点。例如，美团是黄色的，肯德基是红色的，星巴克是绿色的。传统品牌只有一种主色调。

另一方面，辅助色是建立在品牌色彩体系中的主色调。例如，麦当劳的核心主色调是黄色（LOGO 颜色，“金色”拱门)，但我相信你一定熟悉麦当劳的红色，它们经常出现在一起。另一个例子是沃尔玛，虽然主色是蓝色，但黄色在品牌产品和包装中并不少用。

只有一种或多种辅助颜色可以作为补充，比使用单一的主色更容易识别和丰富。但这并不是必要的，因为在 UI 界面中的颜色往往很多，品牌辅助颜色的加入往往会使配色变得更加困难，反而成为拖累。

2. 功能色

功能色是指根据界面传达信息和隐喻使用的颜色，具有相对清晰的工具功能。在某些情况下，当用户对颜色代表的意义有根深蒂固的理解时，我们需要遵循这种理解来添加颜色。

例如，电子商务中的红色代表价格和折扣，工具产品中的绿色代表成功通过，国内金融产品中的红色代表上升，绿色代表下降，货币圈行业中的绿色代表上升，红色代表下降。

功能颜色的应用是必要的，因为颜色也是传递信息的关键因素之一。然而，功能颜色并不一定与品牌颜色完全脱节。如果品牌颜色接近所需的功能颜色，它通常可以直接使用品牌颜色，而无需创建新的颜色。

例如，京东的价格和折扣是品牌主色，支付宝的确认和同意也是品牌主色。

3. 中性色

中性色是黑、白、灰，即没有颜色的“颜色”。

无论一个项目有多花哨，它都会包含背景、文本和图标，不需要使用花哨的颜色，通常它们在整个应用程序中所占的比例是最大的，而不是品牌颜色！

中性色是支持整个产品颜色系统的骨架。使用中性色可以让界面被用户快速理解和理解。因此，在一些品牌颜色是黑色的产品中，用户不知道如何使用它们，因为产品没有使用其他颜色。

4. 装饰色

上述三种颜色类型是进入项目设计规范中的“标准颜色”，这些标准颜色不能满足所有场景。

例如，一些特定的活动页面，或装饰图标、操作场景等，将根据具体需要或美观应用其他颜色。

装饰颜色的配置没有非常具体的要求，在一定程度上是脱离原标准，作为一个独立的设计来完成。因此，许多大型工厂产品在不同的页面上有不同的操作需求，所以装饰颜色使用不同的颜色，导致最终的结果非常分离。

装饰色彩是当今移动终端设计中最大的问题，因为我们需要添加大量的新颜色，这将与标准颜色发生冲突。虽然许多在线产品的颜色匹配都有放弃治疗的决定，但这些要求在招聘过程中的颜色应用都很热（如此分裂）！

5. 内容色

最后一个是内容颜色，即产品中显示的内容所使用的颜色，如用户照片、商品图片、广告图片等。

在某种程度上，内容使用的颜色是无法控制的，而不是在颜色匹配的考虑范围内。然而，对于一些特定的产品，内容的颜色是确定的，甚至直接规范内容制作、拍摄和以后的颜色规范，使整体颜色匹配更加统一和谐。

例如美妆、服装、茶饮品牌自己的应用或小程序：

此外，在收藏项目和评估中，设计师自己的输出界面也应考虑内容颜色，因为内容往往占页面的很大比例，颜色的质量将直接影响观众对整个页面的评估，所以我们必须把它作为颜色匹配的一部分。

例如，我们前段时间分享的案例：

配色是为了完成上述五种颜色类型的选择、控制和管理，形成最终的效果。

结尾

今天的分享到此为止。时间有限，一口气写不完。下一篇文章将继续介绍配色方法和案例演示。

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