Material Design 基础 - 颜色

• 1. 颜色系统
  • 1.1. 颜色用法和调色板
  • 1.2. 颜色和主题
    • 1.2.1. 原则
  • 1.3. 基线材质颜色主题
    • 1.3.1. 原色
    • 1.3.2. 辅助颜色
    • 1.3.3. Surface, background, and error colors
    • 1.3.4. Typography and iconography colors
    • 1.3.5. 可访问的颜色
    • 1.3.6. 色样(color swatch)
    • 1.3.7. 替代颜色
    • 1.3.8. 浅色和深色主题
    • 1.3.9. 主题的替代颜色
    • 1.3.10. 用于数据可视化的其他颜色
    • 1.3.11. 用于拾取颜色的工具
    • 1.3.12. 2014 Material Design调色板
• 2. 将颜色应用于 UI
  • 2.1. 应用颜色的原则
    • 2.1.1. 顶部和底部应用栏
    • 2.1.2. 标识应用栏
    • 2.1.3. 背景
    • 2.1.4. 表单和表面
    • 2.1.5. Modal sheets
    • 2.1.6. Cards
• 3. 颜色用法
• 4. 颜色层次
  • 4.1. 表面对比度
  • 4.2. 颜色和形状
  • 4.3. 限制颜色
• 5. 品牌
  • 5.1. 大胆使用颜色
  • 5.2. onboarding
  • 5.3. 功能发现
• 6. 颜色的微妙使用
  • 6.1. 占位符 UI
  • 6.2. 进度指标
  • 6.3. 状态更改
• 7. 意义
  • 7.1. 一致性和上下文
  • 7.2. 状态
  • 7.3. 标识交互
  • 7.4. 指示选择
• 8. 文本易读性
  • 8.1. WCAG 标准
  • 8.2. 文本背景
    • 8.2.1. 彩色背景上的文本
    • 8.2.2. 使用文本不透明度(opacity)
    • 8.2.3. 浅色背景上的深色文本
  • 8.3. 彩色文本和背景
  • 8.4. 文本类型
    • 8.4.1. 帮助文本
    • 8.4.2. 选择文本
    • 8.4.3. 图标和其他符号
• 9. 深色主题
  • 9.1. 深色主题用法
  • 9.2. 深色主题原则
  • 9.3. 深色主题属性
  • 9.4. 深色主题刨析
  • 9.5. 深色主题行为
• 10. Material Design 系列文章
• 11. 参考文档

1. 颜色系统

Material设计颜色系统可以帮助您创建反映您的品牌或风格的颜色主题。

1.1. 颜色用法和调色板

Material设计颜色系统可帮助您以有意义的方式将颜色应用于 UI。在此系统中，您可以选择主要颜色和次要颜色来代表您的品牌。然后，每种颜色的深色和浅色变体可以以不同的方式应用于 UI。

1.2. 颜色和主题

颜色主题设计为和谐，确保文本可访问，并将 UI 元素和surfaces彼此区分开来。

“质感设计”调色板工具或 2014 材质设计调色板可用于帮助您选择颜色。

1.2.1. 原则

• 层次
  颜色指示哪些元素是交互式的，它们与其他元素的关系以及它们的突出程度。重要元素应该最突出。

• 清晰
  文本和重要元素（如图标）在彩色背景上显示时应符合易读性标准。

• 表达性
  在令人难忘的时刻展示品牌色彩，强化您的品牌风格。

1.3. 基线材质颜色主题

Material设计采用内置的基线主题设计，可以按原样使用，直接开箱即用。

这包括以下各项的默认颜色：

原色和次色
原色和次色的变体
其他 UI 颜色，例如背景、曲面、错误、版式和图标的颜色。
所有这些颜色都可以针对你的应用进行自定义。

1.3.1. 原色

原色是在应用的屏幕和组件中最常显示的颜色。您的原色可用于制作颜色...

原色是在应用的屏幕和组件中最常显示的颜色。

深色和浅色主要变体
你的原色可用于为应用制作颜色主题，包括深色和浅色原色变体。

区分 UI 元素
若要在 UI 元素（如系统栏的顶部应用栏）之间创建对比度，可以使用原色的浅色或深色变体。还可以使用它们来区分组件中的元素，例如浮动操作按钮的图标与其圆形容器。

1.3.2. 辅助颜色

辅助颜色提供了更多方法来强调和区分您的产品。具有辅助颜色是可选的，应谨慎应用于 UI 的选择部分。

如果您没有辅助颜色，则原色也可用于强调元素。

辅助颜色最适合：

浮动操作按钮
选择控件，如滑块和开关
突出显示所选文本
进度条
链接和标题
深色和浅色次要变体
就像原色一样，辅助颜色可以有深色和浅色变体。颜色主题可以使用每种颜色的原色、辅助颜色以及深色和浅色变体。

