译者注

本文来自Automattic的设计团队的官方博客，讲述了他们如何构建一个灵活易用的色彩系统。你可能对Automattic公司并不熟悉，但你一定接触过它旗下的一款产品：大名鼎鼎的开源博客平台WordPress。

接下来，让我们一起看看WordPress的设计团队在重构色彩系统中，做了哪些事以及解决了哪些问题。

正文

像其他拥有众多数字产品的公司一样，Automattic（WordPress.com的制造商）最近投入了大量精力来创建我们称之为Muriel的设计语言系统。这是一个雄心勃勃的新设计系统，可以覆盖大部分产品，很可能会改变每个Automattic成员的设计流程。尽管我们只是一个小团队，但有着势不可挡的干劲。 

同时，我们的营销团队也在为WordPress.com开发一种新的视觉语言，包括新的设计规范，图像，排版， 颜色等。他们完成了筛选品牌色的繁琐工作，而我们的主要目标是使用新品牌色更新产品。 这个时机很好，将改变后的品牌色进行统一整理，并应用在我们的色彩系统中，同时让我们的团队变的更加系统化。

为何更新品牌色如此重要？

尽管用新的品牌色更新产品变化显著，但依然可以做更多事情。 我们知道我们的产品特性与新的营销物料不完全一样，但是通过颜色可以使它们统一起来。作为一个设计团队，我们发现改变使用颜色的方法能够使其更有价值。

目标

在开始之前，我们制定了一个目标列表，其中考虑了三个指导原则：颜色应该帮助用户集中注意力 ，颜色要满足可用性标注，颜色可以与人交流 。

• 简单易用，在任何地方都可以达到WCAG AA级文本对比。

• 在登录、创建帐户和使用产品的过程中拥有统一的用户体验。

• 色彩系统可以应用于公司的所有产品。

• 有目的地使用颜色，杜绝颜色乱用。

• 一个功能升级，允许用户更改控制台的主题，并增加夜间模式。

译者注：关于WCAG可用性标准，请查看《W3C可用性指南之「文字对比度」》。

机遇

目前我们色彩系统的基础还是不错的。开发过程中颜色使用了变量（可以使多个元素共用同一个色值），因此升级维护更加简单；我们有一个旧的色彩系统，其中包含一些基本的可用性信息；还有，我们的Web App和本地App（Android和iOS端）共用了同一个色板！

不过仍然有很多需要改进的地方。

• 大多数颜色都不符合AA级文本对比标准，迫使设计师和开发人员手动修改它们。

• 关于何时、何地以及如何使用颜色，几乎没有什么规范。

• 成功、警告和错误状态的颜色会被用于预期之外的地方。

• 我们没有辅色（也叫强调色），因此很难突出重点元素。

• 开发同学以编程的方式（修改透明度和Sass的lighten、darken等方法），创建了大量私用的明暗色调。

• 颜色以色调命名（例如blue-wordpress和gray-light ），因此难以通过用途来使用颜色。

译者注：Automattic团队面临的麻烦，国内的大多数设计团队也遇到过，比如颜色的命名。Automattic团队解决问题的方法很值得学习，这是我翻译此文的主要原因。

设计过程

1. 研究阶段

在确定了目标和机遇之后，我们研究了其他公司的设计系统，以确认我们可以实现哪些目标。我们的主要灵感来自Material design ，特别是他们的主色（Primary）和辅色（ Secondary也叫Accent）的概念。主色在应用程序中使用频率最高，辅色用于强调以引起用户注意。

译者注：Android团队提供了一个在线的MD颜色调节工具：

https://material.io/tools/color/

此外，我们发现几乎每个设计系统都有基本的色彩原理，但缺少更深层次的理论来回答“Why？”。我们希望自己能做得更好。

2. 编写文档

接下来，我们对颜色、颜色的使用方式和全部文档进行了整理。我们的想到的第一件事是更新设计文档-是否应将更新设计规范放在首位呢？毕竟，如果你不知道有什么标准，又如何能更新产品的颜色呢？然而在真空中（在规范没被正式使用之前）定义的设计规范总会遇到问题，很快我们就发现了这点。

我们遇到了一个特殊的挑战，如何选择控件的颜色（复选框、单选框、开关、输入框等）。他们应该使用主色（蓝色）还是辅色（粉色）？某些控件是否应使用特殊颜色？

如果完全遵循Material design，那么所有可交互的控件都将使用辅色，这将会削弱辅色的视觉冲击力。 对于我们的产品来说，辅色是为了让用户的注意力集中在最重要的信息上。在上面的示例中，保存按钮是最重要的操作。

译者注：Automattic团队选择了和materical不同的辅色方案，我个人还是认为material更美观一些，wordpress遇到的这种情况，可以将按钮设计的更大一些，不过在拓展性上会受到更多限制。

