本篇文章在翻译整理时重新梳理了Material Design色彩规范的层次结构并加入了一些自己的理解，如果有问题欢迎在评论区留言：）

4. 色彩

4.1 色彩系统

Material Design（以下简称MD）色彩系统可以帮助你建立一套反应你的品牌和风格的色彩主题。

4.1.1 色彩用法和色板

MD色彩系统帮助你将具有含义的色彩应用于界面。在此系统中，通常选择主色和辅色来表现你的品牌，并通过不同的方式将主色、辅色的明暗变体应用于你的界面。

原则

• 有层次：色彩表明哪些元素是可交互的，它们与其他元素的关系以及强调程度，最重要的元素应该是最突出的。

• 清晰易读：文字和重要元素（比如图标），出现在所有屏幕和设备的彩色背景上时，都应符合易读性标准。

• 富有表现力：通过展示品牌色彩来增强品牌风格，从而强化品牌。

色彩主题

App的主色和辅色及其变体可用于创建一套和谐的色彩主题，确保文本可读性，并将UI元素与材料彼此区分开。

要选择主色和辅色并生成每种颜色的明暗变体，可使用 Materail design调色板工具、主题编辑器或2014Materail design色板。

△主色和辅色色板样本

1. 主色指示器

2. 辅色指示器

3. 明暗变体

4.1.2 色彩主题创作

基准MD色彩主题

MD带有内置的基准主题，可以直接使用。

它除了包括默认主色、辅色及其变体的颜色，还包括UI的其他颜色，例如背景、材料、错误、文本和图标的颜色。所有这些颜色都可以根据你的App做定制化。

△基准MD色彩主题

主色

• 主色是在你的App的屏幕和组件中显示最频繁的颜色。

• 如果你没有定义辅色，那么你可以用主色强调元素。

• 你可以使用主色以及明暗变体制作一套应用于你的App的色彩主题。

如果要在UI元素之间创建对比，例如区分状态栏和导航栏，你可以在两个元素上分别使用主色的不同明暗变体。除此之外，你还可以使用明暗变体来区分组件当中的元素，例如FAB背景以及其上面的图标使用不同明暗变体。

△这个界面使用了主色和主色的两个变体

辅色

• 辅色是可以选择性使用的，应谨慎地用于你想要强调的部分。

• 如果你没有辅色，也可以使用主色来强调元素。

辅色最适合用于：

• FAB

• 选择控件，例如滑块和开关；

• 突出显示所选文本

• 进度条

• 链接和标题

和主色一样，辅色也可以有明暗变体。色彩主题可以使用你的主色、辅色以及每种颜色的明暗变体。

△这个界面使用了具有主色、主色变体和辅色的色彩主题

材料颜色、背景颜色和错误颜色

材料颜色、背景颜色和错误颜色通常不代表品牌：

• 材料颜色会影响卡片、表单和菜单等组件的材料。

• 背景颜色出现在可滚动内容的后面。基准背景和表面颜色为#FFFFFF。

• 错误颜色表示组件中的错误，例如文本字段中的无效文本。基准错误颜色为＃B00020。

△背景，材料和错误颜色的基准颜色：

1.基础背景色：#FFFFFF

2.基础材料颜色：#FFFFFF

3.基础错误颜色：＃B00020

版式和图标颜色

UI材料如果使用你的色板中特定分类的颜色，例如主色。只要在这些材料上面出现诸如文本或图标之类的元素，这些元素应使用为“相对于其下面的颜色清晰易读”而设计的颜色。

这种类型的颜色叫做“上面的”颜色，指的是出现在使用：主色、辅色、材料色、背景色或错误色的材料上面的的元素颜色。当一种颜色出现在主色之上时，称为“在主色上面的颜色”。

“上面的”颜色主要应用于文本，图像和描边。有时，他们被应用于材料。

“上面的”颜色的默认值为#FFFFFF和#000000。

△界面会显示文本和图标的基础颜色：

1. 主色上面的基础颜色#FFFFFF

2. 辅色上面的基础颜色#000000

3. 背景色上面的基础颜色#000000

4. 材料色上面的基础颜色#000000

5. 错误颜色上面的基础颜色#FFFFFF

4.2 色彩使用

色彩有助于表达层次结构、建立品牌形象、赋予含义并指示元素状态。

4.2.1 原则

• 一致性：颜色一致的应用于整个UI，并与其所代表的品牌兼容。

• 差异性：颜色应在元素之间建立区分，并使它们之间具有足够的对比度。

• 目的性：应该有目的地应用颜色，因为它可以通过多种方式表达含义，例如元素和层次之间的关系。

4.2.2 层次

