颜色角色和令牌

Wear Material 3 Expressive 颜色系统为关键组件使用了三个强调色层（主色、次色、第三色）和两个中性图面层。每个角色都提供一系列具有一致对比度的值，从而实现富有表现力且易于访问的颜色组合，以便在任何主题中获得统一的体验。

带有角色的颜色主题示例。

什么是颜色角色？

颜色角色就像数字填色画布中的“数字”。它们是 UI 元素与颜色位置之间的连接组织。

  • 颜色角色映射到 Material 组件：无论您使用的是静态基线方案还是动态颜色，您都会使用这些颜色角色。如果您的产品包含自定义组件，则需要将它们正确映射到这组颜色角色。
  • 颜色角色支持无障碍功能：该颜色系统基于更易于访问的颜色配对构建。这些颜色配对可提供至少 3:1 的颜色对比度。
  • 颜色角色被令牌化：角色通过令牌在设计和代码中实现。设计令牌表示设计系统视觉样式的一部分，是一个小型可重用设计决策。

基本术语

以下是您将在颜色角色名称中看到的一些关键术语

  • 图面 (Surface)： 用于背景和屏幕上较大、低强调区域的角色。
  • 主色 (Primary)、次色 (Secondary)、第三色 (Tertiary)：用于强调或弱化前景元素的强调色角色。
  • 容器 (Container)：用作按钮等前景元素填充色的角色。不应将其用于文本或图标。
  • On：以该术语开头的角色表示在其配对父颜色之上的文本或图标的颜色。例如，on primary 用于主填充色上的文本和图标。
  • Variant：以该术语结尾的角色提供了对其非变体配对的较低强调替代方案。例如，outline variant 是 outline 颜色的一种较弱强调版本。

主色角色

主色角色用于 UI 中的关键组件，例如 Edge Hugging 按钮、突出按钮、活跃状态以及色调按钮样式上的图标。

Primary

  1. Primary
  2. On-Primary

将 Primary 角色用于 UI 中最重要的操作，例如主按钮或号召性用语。此颜色应突出且易于识别，以引导用户进行关键交互。

Primary-Dim

  1. Primary-Dim
  2. On-Primary

Dim 角色通常用于需要与主操作在视觉上有所区别，但不需要用户立即注意或交互的元素。

Primary-Container

  1. Primary-Container
  2. On-Primary-Container

将 Primary Container 应用于卡片或模态框等背景元素，以突出显示部分或选定状态。它有助于吸引对 UI 中重要内容或正在进行的活动的注意。

次色角色

次色角色用于 UI 中的关键组件，这些组件不如主色角色重要，但仍需要突出。主色和次色可以在布局中一起使用，以创建区分和焦点。

Secondary

  1. Secondary
  2. On-Secondary

在 UI 密集区域中使用 Secondary 角色进行辅助操作，例如辅助按钮或补充操作。它在复杂布局中保持可见性，同时不掩盖主要元素。

Secondary-Dim

  1. Secondary-Dim
  2. Secondary

Secondary-Dim 角色为密集区域中的被动元素提供了柔和的对比度。它补充了次色，同时增加了微妙的深度，保持 UI 整洁并帮助用户导航。

Secondary-Container

  1. Secondary-Container
  2. On-Secondary-Container

将 Secondary-Container 应用于密集布局中的辅助元素组织。它创建结构和分隔，确保辅助内容可区分但不是主导地位。

第三色角色

第三色角色用于对比强调色，以平衡主色和次色，或提高对输入字段等元素的关注度。第三色角色还可以帮助指示内容何时发生变化或何时应突出显示，例如达成目标时。

Tertiary

  1. Tertiary
  2. On-Tertiary

Tertiary 角色用于吸引对关键元素的注意。第三色角色对于需要突出显示的组件尤其有效，例如徽章、贴纸或特殊操作元素。

Tertiary-Dim

  1. Tertiary-Dim
  2. Tertiary

将 Tertiary Dim 角色用于与第三色操作相关但不需立即关注的按钮或操作。

Tertiary-Container

  1. Tertiary-Container
  2. On-Tertiary-Container

将 Tertiary-Container 应用于分组第三色相关内容的背景，例如徽章或贴纸集合。它强调第三色元素，同时保持 UI 中的平衡和结构。

语义角色

Error-Red 用于指示错误、删除和任何与紧急情况相关的关键问题。它旨在立即引起对问题或警告的注意，确保用户能够快速识别需要采取纠正措施的区域。Error-Red 的色调应与背景保持足够的对比度以满足无障碍标准，确保其清晰可见并与其他状态颜色（如警告或成功消息）区分开来。

Error

  1. Error
  2. On-Error

一种语义上略带主题色调的红色，用于指示移除、删除、关闭或取消操作，例如滑动显示。作为容器替代方案添加，其警报性和紧急性略低于 error-dim 颜色。

Error-Dim

  1. Error-Dim
  2. On-Error

一种语义上略带主题色调的红色，用于指示高优先级的错误或紧急操作，例如安全警报、失败的对话框叠加层或停止按钮。

Error-Container

  1. Error-Container
  2. On-Error-Container

用于使用错误状态的组件的、不太突出的容器颜色。还可以指示一个活跃的错误状态，其交互性低于填充状态，例如活跃的紧急共享按钮或卡片，或失败的叠加对话框上。

图面容器和海拔

图面容器是定义 UI 深度和海拔的关键，通过颜色提供结构和层次，帮助区分组件的重要性及其交互方式。

Surface-Container-Low

  1. Surface-Container-Low
  2. On-Surface
  3. On-Surface-Variant

非常适用于需要位于 Surface-Container 下方的展开式容器，例如通知中的展开式卡片。也可用于非交互式卡片，其中内容仍然受益于容器。

Surface-Container

  1. Surface-Container
  2. On-Surface
  3. On-Surface-Variant

大多数元素的默认容器颜色。它提供中等的中性海拔，适用于通用 UI 组件。

Surface-Container-High

  1. Surface-Container-High
  2. On-Surface
  3. On-Surface-Variant

非常适用于需要位于 Surface-Container 之上或与之结合使用的高强调组件。这种颜色有助于在 UI 中关键区域带来焦点和层次结构。