Pulsanti

Utilizza un componente Pulsante per azioni che sono ben comprese dagli utenti e che non richiedono un'etichetta di testo. I pulsanti si distinguono dai chip per la loro forma circolare.

Anatomia

A. Contenuti

I pulsanti hanno un singolo spazio riservato a un'icona o testo. Scegli un'icona pertinente all'azione eseguita dal pulsante. Puoi utilizzare testo con un massimo di tre caratteri se un'icona non è in grado di descrivere l'azione pertinente. Considera l'utilizzo di un componente Chip se un'icona non può descrivere chiaramente l'azione

B. contenitore

I contenitori dei pulsanti sono limitati a un singolo riempimento di colore solido.


Tipi di pulsanti

Attivare/disattivare i pulsanti

I pulsanti di attivazione/disattivazione consentono agli utenti di passare da uno stato all'altro.

Pulsanti compatti

I pulsanti compatti sono più piccoli, ma hanno un'area toccabile più ampia. L'area predefinita che è possibile toccare è 48 x 48 dp.

Gerarchia

Utilizza riempimenti di colore diversi per indicare la gerarchia dei pulsanti.

Enfasi elevata

I pulsanti con enfasi elevata contengono le azioni principali dell'app. Per i pulsanti con enfasi elevata, utilizza i colori primari o secondari per il contenitore e On principale e On secondario per i contenuti. Per maggiori informazioni, vedi Come indossare i temi dei materiali.

Enfasi media

I pulsanti con enfasi media si distinguono per un riempimento cromatico meno contrastante. Contengono azioni meno importanti delle azioni principali. Utilizza il colore della superficie per il contenitore e il colore della superficie per i contenuti.

In alternativa, utilizza il componente OutliningButton personalizzato per ottenere un pulsante con enfasi media. Ha uno sfondo trasparente, un tratto di colore principale con un'opacità del 60% e contenuti del colore principale.

Enfasi bassa (solo icona)

I pulsanti a bassa enfasi si distinguono per il mancato riempimento. Sono più adatti per le aree più piccole sul quadrante dell'orologio in cui è necessaria una disposizione compatta. Utilizza il colore sulla superficie per i contenuti.

Dimensioni

Utilizza pulsanti di dimensioni diverse per enfatizzare o attenuare le azioni.

Grande

Icona (30 x 30 dp)
Contenitore (60 x 60 dp)

Predefinita

Icona (26 x 26 dp)
Contenitore (52 x 52 dp)

Piccolo

Icona (24 x 24 dp)
Contenitore (48 x 48 dp)

Molto piccola

Icona (24 x 24 dp)
Contenitore (32 x 32 dp)

Ti consigliamo di aggiungere un'ulteriore spaziatura interna attorno a questo pulsante per creare un target dei tocchi di almeno 48 dp. Queste sono le dimensioni minime del target dei tocchi per l'accessibilità.

Utilizzo

Utilizza i pulsanti standard per consentire all'utente di eseguire una singola azione, ad esempio accettare o rifiutare una chiamata oppure avviare un timer.

Utilizza i pulsanti di attivazione/disattivazione per consentire all'utente di attivare o disattivare un'opzione, ad esempio per selezionare e deselezionare i giorni della settimana o per mettere in pausa e riavviare un timer.

Layout adattivi

Comportamento reattivo

Un pulsante

La spaziatura interna interna rimarrà invariata e i margini dovrebbero essere percentuali per evitare che i pulsanti si allungano troppo e mantenere una dimensione relativa.

2 pulsanti

Quando sono presenti due pulsanti, vengono aggiunti margini percentuali interni in modo da evitare che i pulsanti si allungano troppo e mantenere una dimensione relativa.

IME

1 o 2 pulsanti

Gli IME con logo completo con due pulsanti o con un singolo pulsante si estendono sempre fino ai margini laterali, indipendentemente dalle dimensioni dello schermo.

3 pulsanti

Su schermi di dimensioni inferiori a 225 dp, i pulsanti rimangono circolari e non si allungano. Su schermi più grandi, con una risoluzione di almeno 225 dp, i pulsanti si estendono fino ai margini laterali.