色彩规范

基本介绍

颜色是设计中最重要的元素，颜色的运用与搭配决定设计的品质感。在 UI 设计中，颜色的使用规范主要在于：品牌主色、文本颜色、界面颜色（背景色、线框色）等。

色彩的作用

👀 B 端产品中，颜色不仅仅用来传达品牌调性，更多的是用来传达以下信息：

反馈信息: 通过不同的颜色给予信息反馈，例如红色代表错误信息，绿色代表成功信息。

突出层级: 通过色彩可以对内容信息进行分层级展示，提高用户读取信息的效率。

表明状态: 通过颜色来区分某个事物处于何种状态。

组成

在真实的设计场景中，对色彩的复杂度要求是非常高的。色彩规范应该基本覆盖一套产品对用色的所有场景。

👀 一套完整的色彩规范，包括品牌主色、语义色、中性色。

品牌主色: 通常，一套产品只有一个品牌主色，是界面中出现最多的颜色，在需要用色强调而且没有其他要求时，一般都会选择主色，例如 tab的选中状 态，图表的颜色等。。

语义色: 即功能色，借助人们的对色彩的心理模型，帮助人高效获得信息。例如绿色代表通行、成功，红色代表禁止、错误，橙色代表警告、

中性色: 除文字外，中性色还被大量运用在分割线、边框、背景等场景中。

色彩系统的原则

理性的：我们在选色时，尽可能避免个人的设计风格，减少配色的主观性，理性有逻辑地选色。

可扩展的：使用这种选色方法可以扩展生成更多的颜色，以适应不同的变化。

和谐的：色彩规范中的颜色互相搭配使用时，应该是和谐的。

如何制作色彩规范？

在开始制作色彩规范之前，先介绍一下 HCL 色彩空间。

HCL (Hue-Chroma-Luminance) 与 RGB、HSB 一样同属色彩空间的一种，因为最早由国际照明协会 CIE提出，又被称作 CIELch。

目前大家常用的色彩数值可视化的色彩空间是 HSB，设计师可以通过 H(色相)，S（饱和度，B（明度）三个数值来量化色彩，实现理性配色。

但是传统的 HSB 色彩空间的缺点是，明度数值是基于计算机元件而言，而非人眼。另外，计算机的明度与人眼感觉到的明度并非线性匹配，这就导致在不同颜色中，即使色相相同，我们感觉到的明度（即感官明度）也是不一致的。

而 HCL 就避免了这个缺点，在 HCL 中，只要两种颜色的 L 相同，感官明度就是相同的，HCL 可以完美的量化我们对色彩明度的感觉。但是目前主流的设计软件基本上不支持 HCL 色彩空间配色，因此要借助插件或者网站。这里推荐 Figma 的一个插件：HCL color。➡️ 传送门

落地

落地分为两个方面：设计方面和开发方面。

设计方面

将颜色生成样式库，并规定设计同事不可以手动调色，只可以从设计规范中取色。

开发方面

在前期与开发同事沟通，将每个颜色定义为一个变量，在代码中不使用具体的色值，而是例如 red-100 的的色值，这样做的好处是：

在需要替换某个色值时，只需要在底层对变量改变即可实现全局的更改，提高了很多效率。 开发同事完全从库中取色，保证了色彩的准确性，提高了设计稿的落地率。