Shapes

Le forme contribuiscono a sottolineare l'importanza di alcuni elementi dello schermo rispetto ad altri.

Guida in sintesi (TL; DR):

  • Utilizza angoli più arrotondati (raggio d'angolo superiore) per azioni principali e componenti
  • Utilizza angoli più quadrati e meno arrotondati (raggio d'angolo inferiore) per gli elementi a bassa enfasi

Valori degli angoli ravvicinati

Android for Cars fornisce una serie di valori di raggio d'angolo volti a sottolineare l'importanza dei vari elementi dello schermo rispetto agli altri.

Valori degli angoli ravvicinati
R0 R1 R2 R3 R4
0dp 4dp 8 DP 16dp Intero

Utilizzare l'arrotondamento per mettere in risalto

Le forme arrotondate e con angoli arrotondati in Android Automotive creano una gerarchia visiva che attira l'attenzione dell'utente sugli elementi più efficaci. Gli elementi con minore enfasi hanno angoli più arrotondati e un raggio più ampio. Gli elementi con minore enfasi hanno angoli meno rotondi, con un angolo più piccolo.

Esempi di tutti e quattro i livelli di raggio d'angolo
Esempi di quattro livelli di raggio d'angolo, dal più basso (0dp = quadrato) al più alto (circolare)

0 dp - Base di riferimento

Utilizza gli angoli 0dp (quadrati) per gli elementi di riferimento che non richiedono alcuna enfasi aggiuntiva. Le strutture del layout di base, come le barre degli strumenti o gli elenchi, devono utilizzare angoli 0dp. Le immagini devono avere anche angoli 0 dp, a meno che non siano mascherate da un contenitore arrotondato (ad esempio una scheda) o siano in uno stato selezionato.

Esempio di angolo quadrato
Le copertine dell'album nella griglia a destra non hanno bisogno di alcuna enfasi aggiuntiva rispetto agli altri elementi mostrati, quindi hanno angoli 0dp (dettagli mostrati a sinistra)

8dp - Poca enfasi

8dp è il raggio d'angolo predefinito per le forme arrotondate. Utilizza questa forma per indicare gli elementi interattivi a bassa enfasi, come schede e contenitori.

Esempio di 8 dp a bassa enfasi
La scheda delle notifiche mostrata qui utilizza il raggio d'angolo predefinito di 8 dp (mostrato a sinistra), che lo mette meno in evidenza rispetto ai pulsanti di azione della scheda (come mostrato a destra), che sono più importanti

16 dp - enfasi media

Utilizza un raggio d'angolo di 16 dp per i componenti con enfasi media, inclusi gli elementi interattivi e i componenti espandibili.

Esempio di angolo medio 16 dp
In questo caso, viene utilizzato un raggio d'angolo di 16 dp per fornire un'enfasi media su un foglio inferiore, che è temporaneamente più importante dei contenuti correnti sullo schermo

Circolare - Alto accento

Le forme circolari hanno un maggiore impatto visivo rispetto alle forme prevalentemente rettangolari. Devono essere riservati per componenti ad alta enfasi, come FAB, chip e widget.

Esempio di angolo arrotondato con enfasi alta
Gli angoli completamente arrotondati e le forme circolari vengono utilizzati qui per dare la massima enfasi al FAB in basso a sinistra, i pulsanti di azione in alto a destra, il FAB in basso a sinistra