颜色

Android Automotive OS 的颜色策略基础是“从黑色构建”这一理念。将界面颜色设置为黑色可以实现更加一致的用户体验,在日夜主题之间没有明显变化。

采用黑色建造还有助于确保与硬件更加契合,因为汽车内饰和仪表板中通常使用深色材料。

指南概览 (TL;DR)

  • 从黑色选择颜色,日夜皆宜
  • 背景与图标或文本的对比度至少应为 4.5:1
  • 有目的且最少使用颜色
  • 以灰度模式显示海拔
  • 利用透明度和不透明度引导视觉焦点

调色板和渐变

Android Automotive OS 界面的深色主题基于灰度调色板。理想情况下,任何其他颜色的强度都应该降低,如 Material Design 调色板中的深色变体。

此部分包含调色板和不透明度信息,以及提供每个组件相关海拔的灰度值的图表。

Android Automotive OS 灰度调色板

Android Automotive OS 灰度调色板用于文本和图标等元素,旨在满足驾驶环境的独特要求。

此调色板需要足够多样化,以便:

  • 涵盖深色主题界面的所有不同用例
  • 提供足够的范围,以通过色调差异定义层次结构
灰色调色板
此灰度调色板是 Android Automotive OS 的主调色板,支持界面的深色主题。

即使在无法感知阴影的纯黑色背景中,色调差异也会产生深度错觉。为了提供足够的色调差异,Android Automotive OS 灰度调色板包含中灰。Material Design 从灰色 900 开始的灰色颜色过快地接近较明亮的颜色;颜色较浅的两步颜色将是灰色 700,它在自动环境下过于明亮。

组件高度图
此图表显示了各种组件所依赖的高度。每个海拔高度都有一个关联的灰色值。
日间和夜间模式灰度海拔
此图表显示了日间模式和夜间模式下的各种海拔高度关联的灰色值

强调色

除了 Android Automotive OS 界面核心的灰度调色板之外,也可谨慎地使用其他颜色(例如绘制焦点)。

目前,Android Automotive OS 有一种官方强调色,即蓝色阴影,在支持库中称为“汽车强调色”。为了提高饱和度和自然饱和度,该蓝色会与标准的 Google 蓝色稍微偏移。这种偏移有助于让颜色在深色表面看起来更舒适。

蓝色汽车强调色示例
与标准的 Google 蓝色相比,Android Automotive OS 中的蓝色“汽车强调色”更饱和,无论白天还是夜间驾驶时,都能在深色主题下顺畅使用。

不透明度值图表

透明度可以传达一种深度感,并强化 Material Design 空间模型。为了有效地使用透明度,请根据您的用例选择深色或白色不透明度值。

深色不透明度值

对于深色不透明度值,最常见的用途是制作纱罩(叠加层)。

叠加层的黑色不透明度值

白色不透明度值

这些值主要用于文本。当背景有颜色时,它们尤其有效。在深色背景上使用纯灰色看起来过于模糊。

文本的白色不透明度值

如需查看有关如何在纱罩和文本层次结构中使用不透明度的示例,请参阅指南和示例


对比度

为了符合 Android Automotive OS 基本安全准则,背景与图标或文本之间的对比度应至少为 4.5:1。如需详细了解对比度如何应用于特定车载界面元素,请参阅让内容易于阅读

对比度

正确做法

确保所有可读且可操作的内容的对比度不低于 4.5:1
不对比度

错误做法

不要让对比度低于 4.5:1,以降低驾驶员的安全

指南和示例

Android Automotive OS 的深色界面简洁清爽,很少使用颜色。除了为界面元素使用适当的颜色、色调和不透明度值(请参阅调色板和渐变)之外,请务必确保每种颜色和颜色渐变都有自己的用途。

本部分提供了相关指南和示例,可帮助您通过应用透明度、不透明度和颜色来实现各种目标。这些目标包括:

  • 背景遮挡
  • 保持一致性
  • 建立视觉层次结构,将用户注意力集中在主要操作上。
  • 区分列表中的实体

使用纱罩遮挡背景

全屏纱罩(叠加层)用于遮盖破坏性元素背后的背景,例如需要用户执行操作的对话框。部分纱罩用于吸引用户注意通知等元素的过渡。

日间模式下的全纱罩
夜间模式下的全纱罩(在对话框卡片后面)
夜间模式下的全纱罩
在夜间模式下,全纱罩(在对话框卡片后面)
日间模式:部分纱罩
日间模式下部分纱罩(显示在通知后面)
夜间模式下部分纱罩
夜间模式下部分纱罩(显示在通知后面)

保持颜色一致性

颜色是强化记忆和识别力的有力提示。使用这种格式可为不同屏幕打造一致的体验。

视觉颜色识别

正确做法

在多个视图中对同一项使用相同的颜色(例如,此处为精细导航视图采用绿色),以保持视觉连续性
视觉色彩连续性

正确做法

使用颜色直观地将相关元素和功能联系起来,例如此处显示的红色挂断 CTA
永久性应用强调色

正确做法

使用专辑封面的正文色或应用为相关元素指定的颜色,作为一种持续可见的视觉可见内容。在该示例中,暂停按钮周围的圆圈采用 Spotify 绿色强调。
颜色使用限制

错误做法

请勿使用不同的颜色来随意区分同一屏幕中的重复组件。谨慎使用无法带来价值的颜色,例如摘要卡周围的彩色轮廓,这些轮廓与应用图标的颜色重复。

建立视觉层次结构

使用白色不透明度值可创建一致且强烈的视觉层次结构。不透明度值 (88、72 和 56) 包含的对比度足以满足无障碍功能要求,同时在深色背景下打造舒适的阅读环境。对于夜间模式,使用全白的 96% 不透明度。

保持视觉层次结构的不透明度和对比度示例

正确做法

使用不同的不透明度和对比度值来保持视觉层次结构。
不透明度和对比度限制

错误做法

不要因为过度使用完全不透明度或对比度的值而将这些值应用于过多元素。需要设置不透明度值的对比度来区分主要信息和次要信息。