首页 > SEO动态 > 网站技术如何制作系统级颜色色卡?从理论到实践全解析!

如何制作系统级颜色色卡?从理论到实践全解析!

2024-01-19 07:35:45

如何制作系统级颜色色卡?从理论到实践全解析!

简单是最高级的复杂

配色系统是设计系统的核心元素,创建配色系统的方法有很多种。例如,根据谷歌 Material Design 3 指南,一个设计系统必须具有主色、次要色、三级色和表面色(各种背景色)调色板,这将迫使你使用超过 40 种颜色。这么多的颜色会导致混乱,在设计过程中的会有干扰,大多数颜色甚至不会被使用。

设计系统是公司的核心产品,其用户是设计、开发和创意团队。因此,设计系统必须为所有人理解,为团队使用,为测试提供错误检查,并为公司盈利。我一直在努力实现这些目标,并因此改进了一种提供这些功能的配色系统。

这种配色系统:

  1. 提供更少、更有限的(总共 19 种)颜色选项,减少设计团队的决策过程。
  2. 为开发团队方便、一致地开发产品而减少问题数量。
  3. 简化设计运营管理并降低组织范围内的沟通成本。
  4. 缩短交付流程,减少 bug 修复和预算成本。
  5. 使用品牌色单色化整个界面。
  6. 同时涵盖浅色和深色模式,避免出现额外的深色主题调色板和变量。
  7. 通过更改 HSB 值轻松修改和适应新项目。

要创建一个具备上述特性的配色系统,需要对色彩和 Figma 的实现有一定的专业知识。我这里提供一份 figma 配色文件作为参考: https://www.figma.com/community/file/1298331226357565644

一、什么是 HSB 色彩空间?

从本质上讲,RGB 色彩空间中有 16,777,216 种颜色,每种颜色都有唯一的十六进制代码,对于我们设计师来说不太容易理解。如果想要在不使用配色生成器的情况下生成独立的配色系统,那么最易于理解和编辑的表示方法就是 HSB 色彩空间。它依赖于 360° 的色轮:

如何制作系统级颜色色卡?从理论到实践全解析!

色轮与色相值的相互关系图示

色相(Hue)+ 饱和度(Saturation)+亮度(Brightness)=HSB

HSB 色彩空间有三个影响十六进制代码的值:色相(Hue)、饱和度(Saturation)和亮度(Brightness)

  1. 色相: 色相 (Hue) 定义了颜色的类别,取值范围为 0° 到 360°,每 60° 为一个主色。H:0/360 代表红色,H:60 代表黄色,H:120 代表绿色,H:180 代表青色,H:240 代表蓝色,H:300 代表洋红色。
  2. 饱和度: 饱和度 (Saturation) 影响颜色的鲜艳程度,取值范围为 0 到 100,数值越高,颜色越鲜艳。S:0-33,极淡,接近白色;S:33-66,淡雅,介于浅色和鲜艳之间;S:66-100,饱和,鲜艳。
  3. 亮度: 亮度 (Brightness) 影响颜色的明暗程度,取值范围为 0 到 100,数值越高,颜色越亮。B:0-33,极暗,接近黑色;B:33-66,中度亮度,介于暗色和亮色之间;B:66-100,高亮,明亮。

要生成十六进制颜色代码,必须为这三个输入值(色相、饱和度、亮度)都指定一个数值。例如,只要 H(色相)值保持为 228,无论 S(饱和度)和 B(亮度)如何变化,都只会呈现不同色调的蓝色。

如何制作系统级颜色色卡?从理论到实践全解析!

融合 H(色相)、S(饱和度)和 B(亮度)三个层面,可以生成色相值为 228 的各种色调。

二、创建基于 HSB 的色板

用这种方法创建的配色系统将在浅色和深色模式下都完全可访问。为了实现这一点,主色必须是可访问的,并且必须预先定义所需的颜色数量。

1. 定义一个可访问的主色

主色与背景必须形成至少 4.5:1 的对比度才能构建可访问的配色系统。因此,在定义主色之前,我们需要了解“可访问的”配色系统究竟需要满足哪些要求。

人眼有三种类型的视锥细胞,S-M-L,用于感知不同的光波长度。M 和 L 锥细胞同时对相同波长的绿色和黄色产生反应,导致人眼感知到 20°-200°色调值之间的颜色更亮,并且这个区域与明亮颜色的对比度较低。(Ps:从人的身体条件出发,是一个相对客观的因素,比较有说服力。)

基于上述信息,只要配色系统满足以下 HSB 值要求,就有可能在浅色模式下达到最大程度的可访问性:

  1. 色相值在 200°-20°之间(不是 20°-200°)
  2. 饱和度介于 50–100之间
  3. 明度介于 50–100之间

