Las tarjetas de notificaciones comunican pequeñas cantidades de información oportuna del sistema o de una app.
El diseño de estas tarjetas para el SO Android Automotive tiene como objetivo minimizar las distracciones de los conductores. Las tarjetas se presentan en tres versiones básicas:
- Tarjeta de notificación de atención (HUN): Se usa para las notificaciones que aparecen brevemente en la pantalla actual.
- Tarjeta del Centro de notificaciones: Se usa para las notificaciones que aparecen en el Centro de notificaciones.
- Tarjeta de notificación agrupada: Combina varias tarjetas del Centro de notificaciones en una sola tarjeta.
Dentro de estas versiones, los diseños también pueden variar levemente según la categoría del mensaje. Por ejemplo, las notificaciones de llamadas tienen íconos y botones diferentes a los de las notificaciones de navegación.
Anatomía
La tarjeta de notificación es un componente flexible que puede incluir una variedad de elementos. Tiene tres versiones principales:
- Tarjeta HUN: Esta versión es más ancha que la tarjeta del Centro de notificaciones y aparece en la parte superior de la pantalla actual hasta que se descarta.
- Tarjeta del Centro de notificaciones: Esta versión es más angosta que la tarjeta HUN y aparece con otras tarjetas similares en el Centro de notificaciones, en una lista vertical.
- Tarjeta de notificaciones agrupadas: Esta versión de la tarjeta del Centro de notificaciones combina múltiples notificaciones relacionadas en una tarjeta, con controles que permiten expandirse para mostrar las notificaciones individuales.
Las variantes de estas versiones según el tipo de mensaje se muestran en Estilos.
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-hun-std.png?authuser=7&hl=es-419)
1. Encabezado
2. Contenido (con y sin la vista previa opcional del mensaje, que se puede ocultar mientras el vehículo está conduciendo)
3. Acciones
4. Ícono grande
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-grouped.png?authuser=7&hl=es-419)
1. Encabezado
2. Contenido
3. Acción de expansión o contracción
4. Indicador de expandir o contraer
Especificaciones: tarjeta HUN
HUN estándar
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hun.png?authuser=7&hl=es-419)
HUN con avatar
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hunwavatar.png?authuser=7&hl=es-419)
Enviar un mensaje a la HUN con vista previa
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview.png?authuser=7&hl=es-419)
Enviar varios mensajes a la HUN
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview-multiple.png?authuser=7&hl=es-419)
HUN de imagen grande
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-largeimg.png?authuser=7&hl=es-419)
Especificaciones: tarjeta del Centro de notificaciones
Notificación estándar
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-avatar.png?authuser=7&hl=es-419)
Notificación de mensaje con vista previa
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview.png?authuser=7&hl=es-419)
Notificación de mensaje con varios mensajes
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview-multi.png?authuser=7&hl=es-419)
Notificación de acción única
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-onebutton.png?authuser=7&hl=es-419)
Especificaciones: Tarjeta de notificación agrupada
Notificación agrupada: contraída
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-collapsed.png?authuser=7&hl=es-419)
Notificación agrupada: expandida
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-expanded.png?authuser=7&hl=es-419)
Cómo ajustar diseños
Estos diseños de referencia muestran cómo adaptar las notificaciones para que se adapten a pantallas de varios anchos y alturas. Las categorías de ancho y altura se definen en la sección Diseño. Ten en cuenta que todos los valores de píxeles están en píxeles renderizados, antes de que se realice cualquier reducción o sobremuestreo.
Pantallas de ancho estándar
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-std.png?authuser=7&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-std.png?authuser=7&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-std.png?authuser=7&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-std.png?authuser=7&hl=es-419)
Pantallas panorámicas
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-wide.png?authuser=7&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-wide.png?authuser=7&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-wide.png?authuser=7&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-wide.png?authuser=7&hl=es-419)
Pantallas extraanchos y superanchos
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-xwide.png?authuser=7&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-xwide.png?authuser=7&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-xwide.png?authuser=7&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-xwide.png?authuser=7&hl=es-419)
Espaciado vertical de las notificaciones en pantallas de distintas alturas
Las especificaciones de espacio vertical de esta sección son solo para tarjetas HUN. Para obtener información sobre el espaciado vertical de las tarjetas en el Centro de notificaciones, consulta las especificaciones del Centro de notificaciones.
Pantallas cortas
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-short.png?authuser=7&hl=es-419)
Pantallas altas y de altura estándar
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-stdtall.png?authuser=7&hl=es-419)
Estilos
Tipografía
Estilo de la tipografía | Tipo de letra | Peso | Tamaño (dp) |
---|---|---|---|
Cuerpo 1 | Roboto | Normal | 32 |
Cuerpo 3 M | Roboto | Medio | 24 |
Cuerpo 3 | Roboto | Normal | 24 |
Color
Elemento | Color(modo diurno) | Color (modo nocturno) |
---|---|---|
Tipo principal / íconos | White | Blanco @ 88% |
Tipo secundario | Blanco al 72% | Blanco al 60% |
Ícono secundario | Acento de terceros | Acento de terceros |
Línea divisoria del cabello | Blanco 22% | Blanco 12% |
Fondo de la tarjeta | Gris 868 | Gris 900 |
Lámina de gradientes | Negro 100% -0% | Negro 100% -20% |
Tamaño
Elemento | Tamaño (dp) |
---|---|
Ícono principal | 44 |
Ícono secundario | 36 |
Avatar mediano | 76 |
Radio de esquina redondeada (R2) | 8 |
Ejemplos
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-examples.png?authuser=7&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-examples.png?authuser=7&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-day.png?authuser=7&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-night.png?authuser=7&hl=es-419)
Movimiento
Los siguientes movimientos son una parte importante de la experiencia con las notificaciones:
- Movimiento de llegada de la HUN
- Movimiento de deslizamiento para descartar una notificación
- Movimiento de notificación agrupada para expandir y contraer
Llegada de HUN
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hud-auto-dismiss-new.gif?authuser=7&hl=es-419)
Deslizar para descartar
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-appear-dismiss-new.gif?authuser=7&hl=es-419)
Expandir y contraer una notificación agrupada
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-expand-group-2.gif?authuser=7&hl=es-419)