Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
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.
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.
Aquí se muestran las versiones de HUN y del Centro de notificaciones de la misma tarjeta de notificación, con los siguientes elementos:
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
Aquí se muestra una tarjeta de notificaciones agrupadas en sus versiones contraídas y expandida, que incluye los siguientes elementos:
1. Encabezado
2. Contenido
3. Acción de expansión o contracción
4. Indicador de expandir o contraer
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.
Tarjeta de HUN
Tarjeta del Centro de notificaciones
Tarjeta de notificación agrupada (contraída)
Tarjeta de notificación agrupada (expandida)
Pantallas panorámicas
Tarjeta de HUN
Tarjeta del Centro de notificaciones
Tarjeta de notificación agrupada (contraída)
Tarjeta de notificación agrupada (expandida)
Pantallas extraanchos y superanchos
Tarjeta de HUN
Tarjeta del Centro de notificaciones
Tarjeta de notificación agrupada (contraída)
Tarjeta de notificación agrupada (expandida)
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.
Tarjetas HUN: Llamada, Mensaje, Advertencia del vehículo y Navegación
Tarjetas del Centro de notificaciones: Llamada, Mensaje y Advertencia del vehículo
Tarjetas de notificación agrupadas: Mensajes, expandidas y contraídas - día
Tarjetas de notificación agrupadas: Mensajes, expandidos y contraídos - noche
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
El movimiento de una HUN que se desliza hacia abajo desde la parte superior de la pantalla ayuda a los usuarios a notar su llegada. Además, brinda sugerencias para acceder a las notificaciones deslizando el dedo hacia abajo si el Centro de notificaciones está implementado como panel desplegable.
Deslizar para descartar
El movimiento de arrastre cuando un usuario se desliza de lado sobre una notificación proporciona una confirmación visual de que se está descartando. Luego, el movimiento hacia arriba de la siguiente notificación llena el agujero de la lista.
Expandir y contraer una notificación agrupada
Hacer que la tarjeta de notificaciones agrupadas se extienda hacia abajo proporciona una transición fluida del estado contraído al expandido
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-07-25 (UTC)"],[[["\u003cp\u003eNotification cards in Android Automotive OS are designed to minimize driver distraction and come in three versions: Heads-up, Notification Center, and Grouped-notification.\u003c/p\u003e\n"],["\u003cp\u003eThese cards are flexible components with elements like headers, content, actions, and icons, and their layout adapts to different screen sizes for optimal viewing.\u003c/p\u003e\n"],["\u003cp\u003eStyling includes specific typography, color palettes, and sizing for elements like icons and avatars to maintain consistency and readability.\u003c/p\u003e\n"],["\u003cp\u003eMotion design is incorporated for Heads-up arrival, swipe-to-dismiss, and grouped-notification expand/collapse for intuitive user interaction.\u003c/p\u003e\n"],["\u003cp\u003eExamples are provided for various notification types like calls, messages, car warnings, and navigation across different card versions and display modes.\u003c/p\u003e\n"]]],[],null,["# Notification card\n\n\u003cbr /\u003e\n\nNotification cards communicate small amounts of timely information from the system or from an app.\n\nThe design of these cards for Android Automotive OS is intended to minimize distraction for drivers. The cards come in three basic versions:\n\n- **Heads-up notification (HUN) card:** Used for a notification that appears briefly over the current screen\n- **Notification Center card:** Used for notifications listed in the Notification Center\n- **Grouped-notification card:** Combines multiple Notification Center cards in one card\n\nWithin these versions, designs can also vary slightly depending on the category of the message. For example, call notifications have different buttons and icons than navigation notifications. \n[Notification Center specs\nSpecs, style guidelines, and more](/cars/design/gas-customization/specs/notification-center-spec)\n\n*** ** * ** ***\n\nAnatomy\n-------\n\nThe notification card is a flexible component that can include a variety of elements. It has three main versions:\n\n- **HUN card:** This version is wider than the Notification Center card and appears on top of the current screen until dismissed\n- **Notification Center card:** This version is narrower than the HUN card and appears with other such cards in the Notification Center, in a vertical list\n- **Grouped-notification card:** This version of the Notification Center card combines multiple related notifications in one card, with controls for expanding to show the individual notifications\n\nVariants of these versions by message type are shown in [Styles](#styles).\nShown here are HUN and Notification Center versions of the same notification card, featuring the following elements: \n1. Header \n2. Content (with and without optional message preview, which can be hidden when the car is driving) \n3. Actions \n4. Large icon Shown here is a grouped-notification card in both its collapsed and expanded versions, featuring the following elements: \n1. Header \n2. Content \n3. Expand/collapse action \n4. Expand/collapse indicator\n\n*** ** * ** ***\n\nSpecs -- HUN card\n-----------------\n\n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\n### Standard HUN\n\n### HUN with avatar\n\n### Message HUN with preview\n\n### Message HUN with multiple messages\n\n### Large-image HUN\n\n*** ** * ** ***\n\nSpecs -- Notification Center card\n---------------------------------\n\n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\n### Standard notification\n\n### Message notification with preview\n\n### Message notification with multiple messages\n\n### Single action notification\n\n*** ** * ** ***\n\nSpecs -- Grouped-notification card\n----------------------------------\n\n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\n### Grouped notification -- Collapsed\n\n### Grouped notification -- Expanded\n\n*** ** * ** ***\n\nScaling layouts\n---------------\n\nThese reference layouts show how to adapt notifications to accommodate screens of various widths and heights. (Width and height categories are defined in the [Layout](/cars/design/automotive-os/design-system/layout) section.) Note that all pixel values are in rendered pixels, before any down-sampling or up-sampling occurs. \n[Layout\nMargins, keylines, and padding for various screen sizes](/cars/design/automotive-os/design-system/layout) \n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\n### Standard-width screens\n\nHUN card Notification Center card Grouped-notification card (collapsed) Grouped-notification card (expanded)\n\n### Wide screens\n\nHUN card Notification Center card Grouped-notification card (collapsed) Grouped-notification card (expanded)\n\n### Extra-wide and super-wide screens\n\nHUN card Notification Center card Grouped-notification card (collapsed) Grouped-notification card (expanded)\n\n### Vertical spacing of notifications on screens of various heights\n\nThe vertical-spacing specs in this section are for HUN cards only. For information about vertical spacing of cards in the Notification Center, see the [Notification Center specs](/cars/design/gas-customization/specs/notification-center-spec).\n\n#### Short screens\n\nHUN card\n\n#### Tall and standard-height screens\n\nHUN card\n\n*** ** * ** ***\n\nStyles\n------\n\n[Typography guidelines\nScale and grid references, typographic examples, and more](/cars/design/automotive-os/design-system/typography) \n[Color guidelines\nPalettes, elevation and opacity values, and more](/cars/design/automotive-os/design-system/color)\n\n### Typography\n\n| Type style | Typeface | Weight | Size (dp) |\n|------------|----------|---------|-----------|\n| Body 1 | Roboto | Regular | 32 |\n| Body 3 M | Roboto | Medium | 24 |\n| Body 3 | Roboto | Regular | 24 |\n\n### Color\n\n| Element | Color(day mode) | Color (night mode) |\n|----------------------|------------------|--------------------|\n| Primary type / icons | White | White @ 88% |\n| Secondary type | White @ 72% | White @ 60% |\n| Secondary icon | 3rd-party accent | 3rd-party accent |\n| Divider hairline | White 22% | White 12% |\n| Card background | Grey 868 | Grey 900 |\n| Gradient Scrim | Black 100% - 0% | Black 100% - 20% |\n\n### Sizing\n\n| Element | Size (dp) |\n|----------------------------|-----------|\n| Primary icon | 44 |\n| Secondary icon | 36 |\n| Medium avatar | 76 |\n| Rounded corner radius (R2) | 8 |\n\n*** ** * ** ***\n\nExamples\n--------\n\nHUN cards: Call, Message, Car warning, and Navigation Notification Center cards: Call, Message, and Car warning \nGrouped-notification cards: Messages, expanded and collapsed - day Grouped-notification cards: Messages, expanded and collapsed - night\n\n*** ** * ** ***\n\nMotion\n------\n\nThe following motions are an important part of the notification experience:\n\n- HUN arrival motion\n- Swipe motion for dismissing a notification\n- Grouped-notification expand and collapse motions\n\n### HUN arrival\n\nThe motion of a HUN sliding down from the top of the screen helps users notice its arrival -- and it also provides a hint about accessing notifications via downward swipe if the Notification Center is implemented as a pull-down shade\n\n### Swipe-to-dismiss\n\nThe dragging motion when a user swipes sideways on a notification provides visual confirmation that it is being dismissed, then the upward motion of the next notification fills in the hole in the list\n\n### Grouped-notification expand and collapse\n\nHaving a grouped-notification card stretch downward provides a smooth transition from the collapsed to the expanded state"]]
