Pulsanti

Un pulsante comunica un'azione che verrà eseguita quando un utente lo toccherà.

I pulsanti sono componenti standard di Android Open Source Project (AOSP). Possono essere riempiti con un colore di sfondo a tinta unita o vuoti (con uno sfondo trasparente). I pulsanti pieni 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 dei pulsanti vuoto
2. Contenitore del pulsante riempito, che indica l'azione principale o preferita
3. Etichetta del pulsante

Specifiche

Lunghezza minima e massima del pulsante

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

Pulsante con icona e pulsante predefinito

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

I pulsanti possono essere visualizzati come elementi in altri componenti, ad esempio la barra dell'app o le finestre di dialogo.

Posizionamento del pulsante nella barra delle app

I pulsanti si trovano sul lato destro della barra delle app
I pulsanti si trovano sul lato destro della barra delle app

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 in genere nella parte in basso a sinistra di una finestra di dialogo

Pulsante Hero

I bordi arrotondati di un pulsante hero ne enfatizzano l'importanza
I bordi arrotondati di un pulsante Hero ne enfatizzano l'importanza

Funzionalità di

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

  • Specificare un colore di contrasto
  • Fornitura di icone personalizzate
  • Aggiungere caratteri personalizzati
  • Modifica dell'aspetto dei pulsanti attivi, non attivi e disattivati
  • Impostazione delle dimensioni dei pulsanti, della forma degli angoli e dei posizionamenti
  • Utilizzare il movimento per fornire feedback agli utenti

La guida all'integrazione della libreria dell'interfaccia utente dell'auto fornisce indicazioni per gli OEM per la personalizzazione dei componenti.

Il sistema di progettazione fornisce indicazioni specifiche su come utilizzare layout, colore, tipografia, dimensioni, forma e movimento al fine di personalizzare i componenti.


Esempi

pulsanti vuoti e riempiti
Pulsanti non completati e riempiti, dove il pulsante pieno indica l'azione principale
pulsante compilato disattivato
Il colore e l'opacità di questo pulsante pieno indicano uno stato disattivato
Finestra di dialogo del pulsante Inevaso
I pulsanti non completati in una finestra di dialogo indicano azioni con ponderazione uguale
durata del movimento dell'ondulazione del pulsante
Questi movimenti dell'onda hanno una durata di 330 ms. Vengono utilizzati per confermare il contatto dell'utente con un pulsante.
Animazione dell'ondulazione dei pulsanti
Questi movimenti di onde si sovrappongono inizialmente al 60% della superficie del pulsante. Si espandono e si allontanano dal tocco dell'utente e si interrompono di 10 dp dal bordo del pulsante.