这是我们遇到的众多挑战之一。我们对设计规范进行实时迭代，保证规范尽快更新，而不是测试，否定，然后重新编写规范。为什么不在软件迭代过程中定义设计规范呢？ 因为通过快速地实现和测试，我们可以发现更多问题并使设计规范更加完善。

3.执行阶段

优秀的营销设计师开发了Color Studio，一个可以为任何颜色生成一系列明暗色调的工具。使用这个工具，能够为每种颜色创建一个具有相同明暗色调数的标准颜色序列。凭借统一的实现机制，所以产品在视觉上产生了关联，并且使用了相同的色彩系统。

译者注：Color Studio在线链接：https://automattic.github.io/color-studio/custom.html

译者注：Automattic设计团队定义的标准色板：https://automattic.github.io/color-studio/

color-studio让检查文本对比度变的格外简单。 如果白色或黑色与颜色组合达到AA级，它将分别在“W”（white，白色）或“B”（black，黑色）旁边显示“AA”。 如果没有达到AA级，就直接显示对比度数值。

译者注：关于WCAG可用性中AA和AAA级别介绍，请查看《W3C可用性指南之「文字对比度」》。

4.颜色的等效明暗色调

理想情况下，所有颜色都有相同的明暗范围。这意味着所有具有相同亮度级别（0–900）的色调与白色或黑色具有相同的对比度。换句话说，如果打开photoshop并将调色板转换为灰度，那么每个颜色看起来都是一样的。这让确认某个颜色可用性变的很简单--（理想状态下）如果您选择500-900之间的任何色调，那么可以认为它在白色背景上符合AA级标准。你甚至不用看颜色来判断它是否符合文字对比度的可用性标准。

需要注意的是，并非我们选择的所有颜色都遵循这种模式。橙色和黄色会出现问题，因为它们天然比较明亮，将橙色或黄色调暗来达到AA级时，要么颜色变的很脏，要么需要改变色相。MineralUI设计系统通过使用“青铜色”而不是黄色或橙色解决了这一问题。在Lyft的色彩系统中，60-100之间的每种颜色对比白色都满足可用性标准，但是亮度并不完全相同。你所设计的色彩系统如何处理此问题需根据你的团队和产品的特定需求来确定。

译者注：下方是MineralUI的色表。

译者注：下方是Lyft的色表，此外lyft设计团队也开发了一款在线色彩系统生成工具，https://www.colorbox.io/

每种颜色都拥有等效的明暗色调是很好的，因为它有助于我们实现颜色可用性这个目标，并且使用色彩主题更容易。例如，如果您希望主题的主颜色使用绿色而不是蓝色，那么您可以轻易确认所有文本依然保持相同的对比度级别，稍后我会详细讨论这个问题。

5.在CSS中使用色板（精简了一些和开发相关的内容）

相比预处理器变量（如SCSS，这是我们之前使用的），使用CSS自定义属性（CSS 3 中新增的var特性，允许多个样式表共享同一个颜色值）多了很多优点。

开发工具将自动获取您定义的颜色值，不再需要复制/粘贴十六进制颜色代码！ 这是其中一个优点，但对我们来说，CSS自定义属性的动态特性才是其主要优点，可以在浏览器运行时更改颜色值。 这为自定义控制台主题打开了一扇大门，为用户提供了更多价值。

此外，因为每种颜色都具有等效的明暗色调，所以开发人员不需要再私自定义某个颜色的暗色调。

目前还有一个问题，新的颜色系统中，缺少对颜色透明度的定义，而且CSS中也没有合适的解决方案（SCSS预处理器可支持更好，但是我们不希望混用两种开发方式），希望今后能够找到更好的解决方案。

6.命名很难

我们一直知道，颜色应该以用途命名，以符合我们的核心原则之一——颜色应该与人交流。通过用途命名颜色，可以清楚地了解颜色的意义。例如，我们选择了“Secondary Color”而不是“Jazzy Orange”，选择了“Error Color”而不是“Alert Red”。“Alert Red”问题格外严重，因为假定它只能用于警报，并且只能使用红色。

在“color-studio”中查看我们的调色板，你会注意到每种颜色都是以其色调命名的（例如Blue、Hot Pink和 Green）。因为其他项目也会使用这些颜色，所以这样命名是有好处的，比如从事广告和落地页工作的团队可能无法理解以“用途”命名的色彩系统。不过一旦我们将这些颜色用于wordpress.com应用程序，它们就通过用途分配给CSS变量。

因为每个颜色都包含大量明暗变化，颜色的命名系统必须有一定的拓展性。几年前，我们试图给每个暗色调赋予一个独特的名称（Gray Light, Gray Lighter, Gray Lightest等），但很快就失控了（Gray Ultra Light? Gray Lighterer?）。最终，我们决定根据颜色的深浅来命名它们。例如，浅灰色被命名为 Gray Lighten 10、 Gray Lighten 20等等，因为它们比我们的基础灰色亮10%和20%。在新的色彩系统中，我们简化了命名，每个颜色有11个明暗色调，从0到900，500是基础色。

