Scheda di notifica

Le schede di notifica comunicano piccole quantità di informazioni tempestive 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):utilizzata per una notifica che appare poco sulla schermata corrente.
  • Scheda del Centro notifiche: utilizzata per le notifiche elencate nel Centro notifiche.
  • Scheda di notifica raggruppata: combina più schede del Centro notifiche in un'unica scheda

All'interno di queste versioni, il design può variare leggermente a seconda della categoria del messaggio. Ad esempio, gli avvisi di chiamata hanno pulsanti e icone diversi rispetto alle notifiche di navigazione.


Anatomia

La scheda di notifica è un componente flessibile che può includere una varietà di elementi. Ha tre versioni principali:

  • Scheda HUN: questa versione è più ampia della scheda del Centro notifiche e viene visualizzata nella parte superiore della schermata corrente finché non viene ignorata
  • Scheda Centro notifiche: questa versione è più ristretta della scheda HUN e viene visualizzata con altre schede di questo tipo nel Centro notifiche, in un elenco verticale.
  • Scheda delle notifiche raggruppate: questa versione della scheda del 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.

Qui sono mostrate le versioni HUN e Centro notifiche della stessa scheda di notifica, con i seguenti elementi:
1. Intestazione
2. Contenuti (con e senza anteprima facoltativa del messaggio che possono essere nascosti durante la guida)
3. Azioni
4. Icona grande
Qui è visualizzata una scheda di notifica raggruppata in entrambe le versioni, compressa ed espansa, con i seguenti elementi:
1. Intestazione
2. Contenuti
3. Azione di espansione/compressione
4. Indicatore di espansione/compressione

Specifiche – Scheda HUN

HUN standard

HUN con avatar

Messaggio HUN con anteprima

Messaggio HUN con più messaggi

HUN con immagine grande


Specifiche - Scheda del Centro notifiche

Notifica standard

Notifica di messaggio con anteprima

Notifica di messaggi con più messaggi

Notifica azione singola


Specifiche – Scheda di notifica raggruppata

Notifica raggruppate - Compresso

Notifica raggruppate - Espansa


Layout di scalabilità

Questi layout di riferimento mostrano come adattare le notifiche agli 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 sono in pixel sottoposti a rendering, prima che si verifichi qualsiasi campionamento inferiore o superiore.

Schermate a larghezza standard

Scheda HUN
Scheda del Centro notifiche
Scheda di notifica raggruppata (compressa)
Scheda di notifica raggruppata (espansa)

Widescreen

Scheda HUN
Scheda del Centro notifiche
Scheda di notifica raggruppata (compressa)
Scheda di notifica raggruppata (espansa)

Schermi ultrawide e superwide

Scheda HUN
Scheda del Centro notifiche
Scheda di notifica raggruppata (compressa)
Scheda di notifica raggruppata (espansa)

Spaziatura verticale delle notifiche su schermi di varie altezze

Le specifiche di 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

Carta HUN

Schermi alti e standard

Carta HUN

Stili

Tipografia

Tipo di stile Tipo di carattere Peso Dimensioni (dp)
Corpo 1 Roboto Regolare 32
Corpo 3 M Roboto Mezzo 24
Corpo 3 Roboto Regolare 24

Colore

Elemento Colore(modalità Giorno) Colore (modalità notturna)
Tipo / icone principali Bianco Bianco @ 88%
Tipo secondario Bianco @ 72% Bianco al 60%
Icona secondaria accento di terze parti accento di terze parti
Attaccatura dei divisori Bianco 22% Bianco 12%
Sfondo carta Grigio 868 Grigio 900
Scrimen sfumatura Nero 100% - 0% Nero 100% - 20%

Dimensioni

Elemento Dimensioni (dp)
Icona principale 44
Icona secondaria 36
Avatar medio 76
Raggio d'angolo arrotondato (R2) 8

Esempi

Schede HUN: chiamate, messaggio, avviso e navigazione
Schede del Centro notifiche: avvisi di chiamata, messaggio e auto
Schede di notifica raggruppate: Messaggi, espansi e compressi - giorno
Schede di notifica raggruppate: Messaggi, espansi e compressi - notte

Movimento

Le seguenti azioni rappresentano una parte importante dell'esperienza di notifica:

  • Movimento di arrivo HUN
  • Scorri il dito per ignorare una notifica
  • Movimenti di espansione e compressione delle notifiche raggruppate

Arrivo HUN

Il movimento di un HUN che scorre verso il basso dalla parte superiore dello schermo aiuta gli utenti a notarne l'arrivo; fornisce inoltre un suggerimento sull'accesso alle notifiche tramite scorrimento verso il basso se il Centro notifiche è implementato come area a discesa

Scorri per ignorare

Il movimento di trascinamento quando un utente scorre lateralmente su una notifica fornisce una conferma visiva che la notifica viene ignorata, quindi il movimento verso l'alto della notifica successiva viene inserito nel foro dell'elenco

Espansione e compressione delle notifiche raggruppate

L'estensione della scheda raggruppate delle notifiche verso il basso consente una transizione graduale dallo stato compresso a quello espanso