颜色

Wear OS 的 Material Design 使用较深的调色板。具体来说,您的应用和图块必须使用黑色背景。

配色方案

Wear OS 配色方案基于基准 Material Design 颜色主题 创建。您可以直接使用该主题,也可以针对您的应用进行自定义。

此主题包括以下内容的默认颜色:

  • 主要颜色和次要颜色
  • 主要颜色和次要颜色的变体
  • 其他 UI 颜色,例如背景、Surface、错误、排版和图标的颜色

colors

深色主题

所有深色主题颜色都应显示对比度足够的元素,以满足 WCAG AA 标准,即应用于所有高度 Surface 时,正文文本的对比度至少为 4.5:1。

使用低饱和度颜色以实现无障碍功能

深色主题应避免使用饱和颜色,因为它们不符合 WCAG 无障碍功能标准中针对深色 Surface 上正文文本至少 4.5:1 的对比度要求。饱和颜色在深色背景下还会产生视觉振动,可能导致眼睛疲劳。建议使用低饱和度颜色作为更易读的替代方案。

图 1. 调色板中饱和度较低的颜色可提高易读性。

图 2. 避免在深色背景上使用饱和颜色。

主要颜色

主要颜色是应用屏幕和组件中最常显示的颜色。基准 Material Design 深色主题使用 200 色调作为主要颜色。这符合 WCAG AA 标准,即在所有高度 Surface 上,普通文本的对比度至少为 4.5:1。

图 3. 深色主题中的主要调色板示例。1. 主要颜色指示器 2. 色调变体

次要颜色

次要颜色可用于突出显示 UI 中的特定部分。在深色主题中,可以将次要颜色去饱和,以满足 4.5:1 的对比度要求。

图 4 中,1) 表示次要颜色指示器,2) 表示色调变体。

图 4. 深色主题中的次要调色板示例。

强调色

在深色主题中,深色 Surface 占据了 UI 的大部分区域。强调色通常是浅色(去饱和的柔和色调)或亮色(饱和的鲜艳色调)。这有助于突出显示需要强调的元素。请谨慎使用强调色来突出显示关键元素,例如文本或按钮。

查找强调色 使用调色板生成器创建或查看颜色主题。调色板生成器还会创建色调调色板,这些是根据主要颜色和次要颜色生成的从浅到深的颜色变化范围。为您的深色主题选择其中的变体。

图 5 中,1) 表示默认主题主要颜色指示器,2) 表示深色主题主要颜色指示器。

图 5. 为了在深色主题中提供更大的灵活性和可用性,建议使用较浅的色调(200-50),而不是饱和度较高的色调(900-500)。

对于 UI 的大部分区域,例如背景颜色,请使用较深的颜色光谱。将较浅的颜色保留用于强调元素和 UI 元素。