Le schede di notifica comunicano piccole quantità di informazioni tempestive provenienti dal sistema o da un'app.
Il design di queste schede per il sistema operativo Android Automotive è pensato per ridurre al minimo le distrazioni per i conducenti. Le schede sono disponibili in tre versioni di base:
- Scheda Avviso (HUN):viene utilizzata per una notifica che viene visualizzata per un breve momento sulla schermata corrente.
- Scheda Centro notifiche: viene utilizzata per le notifiche elencate nel Centro notifiche.
- Scheda di notifiche raggruppate:combina più schede del Centro notifiche in un'unica scheda.
All'interno di queste versioni, i design possono variare leggermente a seconda della categoria del messaggio. Ad esempio, gli avvisi di chiamata hanno icone e pulsanti diversi rispetto alle notifiche di navigazione.
Anatomia
La scheda di notifica è un componente flessibile che può includere una varietà di elementi. Prevede tre versioni principali:
- Scheda HUN: questa versione è più grande della scheda Centro notifiche e rimane visualizzata nella parte superiore della schermata corrente finché non viene ignorata.
- Scheda Centro notifiche: questa versione è più stretta della scheda HUN e viene visualizzata insieme ad altre schede simili nel Centro notifiche, in un elenco verticale.
- Scheda di notifiche raggruppate:questa versione della scheda Centro notifiche combina più notifiche correlate in un'unica scheda, con controlli per l'espansione in modo da mostrare le singole notifiche.
Le varianti di queste versioni per tipo di messaggio sono mostrate in Stili.
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-hun-std.png?authuser=8&hl=it)
1. Intestazione
2. Contenuti (con e senza anteprima dei messaggi facoltativa, che può essere nascosta durante la guida dell'auto)
3. Azioni
4. Icona grande
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-grouped.png?authuser=8&hl=it)
1. Intestazione
2. Contenuti
3. Azione di espansione/compressione
4. Indicatore Espandi/comprimi
Specifiche - Scheda HUN
HUN standard
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hun.png?authuser=8&hl=it)
HUN con avatar
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hunwavatar.png?authuser=8&hl=it)
Invia messaggi a HUN con anteprima
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview.png?authuser=8&hl=it)
Invia messaggi a HUN con più messaggi
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview-multiple.png?authuser=8&hl=it)
HUN con immagine grande
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-largeimg.png?authuser=8&hl=it)
Specifiche - Scheda del Centro notifiche
Notifica standard
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-avatar.png?authuser=8&hl=it)
Notifica di messaggio con anteprima
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview.png?authuser=8&hl=it)
Notifica di messaggi con più messaggi
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview-multi.png?authuser=8&hl=it)
Notifica a singola azione
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-onebutton.png?authuser=8&hl=it)
Specifiche - Scheda di notifiche raggruppate
Notifica raggruppata - Compresso
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-collapsed.png?authuser=8&hl=it)
Notifica raggruppata - Espansa
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-expanded.png?authuser=8&hl=it)
Layout di scalabilità
Questi layout di riferimento mostrano come adattare le notifiche per adattarle a schermi di varie larghezze e altezze. Le categorie di larghezza e altezza sono definite nella sezione Layout. Tieni presente che tutti i valori dei pixel vengono visualizzati in pixel sottoposti a rendering, prima che si verifichi qualsiasi down-sampling o up-sampling.
Schermate di larghezza standard
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-std.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-std.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-std.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-std.png?authuser=8&hl=it)
Schermi ampi
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-wide.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-wide.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-wide.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-wide.png?authuser=8&hl=it)
Schermi extra-wide e super-wide
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-xwide.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-xwide.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-xwide.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-xwide.png?authuser=8&hl=it)
Spaziatura verticale delle notifiche su schermi di varie altezze
Le specifiche della spaziatura verticale in questa sezione sono solo per le schede HUN. Per informazioni sulla spaziatura verticale delle schede nel Centro notifiche, consulta le specifiche del Centro notifiche.
Schermate brevi
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-short.png?authuser=8&hl=it)
Schermate alte e di altezza standard
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-stdtall.png?authuser=8&hl=it)
Stili
Tipografia
Stile tipo | Tipo di carattere | Peso | Dimensioni (dp) |
---|---|---|---|
Corpo 1 | Roboto | Periodici | 32 |
Corpo 3 M | Roboto | Medium | 24 |
Corpo 3 | Roboto | Periodici | 24 |
Colore
Elemento | Colore(modalità giorno) | Colore (modalità notturna) |
---|---|---|
Tipo principale / icone | di colore bianco | Bianco all'88% |
Tipo secondario | Bianco @ 72% | Bianco @ 60% |
Icona secondaria | Accento di terze parti | Accento di terze parti |
Linea sottile di divisori | Bianco 22% | Bianco 12% |
Sfondo scheda | Grigio 868 | Grigio 900 |
Tela con gradiente | Nero 100% - 0% | Nero 100% - 20% |
Taglie
Elemento | Dimensioni (dp) |
---|---|
Icona principale | 44 |
Icona secondaria | 36 |
Avatar medio | 76 |
Raggio angolo arrotondato (R2) | 8 |
Esempi
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-examples.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-examples.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-day.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-night.png?authuser=8&hl=it)
Movimento
I seguenti movimenti sono una parte importante dell'esperienza di notifica:
- Movimento di arrivo dell'HUN
- Movimento di scorrimento per eliminare una notifica
- Movimento di espansione e compressione delle notifiche raggruppate
Arrivo di HUN
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hud-auto-dismiss-new.gif?authuser=8&hl=it)
Scorri per ignorare
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-appear-dismiss-new.gif?authuser=8&hl=it)
Espansione e compressione delle notifiche raggruppate
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-expand-group-2.gif?authuser=8&hl=it)