在MD中，颜色可以使屏幕上的特殊元素被注意。当一个元素的颜色与周围形成对比时，该元素就会相对突出，以便于被用户注意到。由于颜色主题各不相同——从大胆鲜明的到单色或无色，有不同的方式表明哪些元素更加重要。

例如：当黑色图标放置在白色背景上时，它们显得特别醒目。色彩丰富的卡片放置在单色旁边时，会引起注意。

材料颜色对比

在元素之间使用强烈颜色对比，可以让想要强调的元素被注意到。

△紫色背景与白色材料形成强烈反差，强调了该旅行App的重点——列表项的选择。

颜色和形状

视觉重点放在同时更改颜色和形状的元素上。使用这种强调表示已选择某项内容或需要立即注意。

△带有圆角和粉红色的标签表明已经被选中。

4.2.3 品牌

可以使用色彩来强调你的品牌的存在。可以在关键的位置使用品牌色，并将品牌色彩与特定的行为和信息相关联。

品牌色彩的应用可以大胆率性，也可以微妙精致，或介于两者之间，你个人对品牌的处理方式应反映在你的App中。

△此新闻类App谨慎的使用了它的辅色（紫色），使应用辅色的部分在场景中脱颖而出。

4.2.4 含义

色彩可以传达不同UI元素的含义。例如，天气App可以显示指示当前天气状况的颜色，导航应用程序可以显示指示交通状况的颜色，道路的颜色为红色或绿色。

△导航App使用颜色来表示交通状况。

一致性和场景

应用在产品中的颜色应具有一致性，以便于相同颜色即使在场景改版的情况下也可以代表相同的含义。此外，还应注意具有地域或文化含义的颜色。例如，在某些文化中通常使用红色作为警报的含义，而在有些文化中则不会。

△选中的日期以红色显示，将品牌的主色（红色）与选择旅行的日期相关联。

4.2.5 状态

色彩可以提供有关App、组件、元素状态的信息。包括：

• 元素或组件的当前状态，例如按钮是启用还是禁用；

• App、组件或元素的状态更改。

当指示状态更改时，颜色变化应明显，否则可能会音颜色变化细微而被忽略掉。最好以多种方式指示状态变化，例如通过显示图标或移动元素的位置。

△列表中的电子邮件通过使用品牌颜色的形状指示选中的电子邮件。

4.3 文本易读性

颜色在文本的易读性上面起着很重要的作用。

4.3.1 易读性标准

WCAG标准

所有文字均应清晰易读并符合无障碍标准。Web内容无障碍指南（WCAG 2.0）AA级要求普通文本的文本和背景之间的色彩对比度至少为4.5：1，大文本的色彩对比度至少为3：1。

这里个人推荐一个检测色彩对比度的网站

WebAIM https://webaim.org/resources/contrastchecker/

和一款插件(for: XD、Sketch、Figma)

Stark https://www.getstark.co/

4.3.2 文字背景

在彩色背景上的文字

建议在浅色背景上使用黑色文字，在深色背景上使用白色文字。如果你的App同时具有浅色和暗黑主题，需要确保文字在每个主题上面都具有色彩对比。

使用文字不透明度

通过显示降低不透明度的白色或黑色文本，代替在彩色背景上使用灰色文本和图标，来创建更好地对比度。

例如，在绿色背景上以75%的不透明度显示的黑色文本，显示效果为带有一点绿色的黑色。

 或者，你可以通过以下操作来计算文本的颜色：

• 将降低不透明的黑色放置于绿色背景的上面；

• 确定叠加产生的深绿色的十六进制值；

• 使用得到的十六进制值作为文本色 。

需要注意的是，在这种情况下，如果文本下面的材料更改颜色，则必须更新十六进制色值。

浅色背景上的深色文字

浅色背景上的深色文本（这里显示的是#000000在#FFFFFF上面）应用以下的不透明度层级：

• 高视觉优先级文本颜色不透明度87%

• 中等视觉优先级文本不透明度为60%

• 禁用态文本不透明度为38%

彩色文字和背景

应当谨慎使用彩色文本去进行强调和吸引注意力。理想情况下，应在标题、按钮和链接等文本上使用彩色文本。

大标题和短文本适合使用彩色文本，彩色的长文本会降低可读性。

4.3.3 文本类型

辅助文本

辅助文本提供相关字段的说明，例如如何使用输入。它可以采用品牌色，但是需要按照WCAG标准保证清晰可见。

例如，浅色背景上的辅助文本可以应用以下不透明度层级和默认十六进制：

• 高视觉优先级辅助文本：使用87%不透明度的#000000；

• 默认颜色辅助文本：使用60%不透明度的#000000；

• 默认错误辅助文本：使用100%不透明度的#B00020；

选中文本

