Pulsanti

Un pulsante comunica un'azione che si verifica quando un utente lo tocca.

I pulsanti sono componenti standard dell'Android Open Source Project (AOSP). Possono essere riempiti con un colore di sfondo pieno o vuoti (con uno sfondo trasparente). I pulsanti riempiti indicano un'azione principale o preferita. I pulsanti possono apparire in modo indipendente o in gruppi, a differenza delle schede , che appaiono sempre in gruppi.

Anatomia

Anatomia dei pulsanti
1. Contenitore di pulsanti non riempito
2. Contenitore di pulsanti riempito, che indica l'azione primaria o preferita
3. Etichetta del pulsante

Specifiche

Lunghezza minima e massima del pulsante

La lunghezza massima dell'etichetta del pulsante è di 20 caratteri. La larghezza minima del pulsante è di 156 dp.
La lunghezza massima dell'etichetta del pulsante è di 20 caratteri. La larghezza minima del pulsante è di 156 dp.

Pulsante con icona vs. pulsante predefinito

I pulsanti possono includere icone. Quando sono incluse, le icone in genere vengono visualizzate a sinistra del testo del pulsante.
I pulsanti possono includere icone. Quando sono incluse, le icone in genere vengono visualizzate a sinistra del testo del pulsante.

I pulsanti possono apparire come elementi in altri componenti, come la barra delle applicazioni o le finestre di dialogo .

Posizionamento dei pulsanti nella barra delle applicazioni

I pulsanti sono posizionati sul lato destro della barra delle applicazioni
I pulsanti sono posizionati sul lato destro della barra delle applicazioni.

Pulsante nella finestra di dialogo

I pulsanti nelle finestre di dialogo si trovano in genere nella parte inferiore sinistra di una finestra di dialogo
I pulsanti nelle finestre di dialogo si trovano solitamente nella parte inferiore sinistra della finestra di dialogo.

Pulsante Eroe

I bordi arrotondati del pulsante eroe ne sottolineano l'importanza
I bordi arrotondati sottolineano l'importanza del pulsante eroe.

Personalizzazione

Gli OEM possono rispecchiare il proprio marchio modificando l'aspetto visivo di un pulsante, ad esempio:

  • Specificare un colore di accento
  • Fornitura di icone personalizzate
  • Aggiunta di font personalizzati
  • Modifica dell'aspetto dei pulsanti attivi, inattivi e disabilitati
  • Impostazione delle dimensioni dei pulsanti, della forma degli angoli e del posizionamento
  • Utilizzo del movimento per fornire feedback agli utenti

La Guida all'integrazione della libreria Car UI fornisce indicazioni OEM per la personalizzazione dei componenti.

Esempi

pulsanti vuoti e pieni
Pulsanti vuoti e pieni, dove il pulsante pieno indica l'azione principale.
pulsante riempito disabilitato
Il colore e l'opacità di questo pulsante pieno indicano uno stato disabilitato.
Finestra di dialogo dei pulsanti non compilati
I pulsanti vuoti in una finestra di dialogo indicano azioni di pari importanza.
durata del movimento ondulato del pulsante
Questi movimenti a catena hanno una durata di 330 ms. Vengono utilizzati per confermare il contatto dell'utente con un pulsante.
Animazione a increspatura dei pulsanti
Questi movimenti a onda inizialmente coprono il 60% della superficie del pulsante. Si espandono allontanandosi dal tocco dell'utente e si fermano a 10 dp dal bordo del pulsante.