理论：语义色彩系统

这篇文章是“ You Need a Budget” （YNAB）团队如何在设计系统中运用色彩的三篇系列文章的第一篇。我们将探讨这套系统的运作原理、我们构建它的灵感来源，以及我们为何对它充满热情。

其他帖子介绍了该系统如何为设计师和开发人员服务。

介绍

在过去的几个月里，YNAB 团队改进了我们在设计系统中处理颜色的方式。

颜色看似简单，实则不然。它们是界面的基础元素，但最终却常常变得杂乱无章，充斥着各种内联定义、跨平台的命名约定、何时使用何种颜色的困惑，以及在内容发生变化时无法及时更新等问题。而暗黑模式的支持正在逐渐成为常态，这又为颜色带来了新的复杂性。

我们的新系统通过在设计和代码中结合使用语义命名和额外的“抽象层”（稍后会详细介绍其具体含义）来正面应对这些挑战。

本系列主要讨论我们在设计系统中所谓的颜色“形式”：我们如何构建系统以及它如何为设计师和开发人员服务。

本系列不会涵盖我们设计系统中颜色的“内容”：例如我们如何选择实际使用的颜色值，如何确保足够的对比度，我们在为黑暗模式设计时的颜色决策等等。

好的，让我们开始吧！

名字意味着什么？

如果您是设计师或开发人员，您很可能曾经在同一句话中看到过“语义”和“颜色”这两个词。它通常指的是一种基于颜色使用方式而非色相来命名颜色的方法。这是众多关于最佳颜色命名方法的理论之一。

使用语义名称，您可以将颜色命名为“破坏性”或“负面” - 暗示颜色在界面中的含义，而不是“红色”（或更有趣的颜色，如“番茄”）。

语义上命名颜色有两个好处：

它可以帮助设计师和开发者决定使用什么颜色。无需记住或查阅文档来决定“删除”按钮的颜色，只需选择与销毁相关的颜色即可。
它使你的颜色系统更加高效灵活。如果你决定将原色从蓝色更新为紫色，只需更新原色的值即可（假设你在 Figma 或 Sketch 等工具中使用颜色样式，并在代码中使用颜色变量）。如果颜色是基于色相命名的，你需要将每个使用该颜色的地方从“蓝色”更改为“紫色”。

我们对颜色的新方法引入了额外的抽象层，以解决通过简单地对每种颜色进行语义命名而未解决的一些问题。

基础调色板

当然，调色板是任何设计系统不可或缺的一部分。调色板代表了界面中色彩的可能性。

调色板是构建视觉一致的应用程序的良好开端——一组定义好的颜色可以减轻恶意十六进制值潜入的可能性。

这是我们在 YNAB 上的调色板：

每种颜色都有一个语义名称（例如primary、accent等），以及一个与其亮度对应的数字（例如，900代表最暗的变体；100代表最亮的变体）。但如果我们到此为止，关于何时使用哪种颜色，仍然有很多问题有待解释。而且，我们不会以一种“这为创意留下了空间！ ”的方式去解释，而会以一种“我们又该用哪种原色变体来制作按钮？ ”的方式去解释。

语义颜色

我们的语义颜色不仅仅是根据颜色的一般使用范围来命名。它们是位于基础调色板之上的第二层抽象。

我们的色彩系统由两层组成：

基础调色板，它定义了我们应用程序中所有可能的颜色值。
语义调色板，根据颜色的使用方式定义颜色。每种语义颜色都指向基础调色板中的一种颜色。

例如，我们为主要操作颜色设置了一种语义颜色，为标题背景设置了另一种语义颜色。每种语义颜色都引用了基础调色板中的一种颜色。

现在，您可能会想：“对于我们通过符号/组件免费获得的东西，这似乎是一堆额外的工作。” 对于按钮或标题之类的东西，这很可能是真的——当您设计主按钮组件时，您可以从调色板中选择一种颜色，然后其他人只需在他们的设计中使用该组件，而无需考虑具体的颜色。

但随着事情变得越来越复杂，这种双层系统的好处变得显而易见。

视觉一致性

YNAB 是一款预算软件，这意味着我们经常使用颜色作为正负账户余额的视觉信号（我们从不只依赖颜色，但颜色和可访问性将是一个完全独立的帖子）。

例如，预算视图中有一个“药丸”功能，显示用户预算中特定类别的剩余金额。屏幕顶部还有一个栏，显示总体预算状态。

为了保持一致性，我们希望这两个元素使用完全相同的颜色。这样，用户就能明白，当他们看到这个特定的红色时，它总是意味着同一件事——负余额！

在我们的语义颜色系统中，我们命名此颜色statusNegative并将其设置为引用基础调色板中的一种颜色。因此，如果我们想要更新此颜色，只需将其指向不同的调色板颜色，更改就会传递到所有旨在传达负面状态的元素。如果我们更新基础调色板颜色，更改将波及所有引用该颜色的语义颜色（以及所有使用这些语义颜色的元素）。

这就是我们所说的引入额外的抽象层。语义颜色充当了特定性的中间层，介于基础调色板中颜色的原始值和特定组件中这些颜色的使用之间。

最棒的是：语义化的颜色让设计师能够轻松创建与应用其他部分视觉一致的新元素。如果我们想在仪表盘上创建一个负面状态的图表，只需直接插入statusNegative即可，无需费力地在红色色调中寻找。