Pulsanti

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

I pulsanti sono componenti standard di Android Open Source Project (AOSP). e possono essere riempite con un colore di sfondo a tinta unita oppure con riempimento (con uno sfondo trasparente). I pulsanti riempiti indicano un'azione principale o preferita. A differenza delle schede, che vengono sempre visualizzate nei gruppi, i pulsanti possono essere visualizzati in modo indipendente o in gruppi.


Anatomia

Anatomia dei pulsanti
1. Contenitore del pulsante 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 è di 20 caratteri. La larghezza minima del pulsante è 156 dp.
La lunghezza massima dell'etichetta del pulsante è di 20 caratteri. La larghezza minima del pulsante è 156 dp.

Pulsante con icona e 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 essere visualizzati come elementi in altri componenti, ad esempio nella barra dell'app o nelle finestre di dialogo.

Posizionamento del pulsante nella barra dell'app

I pulsanti sono posizionati sul lato destro della barra dell'app
I pulsanti sono posizionati sul lato destro della barra dell'app

Pulsante nella finestra di dialogo

I pulsanti delle finestre di dialogo si trovano in genere in basso a sinistra di una finestra di dialogo
In genere, i pulsanti nelle finestre di dialogo si trovano nella parte in basso a sinistra di una finestra di dialogo

Pulsante hero

I bordi arrotondati di un pulsante hero sottolineano la sua importanza
I bordi arrotondati di un pulsante hero sottolineano la sua importanza

Personalizzazione

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

  • Specificare un colore di accento
  • Fornire icone personalizzate
  • Aggiungere caratteri personalizzati
  • Modificare l'aspetto dei pulsanti attivi, non attivi e disattivati
  • Impostazione delle dimensioni dei pulsanti, della forma degli angoli e dei posizionamenti
  • Utilizzare i movimenti per fornire feedback agli utenti

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

Il sistema di progettazione fornisce indicazioni specifiche per l'utilizzo di layout, colore, tipografia, dimensioni, forma e movimento per personalizzare i componenti.


Esempi

pulsanti vuoti
Pulsanti riempiti e riempiti, dove il pulsante riempito indica l'azione principale
pulsante riempito disattivato
Il colore e l'opacità del pulsante riempito indicano uno stato disattivato
Finestra di dialogo del pulsante inevaso
I pulsanti vuoti in una finestra di dialogo indicano azioni con ponderazione uguale
Durata del movimento di ondulazione del pulsante
Questi movimenti ondulate hanno una durata di 330 ms. Vengono utilizzati per confermare il contatto dell'utente con un pulsante.
Animazione dell'animazione con pulsanti
Questi movimenti ondulati inizialmente si sovrappongono al 60% della superficie del pulsante. Si espandono sul tocco dell'utente e si bloccano a 10 dp dal bordo del pulsante.