1.3.3. Surface, background, and error colors

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

表面颜色会影响组件（如卡片、图纸和菜单）的表面。
背景色显示在可滚动内容的后面。基线背景和表面颜色#FFFFFF。
错误颜色表示组件中的错误，例如文本字段中的文本无效。基线误差颜色#B00020。

1.3.4. Typography and iconography colors

“on” color
应用图面使用调色板中特定类别的颜色，例如原色。每当元素（如文本或图标）出现在这些曲面的前面时，这些元素应使用设计为清晰易读的颜色来对抗它们后面的颜色。

此类别的颜色称为“on” color，指的是它们对出现在使用以下颜色的曲面之上的元素进行着色：原色、辅助颜色、表面颜色、背景色或错误颜色。当一种颜色出现在原色的“上”之上时，它被称为“on” top of a primary color。它们使用前缀为“on”的原始颜色类别（如原色）进行标记。

“on” color主要应用于文本、图像和描边。有时，它们被应用于表面。

“on” color的默认值为 #FFFFFF 和 #000000。

1.3.5. 可访问的颜色

为确保浅色或深色文本后面的背景可访问，背景可以使用主色和辅助颜色的浅色或深色变体。

或者，这些颜色可用于显示在浅色和深色背景前面的排版。

1.3.6. 色样(color swatch)

色样是从一系列相似颜色中选择的颜色的样本。

复选框指示文本颜色在背景前面是否清晰可辨：

• 白色复选标记指示白色文本在背景颜色上清晰可见的时间
• 黑色复选标记表示黑色文本在背景颜色上清晰可见的时间

使用白色文本的应用必须具有可针对白色文本访问的背景。这些白色复选标记指示何时可以在各种背景色色板上访问白色文本。

使用黑色文本的应用必须具有可针对黑色访问的背景。这些黑色复选标记指示何时可以使用各种背景色色板访问黑色文本。

1.3.7. 替代颜色

Material设计颜色系统支持替代颜色，这些颜色用作品牌原色和次色的替代颜色（它们构成主题的附加颜色）。替代颜色可用于区分 UI 的不同部分。

替代颜色最适合：

具有浅色和深色主题的应用
在不同版块中具有不同主题的应用
属于一套产品的应用
应谨慎使用替代颜色，因为它们可能难以与现有颜色主题一起实现。

1.3.8. 浅色和深色主题

某些应用同时具有浅色和深色主题。为了保持元素的可见性和文本的易读性，您可以为深色和浅色主题调整不同的配色方案。

1.3.9. 主题的替代颜色

替代颜色可用于主题应用的不同部分。

1.3.10. 用于数据可视化的其他颜色

应用可以使用其他颜色来传达主颜色主题之外的类别。它们仍然是您完整调色板的一部分。

1.3.11. 用于拾取颜色的工具

材质调色板生成器可用于为您输入的任何颜色生成调色板。色调、色度和亮度通过一种算法进行调整，该算法可创建可用且美观的调色板。

输入颜色
可以根据主输入颜色生成调色板，以及所需调色板相对于原色应是相似、互补还是三元。

或者，该工具可以基于任何原色和辅助颜色生成展开的调色板。

用于辅助功能的颜色变化
这些调色板提供了使用主色和次色的其他方法。它们包括较亮和较暗的选项，用于分隔表面，并提供符合辅助功能标准的颜色。

1.3.12. 2014 Material Design调色板

这些调色板最初由Material Design于2014年创建，由设计为和谐地协同工作的颜色组成，可用于开发您的品牌调色板。要生成您自己的和谐调色板，请使用调色板生成工具。

2. 将颜色应用于 UI

颜色以一致且有意义的方式应用于 UI 元素和组件。
以下指南描述了颜色应用非常重要的各种UI组件和元素。

2.1. 应用颜色的原则

• 一致的
  颜色应该在整个用户界面中一致应用，并与它所代表的品牌兼容。

• 不同的
  颜色应该在元素之间产生区别，并在元素之间形成足够的对比度。

• 意图明确的
  颜色应该有目的地使用，因为它可以以多种方式传达意义，例如元素之间的关系和等级。

2.1.1. 顶部和底部应用栏

颜色应用于顶部和底部应用栏的方式可帮助用户识别它们并了解它们与周围元素的关系。

2.1.2. 标识应用栏

顶部和底部应用栏使用应用的原色。系统栏可以使用原色的深色或浅色变体将系统内容与顶部应用栏内容分开。

应用栏上使用原色，系统栏上使用深色原色。
若要强调应用栏与其他图面之间的差异，请在附近的组件（如浮动操作按钮 （FAB））上使用辅助颜色。

当应用程序的顶部或底部应用程序栏颜色与背景颜色相同时，它们会混合在一起，强调应用程序的内容而不是其结构。