7.命名系统的实际效果

我们有一组通用的基本变量：

上面的颜色可以用-light或-dark作为后缀，以快速获得颜色的变体。 它们是辅助性别名，使获取明暗色调更容易（例如-color-primary-light或-color-primary-dark）。 这些后缀对应于该颜色色调的300和700。 例如，Blue 300等于--color-primary-light，而Blue 700等于--color-primary-dark。

上面列出的颜色变量也可以使用Color Studio上显示的色调明暗值作为后缀。 如果您需要一个-light或者-dark的之外的明暗色调，则可以将其明暗值加到变量的末尾。 例如，--color-accent-100或--color-neutral-900。

我们还有一组扩展变量：

这些被称作“second-tier”变量，经常与特定元素相关联， 它们可以最大限度地减少颜色使用不一致的机会，并使程序维护更加容易。

译者注：开发时，可以让--color-link的值等于--color-accent，css代码如下：

这样做的好处在于，如果设计师修改了“accent color”，与之相关联的元素都会自动改变，有机会我会专门聊聊这方面的内容。

Twitter网页版，会将用户选择的“主题色”应用于按钮、tab和超链接等元素上。

8.挑战控制台（也叫做仪表盘）主题

我不想深入讨论细节，因为有很多文章深入地探讨过这个话题。老实说，为应用程序添加主题并不容易，我建议你花点时间评估一下自己的产品是否真的需要主题化。如果主题化程度较低（只用一种颜色初始化界面，比如刚刚提到的Twitter），则可能会更容易。在我们的产品中，希望主题能够改变主要、次要、导航和顶部标题栏的颜色，以及在夜间主题中将颜色全部翻转。

前期大部分工作是思考如何应用颜色并使用CSS自定义属性进行实现，这需要付出很多努力，但是CSS自定义属性定义颜色值，使维护变得更容易、可扩展性也更强。 这并不是简单的查找和替换，我们必须删除使用rgba，透明，变亮，变暗，混合等预处理器方法。每一次替换都是手动完成的，因为在新的色彩系统中没有精确到1:1的等效颜色。

译者注：看起来wordpress的旧版本中明暗色调和透明度乱用情况比较严重，不过国内大部分互联网产品可能更糟糕。

如果只换掉主色和辅色，大部分主题都可以轻松完成，但你可能已经发现上图中导航抽屉的变化很大。 根据主题的不同，中性背景色（白色、粉色、灰色）的颜色也不同。 我们必须为可能改变颜色的每种元素都添加额外的颜色变量，特别是导航抽屉和顶部标题栏（例如--sidebar-background ， - --sidebar-text-color等）。

这些并不会被应用于右侧主内容区域，因为在不同主题下，主内容区的中性背景色都是相同的。但是在夜间模式下，每一种中性色都会被翻转，那么如何设计一个夜间主题呢？

9.如何设计夜间主题

夜间模式从开始就在计划中，所以在整个项目中它都是一个需要考虑的因素。我们遇到了一些障碍，但我们不断在产品中寻找可行性。如果您的产品规模较小，或者包含了某些设计模式（指开发中的设计模式），操作起来会轻松得多。以下是我们在工作中发现的一些挑战和所用的技术。

你可能知道，有些带有夜间主题的产品并不会反转全部颜色。按钮上的文本可以保持白色，或者清除元素的颜色。但是特例越多，开发维护起来就越困难。为了保持最低限度的维护成本，就必须尽可能多地反转颜色。

反转色板的三个步骤：

1. 将明暗色调序列进行等分。用序列中另一半的同位色调替换当前色调。

2. 确保每个颜色都有足够的明暗色调。一旦你选择了主色、辅色和状态色，就应该为他们生成色调序列（color-studio能帮你轻松完成）。

3. 通过赋予两个主题相同的对比度，更容易达到可用性标准。因为如果默认主题达到AA级，那么夜间主题也会达到AA级。

使每个颜色的明暗色调数量为偶数，以便能将色调序列进行平分，保证能够从另一半替换颜色。

使用此方法，您可以轻松地设计一款夜间主题。 如果所有的颜色都具有等效的明暗色调，只要默认主题达到可用性标准，就不必担心其他主题的可用性问题。 

如果明暗色调序列两侧不等效，则会发生下面的情况：

我们的黄色比其他颜色亮很多，所以反转后不起作用。 这并不意味着不能使用黄色，但这意味着我们必须小心地使用黄色。

10.反转颜色的异常情况

我们发现，如果在UI中使用层级关系或阴影，那么反转颜色就无法满足需要。例如，一个对话框需要在夜间主题中保留它的投影，以便它显示在界面的最上层。我们暂时还没有找到解决此问题的方法。

结尾-译者注

这是一篇又长逻辑性又强的文章，但是文中所提到的色彩工具、颜色理论和可用性标准都值得细细研究。

更多来自OU的设计理论文章

W3C可用性指南之「文字对比度」

一文掌握黄金比例螺旋线