通知卡片

通知卡片用于传达来自系统或应用程序的少量及时信息。

这些专为 Android Automotive OS 设计的卡片旨在最大程度地减少驾驶员的注意力分散。卡片共有三个基本版本:

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

在这些版本中,根据消息类别的不同,设计也会略有差异。例如,来电通知和导航通知的按钮和图标就有所不同。

解剖学

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

  • HUN 卡片:此版本比通知中心卡片更宽,并显示在当前屏幕顶部,直到被关闭。
  • 通知中心卡片:此版本比 HUN 卡片更窄,并与其他此类卡片一起以垂直列表的形式显示在通知中心。
  • 分组通知卡片:此版本的通知中心卡片将多个相关通知合并到一个卡片中,并提供展开控件以显示各个通知。

这些版本按消息类型划分的变体显示在“样式”中。

此处显示的是 HUN 和通知中心版本的同一张通知卡,包含以下元素:
1. 标题
2. 内容(带或不带可选消息预览,车辆行驶时可隐藏)
3. 行动
4. 大图标


此处显示的是分组通知卡的折叠和展开两种版本,包含以下元素:
1. 标题
2. 内容
3. 展开/折叠操作
4. 展开/折叠指示器

规格 – HUN 卡

标准匈牙利

带有头像的 HUN

发送消息 HUN 预览

向 HUN 发送多条消息

大图 HUN

规格 – 通知中心卡片

标准通知

带有预览的消息通知

包含多条消息的消息通知

单次操作通知

规格 – 分组通知卡

分组通知 – 已折叠

分组通知 - 展开

缩放布局

这些参考布局展示了如何调整通知以适应不同宽度和高度的屏幕。请注意,所有像素值均为渲染像素,未进行任何下采样或上采样。

标注图标
布局
适用于各种屏幕尺寸的边距、关键线和内边距。

标准宽度屏幕

匈牙利卡。


通知中心卡片。

分组通知卡(已折叠)。

分组通知卡(展开)。

宽屏

匈牙利卡。


通知中心卡片。

分组通知卡(已折叠)。

分组通知卡(展开)。

超宽屏和超宽屏

匈牙利卡。


通知中心卡片。

分组通知卡(已折叠)。

分组通知卡(展开)。

不同高度屏幕上通知的垂直间距

本节中的垂直间距规格仅适用于 HUN 卡。

短屏幕

匈牙利卡。

高屏和标准高度屏幕

匈牙利卡。

款式

排版

字体样式字体重量大小(dp)
正文 1机器人常规的32
3M 机身机器人中等的24
身体 3机器人常规的24

颜色

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

浆纱

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

示例

HUN卡:通话、短信、车辆警告和导航。
通知中心卡片:来电、短信和车辆警告。
分组通知卡片:消息,展开和折叠 - 日期。
分组通知卡片:消息,展开和折叠 - 夜间。

运动

以下动作是通知体验的重要组成部分:

  • 匈牙利抵达运动
  • 滑动即可关闭通知
  • 分组通知展开和折叠动作

匈牙利人抵达

通知图标从屏幕顶部滑下的动作可以帮助用户注意到它的到来,如果通知中心是以下拉面板的形式实现的,它还可以提示用户可以通过向下滑动来访问通知。

滑动即可关闭

当用户在通知上左右滑动时,拖动动作会提供视觉确认,表明该通知正在被关闭,然后下一个通知的向上滑动动作会填补列表中的空白。

分组通知展开和折叠

分组通知卡片向下展开,可以实现从折叠状态到展开状态的平滑过渡。