2.1.3. 背景

背景有正面和背面。要区分这两个图层，基线后层颜色是原色，基线前层是白色。

2.1.4. 表单和表面

工作表和曲面（如底部工作表、导航抽屉、菜单、对话框和卡片）的基线颜色为白色。这些组件可以合并颜色以在其他表面之间创建对比度。对比度可以使表面边缘变得明显，从而指示表面重叠时的标高差异。

2.1.5. Modal sheets

在临时显示在屏幕上的曲面（如导航抽屉和底页）上使用对比色。通常，这些表面是白色的，但你可以使用应用的主要或次要颜色。

2.1.6. Cards

卡片的基线颜色为白色。这种颜色可以定制以表达品牌或提高易读性。卡片文本和图标也可以使用颜色主题来提高易读性。

3. 颜色用法

4. 颜色层次

在“Material中，颜色将注意力吸引到屏幕上的特定元素上。当元素的颜色与其周围环境形成对比时，该元素会脱颖而出，因此用户可以判断它很重要。由于颜色主题各不相同 - 从粗体和明亮，到单色或柔和 - 有不同的方法来指示哪些元素更重要。

例如，当黑色图标放置在白色背景上时，它们会脱颖而出。当多色卡片放置在单色旁边时，会引起人们对自身的注意。

4.1. 表面对比度

要引起对重要事件的注意，请在元素之间使用更强的颜色对比度。

4.2. 颜色和形状

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

4.3. 限制颜色

通过限制在应用中使用颜色，接收颜色的区域（如文本、图像和按钮等单个元素）将获得更多关注。

由于本产品的内容是多色的，黑色浮动动作按钮与鲜艳的色彩形成鲜明对比，使其更加明显。

灰度调色板最适合让摄影和文本脱颖而出。

5. 品牌

您的品牌可以使用颜色来强调其存在感。品牌颜色可以在关键时刻使用，以将这些颜色与特定操作和信息相关联的方式使用。

品牌色彩应用可以是大胆而傲慢的，微妙而精致的，或者介于两者之间的任何地方。你的品牌对颜色的个人方法应反映在你的应用中。

5.1. 大胆使用颜色

希望传达能量和兴奋感的品牌通常以大胆的方式使用颜色。他们的应用程序应反映相同的方法，同时保持内容的易读性和整体可用性。

即使是具有更微妙的色彩方法的品牌也可以大胆的使用色彩。

5.2. onboarding

载入期间使用的颜色可以将内容与品牌联系起来。

5.3. 功能发现

新功能可以突出显示，以确保用户通过使用颜色来引导用户关注来看到它们。

6. 颜色的微妙使用

品牌可以以微妙的方式使用颜色，无论这意味着传达复杂性，强调内容还是以其他方式适合内容。使用具有微妙色彩的颜色时，请确保交互式区域和状态更改保持可识别且易于查看。

6.1. 占位符 UI

加载屏幕内容时将显示占位符 UI。在此处包含品牌颜色可向用户保证，在加载应用时，他们仍在应用中。

6.2. 进度指标

进度指示器是一个微妙但强大的地方，可以整合品牌颜色，因为它们将应用程序的功能与品牌联系起来。

6.3. 状态更改

状态的变化可以巧妙地加强品牌的存在。

7. 意义

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

7.1. 一致性和上下文

颜色应在产品中一致使用，以便某些颜色始终意味着同样的事情，即使上下文发生变化。还应注意具有当地或文化意义的颜色。例如，警报在某些区域性中通常显示为红色，但在其他区域性中则不然。

7.2. 状态

颜色可以提供有关应用、其组件和元素的状态的信息。这包括：

元素或组件的当前状态，例如按钮是启用还是禁用
对应用程序、组件或元素的状态更改
在指示状态变化时，颜色应该很明显，因为可能会错过颜色的细微差异。最好以多种方式指示状态更改，例如显示图标或移动元素的位置。

7.3. 标识交互

若要强调特定交互，请相对于用户未交互的内容，对用户与之交互的内容使用强烈的颜色对比。

7.4. 指示选择

要强调所选元素，请在这些元素上使用强烈的颜色对比度。此列表中的电子邮件使用品牌颜色来指示所选的电子邮件,...

8. 文本易读性

颜色在文本易读性中起着重要作用。

8.1. WCAG 标准

所有文本都应清晰易读，并符合accessibility标准 The Web Content Accessibility Guidelines （WCAG 2.0） 级别 AA 要求普通文本的文本和背景之间的颜色对比度为 4.5：1，大文本的颜色对比度为 3：1。

若要了解有关颜色、对比度和辅助功能设计的详细信息，请阅读Material Design Accessibility。

8.2. 文本背景

8.2.1. 彩色背景上的文本

