构建用户界面的语义颜色标记其实很简单

在我的上一篇文章《如何为您的界面创建一致的颜色调色板》中，我讨论了创建一个一致的颜色调色板。这个调色板包含了您界面中所有要用到的颜色。我们把它叫作核心调色板。

然而，一个一致且准确的核心色彩方案对于一致且准确的界面来说是不够的。我们需要一套规则来指导如何在界面中使用这些颜色：具体使用哪种颜色用于主要文本和次要文本、输入框的边框颜色等。

我们现在来介绍一下语义层。语义层是一系列关于如何使用核心调色板中颜色的规则。

核心层展示了所有可用的颜色，而语义层则定义了如何应用这些颜色。

我相信你们中的大多数人见过非常复杂的语义色板（比如 button-background、button-text、button-icon 等）。我也试过这种方法，但现在可以说这种方法其实过于繁琐且复杂。

这样的系统不仅很难建立，用起来更是一团糟。如果你真的需要这种级别的细节，它可以作为在简单的语义层下面的第三个层次。但是，除非你确信真的有必要这么复杂，否则就别往这个坑里跳了。

我展示的这个简单的语义层在大多数界面中都能很好地运行。

有五种主要的语义标记组。

• 文字 — 标题、段落、说明文字、链接、标签、按钮标题等的颜色
• 填充 — 按钮容器、图标、复选框、开关等的颜色
• 描边 — 输入框的边框、分隔线、横幅的边框等的颜色
• 层次 — 页面背景、弹出窗口背景、覆盖层的颜色等的颜色
• 效果 — 阴影和点击反馈的颜色

在 Aloha，我们决定先不处理 描边 和 效果 。对于 描边 ，我们选择使用 填充色 调色板中的颜色来简化系统的操作。之后，我之后会聊聊这个决定的好坏。对于 效果 ，我们无需使用特殊颜色，因为我们使用 Android 和 iOS 库中的标准效果。

每个语义调色板中包含几个语义标记词。例如：text-primary、text-secondary、text-brand-primary、和text-on-accent。

在 Figma 设计工具中，我们分别创建了两个文件：核心调色板 和 语义调色板。我们使用变量来管理颜色令牌。语义调色板 中的颜色定义引用了 核心调色板 中的颜色定义。

使用语义层的一个非常宝贵的好处是调整界面风格。一个良好组织的语义层可以轻松切换浅色模式和深色模式，以及调整颜色主题。在Aloha，我们有5个颜色主题，每个主题都提供了浅色和深色两种模式。

对于每个语义令牌，在每种配色方案和模式下都有相应的颜色。在 Aloha，我们仅重新定义品牌令牌，但如果需要，整个语义色板也可以在每种模式下重新定义。

Figma 的变量让颜色模式的管理和使用变得简单。你可以为不同的模式设置调色板，并通过一键即可切换界面主题。

1. 不要简单地将颜色从浅到深或从深到浅进行反转 light → dark 或 dark → light，而应该针对每个具体情况进行思考。
2. 深色主题应该有更多的层次感。更近的表面应该更亮一些。
3. 与浅色主题不同，深色主题中的分隔线和边框应该比背景更浅。

填色用于表示

• 按钮、标签、横幅等的背景 🚨 页面背景、底部菜单和弹出窗口背景不应使用填充颜色。
• 图标填充
• 复选框、单选按钮、切换开关等的填充颜色

别忽略了那些在深色或彩色背景上出现的元素。这可是个相当重要的标记，只需要加上一个强调填充项就足够了，基本可以应对各种情况。

显然，文本颜色用于文本中。我们用它们为标题、段落、链接、标签和按钮文本等设置颜色。

但是这些颜色看起来与Fill非常相似。为什么需要额外的一个语义组呢？问题是文本比图标或界面控件要细很多，因此即使颜色完全相同，文本看起来也会比较淡。

如果我们想保持独立管理和稍微调整文本颜色的能力，我们需要为它们使用单独的标记。

层次是最简单却最复杂的部分。只有少量的标记和2-3种颜色，但这些层次的结构非常重要，特别是在暗模式中。

我们应该设想我们的界面是三维的。然后，我们需要决定界面需要多少层。

在 Aloha，我们有 3 楼层和 1 个叠加层。浅色模式下，楼层仅用 2 种颜色，而深色模式下，界面看起来更有层次感。

在笔画部分，我们有元素边框和分割线的颜色。你可能需要使用品牌色、正色和互补色，还需要一些浅灰色。

确实，描边色板看起来非常类似于填充色板。

通常，你会在颜色填充调色板中找到所有你需要的颜色，不仅用于填充，还用于笔画。再创建一个完全相同的调色板似乎多余。在 Aloha，我们决定将颜色填充调色板用于填充和笔画。

但有时候，你可能希望同一颜色在暗模式下用于填充和描边时表现不同。

所以，一方面，使用同一个调色板填充和描边更简单。你不必考虑用哪个调色板。但另一方面，两个调色板提供了更多的灵活性和清晰度，并且更清楚地知道如何使用特定颜色。

或

我们已经讨论过语义 token，它们可以用于不同的颜色主题。每个 token 都有一个特定的用途。但是，如果有些颜色在两种模式下看起来一样呢？这些颜色通常是黑色和白色的不同深浅。

对于这些颜色，我们应当为它们准备一个独立的色板。我们把它叫做静态色板。添加一些不受颜色模式影响的颜色。每个静态颜色标记也从核心色板中获取颜色。

总之……拥有一个简洁的 语义层 ，你可以随意扩展界面的颜色调色板，同时保持清晰且准确的结构。

为您的界面创建一致的色彩方案

创建适合人类眼睛的可访问颜色方案(https://medium.com/user-experience-design-1/creating-accessible-colors-for-human-eyes-66ed6a083230)

当‘语义标记’不再语义化时

Figma 变量指南

深色模式UI转换