颜色角色和令牌

Wear Material 3 富有表现力的颜色系统针对关键组件采用了三个强调色层（主色、辅色、第三色），以及两个中性 Surface 层。每个角色都提供一系列具有一致对比度的值，可实现富有表现力且易于访问的颜色组合，从而在任何主题中提供统一的体验。

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

什么是颜色角色？

颜色角色就像按数字涂色的画布上的“数字”。它们是界面元素之间的联系纽带，决定了颜色在界面中的位置。

  • 颜色角色映射到 Material 组件：无论您使用的是静态基准方案还是动态配色，都需要使用这些颜色角色。如果您的产品包含自定义组件，则需要将这些组件正确映射到这组颜色角色。
  • 颜色角色支持无障碍功能：颜色系统基于更易于使用的颜色搭配构建而成。这些颜色对的色彩对比度至少为 3:1。
  • 颜色角色采用令牌化：角色通过令牌在设计和代码中实现。设计令牌表示可重复使用的小设计决策，是设计体系外观样式的一部分。

基本术语

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

  • Surface：用于背景和屏幕上大面积的低强调区域的角色。
  • 主色、辅色、第三色：用于强调或淡化前景元素的强调色角色。
  • 容器：用于作为按钮等前景元素的填充颜色的角色。不应将其用于文本或图标。
  • 开启：以此字词开头的角色表示文本或图标的颜色，在其配对的父级颜色上方显示。例如，“on primary”用于在主填充颜色背景下显示文本和图标。
  • 变体：以此字词结尾的角色是其非变体对的强调度较低的替代项。例如，轮廓变体是轮廓颜色的不太强调的版本。

主要角色

主角色用于整个界面的关键组件，例如边缘贴合按钮、醒目按钮、活动状态以及色调按钮样式的图标。

主要

  1. 主要
  2. On-Primary

请将“主要”角色用于界面中最重要的操作，例如主要按钮或号召性用语。此颜色应醒目且易于识别，以引导用户执行关键互动。

Primary-Dim

  1. Primary-Dim
  2. On-Primary

淡化角色通常用于需要与主要操作在视觉上区分开来，但不需要用户立即注意或互动的元素。

Primary-Container

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

为卡片或模态窗口等背景元素应用主容器，以突出显示部分或所选状态。它有助于吸引用户注意界面中的重要内容或正在进行的活动。

次要角色

辅助角色用于整个界面的关键组件，这些组件不如主角色重要，但仍需要醒目。主色和辅色可以在布局中搭配使用，以实现差异化和聚焦。

辅助

  1. 次要
  2. On-Secondary

使用“辅助”角色可在界面密集的区域中支持操作，例如辅助按钮或补充操作。它可以在复杂布局中保持可见性，同时不会掩盖主要元素。

Secondary-Dim

  1. Secondary-Dim
  2. 次要

Secondary-Dim 角色可为密集区域中的被动元素提供柔和的对比度。它与辅色相得益彰，同时增添了细微的深度，保持了界面的简洁，并帮助用户导航。

Secondary-Container

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

应用 Secondary-Container 可在密集布局中整理次要元素。它可以创建结构和分隔，确保次要内容清晰可辨，但不会占主导地位。

三级角色

第三色角色用于对比强调，可以平衡主色和副色，或者引起用户对某个元素（例如输入字段）的高度关注。第三层级角色还可以帮助指明内容何时发生变化或应突出显示，例如达到目标时。

第三方

  1. 第三
  2. 第三方

第三色用于吸引用户注意关键元素。第三层级的角色对于需要脱颖而出的组件（例如徽章、贴纸或特殊操作元素）特别有效。

Tertiary-Dim

  1. Tertiary-Dim
  2. 第三

对于与第三级操作相关但不需要立即聚焦的按钮或操作，请使用“第三级调暗”角色。

第三级容器

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

将 Tertiary-Container 应用于用于对第三层级相关内容进行分组的背景，例如徽章或贴纸集合。它可以强调第三元素，同时保持界面的平衡和结构。

语义角色

“错误 - 红色”用于指示严重问题，例如错误、删除以及与紧急情况相关的任何内容。它旨在立即引起用户对问题或警告的注意，确保用户能够快速找出需要采取纠正措施的方面。“错误 - 红色”的色调应与背景形成足够的对比度，以符合无障碍标准，确保其清晰可见且与其他状态颜色（例如警告或成功消息）区分开来。

错误

  1. 错误
  2. On-Error

一种具有语义但略带主题色调的红色，表示移除、删除、关闭或关闭操作，例如“滑动以显示”。作为容器替代项添加，比错误淡色略低警报性和紧急性。

Error-Dim

  1. Error-Dim
  2. On-Error

一种具有语义但略带主题色调的红色，表示高优先级错误或紧急操作，例如安全提醒、失败的对话框叠加层或停止按钮。

Error-Container

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

不太显眼的容器颜色，适用于使用错误状态的组件。还可以指示处于活动错误状态（与填充状态相比，互动性较低），例如处于活动状态的紧急情况分享按钮或卡片，或在失败的叠加层对话框中。

Surface 容器和高度

Surface 容器对于定义界面中的深度和高度至关重要，可通过颜色提供结构和层次结构，帮助根据组件的重要性和互动性进行区分。

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

大多数元素的默认容器颜色。它提供中性、适中的高度，因此适用于常规界面组件。

Surface-Container-High

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

非常适合需要位于 Surface-Container 之上或与 Surface-Container 结合使用的高强调度组件。这种颜色有助于突出界面中的关键区域并建立层次结构。