通知卡会及时传达来自系统或应用的少量信息。
这些适用于 Android Automotive OS 的卡片的设计旨在最大限度地减少让驾驶员分心的因素。这些卡片有三种基本版本:
- 浮动通知 (HUN) 卡片:用于在当前屏幕上短暂显示的通知
- 通知中心卡片:用于通知中心内列出的通知
- 分组通知卡片:将多个通知中心卡片合并到一张卡片中
在这些版本中,设计也可能会略有不同,具体取决于消息的类别。例如,来电通知使用的按钮和图标与导航通知不同。
解剖学
通知卡片是一个灵活的组件,可以包含多种元素。它有三个主要版本:
- HUN 卡片:此版本比通知中心卡片更宽,会显示在当前屏幕顶部,直到将其关闭
- 通知中心卡片:此版本比 HUN 卡片窄,并与其他此类卡片一起显示在通知中心内,以垂直列表的形式显示
- 分组通知卡片:此版本的通知中心卡片将多个相关通知整合到一个卡片中,并提供用于展开即可显示单个通知的控件
这些版本的变体(按消息类型划分)显示在样式中。
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-hun-std.png?authuser=0000&hl=cs)
1. 标题
2. 内容(含和不带有可选消息预览,可在汽车行驶时隐藏)
3. 行动
4. 大图标
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-grouped.png?authuser=0000&hl=cs)
1. 标题
2. 内容
3. 展开/收起操作
4. 展开/收起指示器
规范 - HUN 卡
标准 HUN
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hun.png?authuser=0000&hl=cs)
有头像的 HUN
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hunwavatar.png?authuser=0000&hl=cs)
向 HUN 发送消息并进行预览
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview.png?authuser=0000&hl=cs)
向 HUN 显示多条消息
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview-multiple.png?authuser=0000&hl=cs)
大图片 HUN
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-largeimg.png?authuser=0000&hl=cs)
规范 – 通知中心卡片
标准通知
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-avatar.png?authuser=0000&hl=cs)
包含预览的消息通知
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview.png?authuser=0000&hl=cs)
包含多条消息的消息通知
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview-multi.png?authuser=0000&hl=cs)
单一操作通知
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-onebutton.png?authuser=0000&hl=cs)
规范 - 分组通知卡片
分组通知 - 已收起
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-collapsed.png?authuser=0000&hl=cs)
分组通知 - 展开
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-expanded.png?authuser=0000&hl=cs)
缩放布局
这些参考布局展示了如何调整通知以适应各种宽度和高度的屏幕。(宽度和高度类别在布局部分进行定义。)请注意,在发生任何下采样或上采样之前,所有像素值都位于渲染的像素中。
标准宽度屏幕
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-std.png?authuser=0000&hl=cs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-std.png?authuser=0000&hl=cs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-std.png?authuser=0000&hl=cs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-std.png?authuser=0000&hl=cs)
宽屏
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-wide.png?authuser=0000&hl=cs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-wide.png?authuser=0000&hl=cs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-wide.png?authuser=0000&hl=cs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-wide.png?authuser=0000&hl=cs)
超宽屏幕和超宽屏幕
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-xwide.png?authuser=0000&hl=cs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-xwide.png?authuser=0000&hl=cs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-xwide.png?authuser=0000&hl=cs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-xwide.png?authuser=0000&hl=cs)
在各种高度的屏幕上,通知的垂直间距
本部分中的垂直间距规范仅适用于 HUN 卡片。如需了解通知中心卡片的垂直间距,请参阅通知中心规范。
短屏幕
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-short.png?authuser=0000&hl=cs)
高和标准高度屏幕
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-stdtall.png?authuser=0000&hl=cs)
风格
排版
类型样式 | 字体 | 重量 | 尺寸 (dp) |
---|---|---|---|
正文 1 | Roboto | 普通 | 32 |
正文 3 M | Roboto | 媒介 | 24 |
正文 3 | Roboto | 普通 | 24 |
颜色
元素 | 颜色(日间模式) | 颜色(夜间模式) |
---|---|---|
主要类型 / 图标 | White | 白色 @ 88% |
次要类型 | 白色 @ 72% | 白色 @ 60% |
次要图标 | 第三方口音 | 第三方口音 |
分隔线 | 白色 22% | 白色 12% |
卡片背景 | 灰色 868 | 灰色 900 |
渐变纱罩 | 黑色 100% - 0% | 黑色 100% - 20% |
大小
元素 | 尺寸 (dp) |
---|---|
主图标 | 44 |
次要图标 | 36 |
中型头像 | 76 |
圆角半径 (R2) | 8 |
示例
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-examples.png?authuser=0000&hl=cs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-examples.png?authuser=0000&hl=cs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-day.png?authuser=0000&hl=cs)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-night.png?authuser=0000&hl=cs)
动作
以下动作是通知体验的重要组成部分:
- HUN 到达动作
- 关闭通知的滑动动作
- 分组通知展开和收起动作
HUN 抵达
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hud-auto-dismiss-new.gif?authuser=0000&hl=cs)
滑动关闭
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-appear-dismiss-new.gif?authuser=0000&hl=cs)
展开和收起分组通知
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-expand-group-2.gif?authuser=0000&hl=cs)