为了呼应品牌，文本的选中状态可以使用你的主色或辅色。

选中的文本颜色和选中的区域颜色应存在明显对比，选中的区域颜色应与背景颜色形成对比。或者，你可以通过选中区域描边、动效、选中图标或者其他文本处理方式来指示所选的文本。

△1. 文本  2. 选中文本区域  3. 背景

图标和其他符号

图标和其他元素不需要符合WCAG标准，但是要保证可见性以指示功能或传达信息。

例如，深色图标（#000000）或这其他在浅色背景（#FFFFFF）上的元素在使用时应该遵循以下不透明度层级：

• 视觉上需要强调的图标不透明度为87%；

• 视觉上不需要强调的图标不透明度为60%；

• 禁用图标不透明度为38%；

4.4 暗黑主题

暗黑主题是展示深色材料的低亮度UI。

 

4.4.1 用法

暗黑主题被设计为默认（或浅色）主题的补充模式，它降低了设备屏幕发出的亮度，同时符合最低的色彩对比度要求。暗黑主题通过减少眼睛疲劳、根据当前光照环境适应亮度、促进屏幕在黑暗环境中的使用来提升视觉体验，同时还可以节省电池电量。

 原则

• 使用灰色：使用深灰色（而不是黑色）来表示深度范围更广的环境中的海拔和控件；

• 强调颜色：在深色主题UI中应用有限的强调颜色，大部分空间使用深色材料；

• 节约能源：通过减少明亮像素的使用可以延长电池寿命；

• 提高无障碍性：通过满足无障碍色彩标准来适应深色主题用户（例如视力不佳的用户）。

4.4.2 剖析

暗黑主题界面主要使用深色材料和少量的强调色。它们在保证高可用性标准的同时发出低亮度的光。

△

1. 背景色

2. 材料色

3. 主色

4. 辅色

5. 背景上面的颜色

6. 材料上面的颜色

7. 主色上面的颜色

8. 辅色上面的颜色

4.4.3 属性

MD暗黑主题由以下属性定义：

• 对比度：深色材料和100%白色文字的对比度至少为15.8:1；

• 海拔：亮度越高，海拔越高（海拔越高越接近隐含光源的位置）；

• 降低饱和度：主色经过降低饱和度处理，以便于它们在所有海拔上均可以通过WCAG AA标准至少4.5：1的对比度要求；

• 有限的颜色：尺寸较大的材料使用深色材料颜色，且有限的使用强调色（明亮颜色、降低饱和度的明亮颜色、高饱和度颜色）。

海拔

通过在组件材料上放置半透明的覆盖层，可以构造出暗黑主题的材料。

△通过使用半透明的白色叠加层，材料变得更亮。
1. 材料

2. 海拔叠加

 

材料上的叠加层还使区分组件之间的海拔和查看阴影变得更加容易。叠加层可增加表面及其阴影之间的对比度，从而使每个材料的边缘更加明显。

△默认主题使用阴影表示海拔，而深色主题除阴影之外也通过调整材料颜色来表示海拔。

 

这些材料叠加层旨在最大程度地提高可读性，同时确保彼此可以区分出不同的海拔。

△海拔叠加层不透明度的范围从最低级别的0％到最高级别的16％。

叠加层可以清楚显示组件之间的海拔差异。

△

A. 使用5％不透明度叠加层的海拔高度为1dp的卡片

B. 使用没有叠加层辅色的海拔高度为6dp的FAB

C. 使用12%不透明度叠加层的海拔高度为8dp的底部应用栏

辅助功能和对比

暗黑主题材料必须足够暗才能显示白色文本。他们应该在背景和文本之间使用至少15.8：1的对比度。这样可以确保将正文文本应用于最高（和最亮）高度的材料时，至少达到WCAG的4.5：1的AA标准。

△要创建品牌化的深色材料，需要将主要品牌颜色以较低的不透明度叠加在建议的深色主题材料上（#121212）。颜色#1F1B24是组合暗黑主题材料颜色＃121212和8％主色的结果。

4.4.4 UI应用

暗黑主题基础色板

暗黑主题UI上应使用暗黑主题颜色，包括：

• 颜色（主色、辅色和主色变体）

• 材料（背景和组件）

• 状态（例如错误状态）

• 内容（文本和图标）

△暗黑主题基准颜色

△1. MD基准默认主题    2. MD基准暗黑主题

文本和图标颜色

△UI显示了深色主题中文本和图标的基准颜色。

 

在深色背景上的明亮文字

当深色背景上出现明亮文字（此处显示为白色在黑色上面）时，应使用以下不透明度级别：

• 高视觉优先级文本不透明度87%

• 中等视觉优先级和提示文本不透明度为60%

• 禁用态文本不透明度为38%