建议在浅色背景上使用黑色文本，在深色背景上使用白色文本。如果你的应用同时具有浅色和深色主题，请确保文本以与每个主题形成对比色。

彩色背景或版式还会更改有关文本不透明度和不同文本状态的规则。

8.2.2. 使用文本不透明度(opacity)

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

例如，在绿色背景上以 75% 不透明度显示的黑色文本会使文本呈现黑色外观，并带有绿色提示。

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

将颜色黑色放置在绿色背景前面，以降低的不透明度
确定生成的深绿色的十六进制值
将该颜色的十六进制值用于文本
在这种情况下，如果文本后面的曲面变色，则还必须更新十六进制颜色。
在彩色表面上使用透明版本的黑色以保持易读性。

8.2.3. 浅色背景上的深色文本

浅色背景上的深色文本（此处显示为 #000000，#FFFFFF）应用以下不透明度级别：

高强调文本的不透明度为 87%
中等加重文本和提示文本的不透明度为 60%
禁用文本的不透明度为 38%

8.3. 彩色文本和背景

应谨慎使用彩色文本以引起注意并进行选择性强调。理想情况下，应为标题、按钮和链接等文本元素保留彩色文本。

使用Material color tool可以确定文本上使用的某些前景色是否符合背景色的辅助功能标准。

8.4. 文本类型

8.4.1. 帮助文本

帮助程序文本提供有关字段输入的上下文，例如如何使用输入。它可以采用品牌颜色，但应根据WCAG标准确定清晰易读。

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

高重音辅助工具：此文本使用十六进制值 #000000，不透明度为 87%
默认颜色帮助程序文本：此文本使用十六进制值 #000000，不透明度为 60%
默认错误帮助程序文本：此文本使用十六进制值 #B00020 100% 不透明度

8.4.2. 选择文本

为了反映品牌，选择文本可以使用主要或次要颜色的强调文字。选择文本应与所选颜色相对清晰，并且...

选择文本应与所选颜色相对清晰，并且所选颜色应与背景色形成对比。或者，您可以显示轮廓、运动、复选标记图标或其他文本处理以指示选择文本。

有关对比度的更多信息（或尝试使用颜色对比度分析仪），请访问 webaim.org。

8.4.3. 图标和其他符号

图标和其他元素不需要满足WCAG易读性标准，但应尽可能可见，以指示功能或传达信息。

例如，深色图标 （#000000） 或浅色背景（#FFFFFF）上的其他元素可以应用以下不透明度级别：

活动图标的不透明度为 87%
非活动图标的不透明度为 60%
禁用图标的不透明度为 38%

9. 深色主题

深色主题是主要显示深色表面的低光 UI。

9.1. 深色主题用法

深色主题在大多数 UI 中显示深色表面。它被设计为默认（或浅色）主题的补充模式。

深色主题会降低设备屏幕发出的亮度，同时仍满足最低色彩对比度。它们通过减少眼睛疲劳，根据当前照明条件调整亮度以及促进在黑暗环境中使用屏幕来帮助改善视觉人体工程学 - 同时节省电池电量。受益于OLED屏幕的设备在一天中的任何时间关闭黑色像素的功能。

9.2. 深色主题原则

• 用灰色变暗

使用深灰色（而不是黑色）来表示深度范围更广的环境中的标高和空间。

• Color with accents

在深色主题 UI 中应用有限的颜色，因此大部分空间仍然保持深色表面。

• 节约能源

在需要能源效率的产品（例如带有OLED屏幕的设备）中，通过减少亮像素的使用来节省电池寿命。

9.3. 深色主题属性

Material设计深色主题由以下属性定义：

对比度：深色表面和 100% 白色正文文本的对比度至少为 15.8：1
深度：在较高的标高级别，组件通过显示较浅的表面颜色来表示深度
不饱和度：原色不饱和，因此它们在所有标高级别上都通过了 Web 内容可访问性指南 （WCAG） AA 标准，即至少为 4.5：1（与正文文本一起使用时）
颜色限制：大型表面使用深色表面颜色，颜色强调色有限（浅色、不饱和色和亮色饱和色）

9.4. 深色主题刨析

深色主题 UI 主要使用深色表面，颜色强调色稀疏。它们发出的光水平较低，同时保持了高标准的可用性。

1. Background (0dp elevation surface overlay)
2. Surface (with 1dp elevation surface overlay)
3. Primary
4. Secondary
5. On background
6. On Surface
7. On Primary
8. On Secondary

9.5. 深色主题行为

可以使用显示的控件打开（或关闭）深色主题：

突出显示，使用图标切换打开或关闭主题
降低突出度，在菜单或应用程序的设置中放置一个开关

10. Material Design 系列文章

最新更新以及更多Material Design相关文章请访问 鹏叔的技术博客空间-Material Design

11. 参考文档

Text legibility

Material Design color system