颜色

Android Automotive OS 色彩策略的基础是“以黑色为基础”的理念。界面颜色以黑色为基准,可以带来更一致的用户体验,避免日间和夜间主题之间出现剧烈的变化。

使用黑色材料进行设计还可以确保与硬件更好地协调,因为汽车内饰和仪表盘通常使用深色材料。

简明指南(TL;DR)

  • 从黑色开始,选择适合白天和夜间驾驶的颜色。
  • 背景与图标或文本之间的对比度至少保持 4.5:1。
  • 尽量少用色彩,但要有目的性。
  • 通过灰度显示海拔高度
  • 利用透明度和不透明度来引导视觉焦点

调色板和渐变

Android Automotive OS 界面的深色主题基于灰度调色板。理想情况下,任何其他颜色都应该降低饱和度,就像 Material Design 调色板中的深色版本一样。

本节包含调色板和不透明度信息,以及提供与每个组件关联的高程级别的灰度值的图表。

标注图标
材料设计
色彩运用和调色板

Android Automotive OS 灰度调色板

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

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

  • 涵盖深色主题 UI 的所有不同使用场景
  • 提供足够的音域,以便通过色调差异来定义等级制度。
灰调调色板
此灰度调色板是 Android Automotive OS 的主要调色板,支持界面的深色主题。

即使在阴影几乎无法察觉的纯黑色背景下,色调差异也能营造出深度错觉。为了提供足够的色调差异,Android Automotive OS 的灰度调色板包含了中灰色。Material Design 中从 Grey 900 开始的灰色过渡到更亮的颜色速度过快;比 Grey 900 浅两级的颜色是 Grey 700,这对于汽车应用场景来说太亮了。

组件立面图
此图显示了各个部件所处的海拔高度。每个海拔高度都有一个对应的灰度值。
日夜模式灰度海拔级别
此图表显示了白天和夜晚模式下不同海拔高度对应的灰度值。

强调色

除了 Android Automotive OS 界面核心的灰度调色板之外,还可以少量使用其他颜色,用于吸引注意力等目的。

目前,Android Automotive OS 只有一个官方强调色,即支持库中称为“汽车强调色”的蓝色。为了提高饱和度和鲜艳度,这种蓝色与标准的 Google 蓝色略有不同。这种调整有助于颜色在深色表面上更协调地呈现。

蓝色汽车装饰色示例
Android Automotive OS 中的蓝色“汽车装饰色”比标准的 Google 蓝色饱和度更高,旨在白天和夜晚驾驶时都能在深色主题界面中良好发挥作用。

不透明度-值图

透明度能够营造深度感,并强化 Material Design 的空间模型。为了有效地利用透明度,请根据实际应用场景选择深色或白色的不透明度值。

暗部不透明度值

深色不透明度值最常见的用途是创建幕布(叠加层)。

叠加层的黑色不透明度值

白色不透明度值

这些数值主要用于文本。当背景为彩色时,它们的效果尤其显著。在深色背景上使用纯灰色会显得过于浑浊。

文本的白色不透明度值

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


对比

为了符合 Android Automotive OS 的基本安全准则,背景与图标或文本之间的对比度应至少为 4.5:1。有关对比度如何应用于特定汽车 UI 元素的详细信息,请参阅“使内容易于阅读”

对比

确保所有可读且可操作的内容对比度至少达到 4.5:1。
对比并不

不要让对比度低于 4.5:1,否则会降低驾驶员的安全性。

指导和示例

Android Automotive OS 的深色用户界面简洁明了,色彩运用极少。除了为用户界面元素选择合适的颜色、色调和不透明度值(参见“调色板和渐变”)之外,确保每次使用颜色和渐变都具有实际意义也至关重要。

本节提供关于如何运用透明度、不透明度和颜色来实现各种目标的指导和示例。这些目标包括:

  • 遮蔽背景
  • 保持一致性
  • 建立视觉层级结构,引导用户关注主要操作。
  • 区分列表中的实体

用纱幕遮挡背景

全屏遮罩(叠加层)用于遮盖干扰元素(例如需要用户执行操作的对话框)后面的背景。局部遮罩用于吸引用户注意元素(例如通知)的过渡效果。

白天模式下的全场训练
日间模式下的全幕布(对话框后面)
夜间模式下的全场实战
夜间模式下的全屏遮光(对话框后面)
日间模式下的部分训练
日间模式下部分遮挡物(位于通知后方)
夜间模式下的部分遮光帘
夜间模式下部分遮挡(通知栏后方)

保持色彩一致性

颜色是强化记忆和识别的有力线索。利用颜色,可以在不同屏幕之间创造一致的体验。

视觉颜色识别

为了保持视觉一致性,可以在多个视图中使用相同的颜色来表示同一项目,例如此处逐向导航视图中使用的绿色。
视觉色彩连续性

使用颜色在视觉上连接相关的元素和功能,例如此处所示的红色挂牌 CTA。
应用主题色

在相关元素上使用专辑封面的主色调或应用程序的指定颜色,作为一种持久的视觉提示。例如,暂停按钮周围的圆圈就使用了 Spotify 的绿色。
颜色使用限制

不要随意使用不同颜色来区分同一屏幕内重复出现的组件。谨慎使用颜色,尤其是在颜色没有实际意义的情况下——例如,摘要卡片周围的彩色轮廓线,它们与应用图标的颜色重复了。

建立视觉层次结构

使用白色不透明度值来创建一致且清晰的视觉层次结构。不透明度值为 88、72 和 56 时,对比度恰到好处,既能满足无障碍访问要求,又能在深色背景下营造舒适的阅读环境。夜间模式下,所有白色元素的不透明度均应设置为 96%。

利用不透明度和对比度来维持视觉层次结构的示例

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

不要过度使用全透明度或高对比度值,不要将其应用于过多元素。透明度值的对比对于区分主要信息和次要信息至关重要。