通知卡片

通知卡会及时传送来自系统或应用的少量信息。

这些卡片在 Android Automotive OS 中的设计旨在最大限度地减少对驾驶员的干扰。该卡片有三个基本版本:

  • 浮动通知 (HUN) 卡片:用于在当前屏幕上短暂显示的通知
  • 通知中心卡片:用于通知中心中列出的通知
  • 分组通知卡片:在一张卡片中合并多个通知中心卡片

在这些版本中,设计也可以根据邮件类别稍有不同。例如,来电通知的按钮和图标与导航通知不同。


解剖学

通知卡是一种灵活的组件,可包含各种元素。它有三个主要版本:

  • HUN 卡:此版本比通知中心卡片宽,并显示在当前屏幕的顶部,直到用户将其关闭
  • 通知中心卡片:此版本比 HUN 卡片窄,它与此类卡片一起显示在通知中心内的垂直列表中
  • 分组通知卡片:此版本的“通知中心”卡片将多个相关通知合并成一个卡片,并提供用于展开即可显示单个通知的控件。

样式中显示了这些版本的变体(按消息类型)。

图中显示的是同一通知卡片的 HUN 和通知中心版本,其中包含以下元素:
1. 标题
2. 内容(包含或不包含可选消息预览,可在汽车驾驶时隐藏)
3. 操作
4. 大图标
此图显示了收起版本和展开后版本的分组通知卡片,其中包含以下元素:
1. 标题
2. 内容
3. 展开/收起操作
4. 展开/收起指示符

规范 - HUN 卡

标准 HUN

带头像的 HUN

带有预览的消息 HUN

包含多条消息的消息 HUN

大型图片 HUN


规范 - 通知中心卡片

标准通知

带有预览的消息通知

包含多条消息的消息通知

单一操作通知


规范 - 分组通知卡片

分组通知 - 已收起

分组通知 - 已展开


缩放布局

这些参考布局展示了如何调整通知以适应各种宽度和高度的屏幕。(宽度和高度类别在布局部分定义。)请注意,所有降采样或上采样之前,所有像素值都是渲染的像素。

标准宽度屏幕

HUN 卡
通知中心卡片
分组通知卡片(收起)
分组通知卡片(已展开)

宽屏

HUN 卡
通知中心卡片
分组通知卡片(收起)
分组通知卡片(已展开)

超宽和超宽屏幕

HUN 卡
通知中心卡片
分组通知卡片(收起)
分组通知卡片(已展开)

各种高度的屏幕上通知的垂直间距

本部分中的垂直间距规范仅适用于 HUN 卡。如需了解通知中心内卡片的垂直间距,请参阅通知中心规范

短屏幕

HUN 卡

高屏幕和标准高度屏幕

HUN 卡

样式

Typography(排版)

类型样式 字体 重量 大小 (dp)
正文 1 Roboto 正常 32
身体 3 米 Roboto 24
正文 3 Roboto 正常 24

颜色

元素 颜色(日间模式) 颜色(夜间模式)
主要类型 / 图标 White 白色 @ 88%
次要类型 白色 @ 72% 白人 60%
辅助图标 第三方口音 第三方口音
分界线 白色 22% 白色 12%
卡片背景 灰色 868 灰色 900
渐变纱罩 黑色 100% - 0% 黑色 100% - 20%

尺寸

元素 大小 (dp)
主图标 44
辅助图标 36
中等头像 76
圆角半径 (R2) 8

示例

HUN 卡:来电、消息、汽车警告和导航
通知中心卡:来电、消息和汽车警告
分组通知卡片:消息,展开和收起 - 白天
分组通知卡片:展开和收起 - 夜间

运动

以下动作是通知体验的重要环节:

  • HUN 到达动作
  • 滑动通知即可关闭通知
  • 分组通知展开和收起动作

HUN 送达

HUN 从屏幕顶部向下滑动有助于用户注意到其到来;如果通知中心以下拉通知栏的形式实现,它还提供通过向下滑动访问通知的提示

滑动关闭

当用户在某个通知上向侧面滑动时的拖动动作可提供视觉确认,告知其已被关闭,然后下一个通知的向上动作会填满列表中的相应漏洞

分组通知展开和收起

将分组通知卡片向下拉伸即可实现从收起状态到展开状态的平稳过渡