深色模式专属的配色系统可以使用与浅色模式相反的 H 值。H 值是影响可访问性的核心参数。饱和度和亮度成反比,高亮度会增加对比度,而低饱和度会降低对比度。你可以预先设置一个可访问的主色来作为基础。

从理论和实践角度考量,这里的主色被定为 H:228 比较合适。

如何制作系统级颜色色卡?从理论到实践全解析!

某些颜色的波长范围,特别是那些偏蓝和绿的区域 (约 400-480 纳米和 580-700 纳米),与亮色及其在色轮上的位置对比度足够,近似于色相 (H) 值 200° 到 20° 的颜色。

2. 定义锚点

在设计个人项目时,你可以考虑使用 19 种颜色的配色系统,包括一个主色、8 种浅色调和 8 种深色调。了解锚点颜色后,就可以轻松计算其余颜色的色调。

设计系统中的基础颜色,白色 [#FFFFFF] 和黑色 [#000000],它们是配色方案中不可定制的锚点,在进行色彩分级时不计入其中。

可定制的锚点位于配色方案的第 2 步、第 9 步(主色)和第 18 步。首先从主色开始,将其值设置为 H:228、S:76 和 B:92,以确保可访问性。为了在主色与其浅色调、纯黑色和纯白色之间留有足够的色彩间隙,建议将浅色调的值设置得更接近纯白色,深色调的值设置得更接近纯黑色。(注:末尾这 2 个颜色,可以根据自己的项目具体情况来设计具体色值)

如何制作系统级颜色色卡?从理论到实践全解析!

可定制和不可定制的锚的方案

3. 插值

在这个步骤中,我们将计算一些中间颜色,它们介于最浅的淡色调和主色之间,以及主色和最暗的深色调之间。这些中间颜色的饱和度 (S) 和亮度 (B) 会根据一定的规律进行微调。

从主色开始的步骤中,S 和 B 值必须根据外部颜色的值进行增加或减少。浅色调、主色和深色调之间 S 和 B 值的差异会被平均分配到色彩梯度中。

这个公式必须用于插值:

([较大值]-[较小值])/[梯度数]=[每一步的值]

公式具体怎么用?下面给一个例子:

①插值饱和度

在这个配色方案中,主色具有 76% 的饱和度,浅色调的饱和度降低到 4%,而深色调的饱和度则增加到 60%。规定从主色到浅色调和深色调的过渡是通过 8 个梯度实现的。

  1. (76–4)/8=9 。为了从主色逐渐过渡到浅色调,需要在每一步的 S 值中减去 9
  2. (76–60)/8=2 为了从主色逐渐过渡到深色调,需要在每一步的 S 值中减去 2

②插值亮度

在这个配色方案中,浅色调的亮度最高,为 100%,主色则略暗一些,为 92%,而深色调的亮度最低,仅为 12%。规定从主色到浅色调和深色调的过渡是通过 8 个梯度实现的。

  1. (100–92)/8=1 为了从主色逐渐过渡到浅色调,需要在每一步的 B 值中增加 1
  2. (92–12)/8=10 为了从主色逐渐过渡到深色调,需要在每一步的 B 值中减去 10

在配色系统中,初始颜色值的分配可以根据需要灵活调整。你可以根据颜色渐变的平滑程度或突出某些特定的颜色,来决定分配数值的方式。

例如,你可以将数值分配得更均匀,以获得平滑的渐变效果;也可以将数值分配得更不均匀,以突出某些特定的颜色。此外,你还可以添加锚点来控制渐变的过渡方式,使渐变在特定位置产生明显变化。(Ps:具体颜色可根据项目动态调整,颜色并不是死的)

如何制作系统级颜色色卡?从理论到实践全解析!

S 和 B 值插值表

4. 透明度变化

透明颜色是设计系统中不可或缺的元素,用于为文本和组件状态提供层级结构。

为了获得透明颜色,请复制第一个和最后一个色阶颜色,并将不透明度值降低到 64% 和 32%。

可以根据需求添加 16%、8% 和 4% 不透明度的额外透明版本,并可以自定义这些值。

如何制作系统级颜色色卡?从理论到实践全解析!

明确的和可能的透明颜色的呈现

5. 根据主题搭配颜色和阴影

配对颜色可以使主题和组件状态的颜色搭配更加协调,并方便在明暗模式之间切换。因此,配色系统通常采用奇数个颜色,每边都有自己的配对。这样,就可以同时为明亮主题提供深色调,为暗色主题提供浅色调。

如何制作系统级颜色色卡?从理论到实践全解析!

浅色和深色模式的颜色配对

6. 交叉检查可访问性

在为 Figma 变量和主题分配颜色时,应注意选择对比度高的颜色组合,以确保视力障碍人士也能清晰辨别。

由于主色对比度高达 5.39:1,因此整个调色板都符合无障碍标准。

在创建暗色主题组件时,可以使用覆盖明暗模式的 AA/AAA 级无障碍配色方案。在检查所有颜色组合时,如果发现任何无障碍性问题,可以尝试调整锚点和 S 和 B 值来解决。

如何制作系统级颜色色卡?从理论到实践全解析!

调色板的对比度方案

三、将调色板分配给 Figma 变量

调色板已正确生成,可以分配给 Figma 变量了。请按照以下步骤操作:

Figma 的变量很好用,在这里可以创建,如果还没用过的可以试试看

如何制作系统级颜色色卡?从理论到实践全解析!

1. 基本颜色:实色

创建一个集合,命名为“基础(Primitives)”。点击“创建变量 > 颜色”,并命名为“color/solid/0”。以同样的方式添加调色板中的所有颜色,将它们命名为 50 的倍数。

如何制作系统级颜色色卡?从理论到实践全解析!

基本颜色变量的分配

2. 基本颜色:透明度

再次点击“创建变量 > 颜色”,命名为“color/transparent/0 · 64%”,并以同样的方式添加其他颜色。

如何制作系统级颜色色卡?从理论到实践全解析!

透明颜色变量的分配

3. 颜色 Tokens

为了将基本颜色用作有限变量,必须将它们分配给 Tokens。

请按照创建颜色变量的方式进行操作:点击“颜色选择器(color picker ) > 库(libraries)”,并在列表中选择所需的变量。

点击右侧的“+”按钮,添加新模式,并将它们命名为“Light Mode(明亮模式)”和“Dark Mode(暗色模式)”。

如何制作系统级颜色色卡?从理论到实践全解析!

颜色模式按容器分配

4. 描边 Tokens

以同样的方式赋值变量,可以根据需要进行增加。

如何制作系统级颜色色卡?从理论到实践全解析!

5. 文本 Tokens

透明颜色用于文本标记,以在排版中创建层次结构。

如何制作系统级颜色色卡?从理论到实践全解析!

6. 按钮 Tokens

一个设计系统通常有三个版本的按钮:主要,色调-次要和轮廓-次要。颜色搭配和对比度方案被利用,同时适应黑暗模式的重要组件,如按钮。

如何制作系统级颜色色卡?从理论到实践全解析!

7.  颜色显示筛选

Figma 最近发布了一项名为“颜色范围控制”(Color scoping)的功能,它允许你根据未选择的属性来隐藏部分变量,从而避免显示所有变量。

我们建立的变量系统完全依赖于以下结构:容器(containers)、文本(texts)和描边(strokes)。这些设置可以根据你的项目需求进行调整。

例如,在按钮 Tokens 中,我必须为“outlined”按钮选择“stroke”而不是“frame”。如果按照以下步骤进行设置,可以使库面板中显示的变量数量最少化,并避免在设计过程中出现冲突。

如何制作系统级颜色色卡?从理论到实践全解析!

四、实现和产出

接下来将演示如何在设计中使用这些变量。已在给的设计参考文件中展示了生成的调色板的实现和输出,大家可以去 figma 文件里直接看,

1. 浅色模式

调色板的色调已正确定义到变量中,并产生了预期的结果:

如何制作系统级颜色色卡?从理论到实践全解析!

在设计效果图中,使用调色板的浅色调创建了明亮主题的色彩风格。

2. 深色模式

与色调类似,调色板的深色调也被正确定义到变量中,并产生了预期的结果:

如何制作系统级颜色色卡?从理论到实践全解析!

在设计中,使用调色板的深色调创建了暗色主题的色彩风格。

3. 主题化

这个颜色系统可以很容易地修改和适应任何其他项目。唯一需要做的就是定义一个可访问的基础色,对其进行插值,并更改原始值。

让我们看看不同采用案例的结果:

如何制作系统级颜色色卡?从理论到实践全解析!

适用于 H:340, S:84, B:88 的初稿设计

迭代是永无止境的

我们现在拥有了一个经过精心组织、完全无障碍的品牌调色板,它支持亮暗模式并涵盖了整个设计系统。在实施过程中,根据设计系统结构的不同,可能会出现一些不一致之处,你需要根据需求修改和调整颜色值、变量和颜色范围设置。

五、总结

通过实践,你可以学会如何使用颜色插值、HSB 颜色空间、无障碍颜色设计以及 Figma 变量。

设计系统的需求可能会让你深入学习这些领域的某个知识点,从而提升能力。设计师之所以出色,是因为他们不断探索和学习,在探索过程中锻炼了自己的专业技能。

所以,根据今天学到的新知识,重新刷新自己产品的色彩系统,然后也用上文章说的 figma 的变量功能来做吧。实践后,你才能真正掌握。

欢迎关注作者的微信公众号:「彩云译设计


想了解更多网站技术的内容,请访问:网站技术

本文来源:https://www.youhuaxing.cn/seodongtai/19645.html

免责声明:部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性,不承担任何法律责任。
用我们的专业,做您满意的SEO+高端网站建设服务商!