Pulsanti

I pulsanti sono l'indicatore visivo principale delle azioni di un utente.

Gli elementi di design devono essere ancorati alla parte inferiore del frame.

dell'AI

Orientati all'azione: i pulsanti devono comunicare chiaramente che attivano un'azione.

Feedback chiaro: l'aspetto del pulsante deve cambiare in modo distinto nei diversi stati di interazione (passaggio del mouse, pressione, messa a fuoco) per fornire un feedback immediato.

Coerenza: tutti i pulsanti devono condividere un linguaggio visivo di base per essere immediatamente riconoscibili.

Flessibile: il componente pulsante deve adattarsi alle varianti comuni, come l'inclusione di icone e dimensioni diverse, senza sacrificare la coerenza.

Utilizzo e posizionamento

Un pulsante deve essere posizionato vicino ai contenuti pertinenti. Possono essere posizionati da soli o con altri componenti, come schede ed elenchi.

Cosa fare

Utilizza la divulgazione progressiva per mostrare le azioni meno pertinenti.

Cosa non fare

Sovraccaricare la visualizzazione dell'utente con troppi pulsanti.

Cosa fare

Utilizza i pulsanti per richiedere un'azione. In alternativa, utilizza un chip del titolo per un elemento statico.

Cosa non fare

utilizzare un pulsante come elemento decorativo statico.

Anatomia

Predefinito

Gli elementi di design devono essere ancorati alla parte inferiore del frame. 1. Attivato: stato predefinito. 2. Passaggio del mouse 3. Tocca

Grande

Gli elementi di design devono essere ancorati alla parte inferiore del frame. 1. Attivato: stato predefinito. 2. Passa il mouse sopra 3. Tocca

Personalizzazione

I pulsanti contengono una variante predefinita e una grande, oltre agli stati predefinito, attivo e premuto per ciascuna. Le icone possono essere utilizzate per dare maggiore enfasi, chiarimento e riconoscimento al pulsante. Le dimensioni del pulsante possono contribuire a enfatizzare l'importanza.

Predefinito

Proprietà Personalizzazione Impostazioni predefinite
Forma Sì Grande, cerchio
Spaziatura interna Sì 16 dp, 8 dp
Bordo Sì 2 dp, #606460
Testo Sì Corpo piccolo
Icona iniziale Sì 40 dp
Icona di coda Sì 40 dp
Dimensioni Sì Altezza minima di 56 dp
Profondità Sì 0

Grande

Proprietà Personalizzazione Impostazioni predefinite
Forma Sì Grande, cerchio
Spaziatura interna Sì 20 dp, 8 dp
Bordo Sì 2 dp, #606460
Testo Sì Corpo piccolo
Icona iniziale Sì 56 dp
Icona di coda Sì 56 dp
Dimensioni Sì Altezza minima di 72 dp
Profondità Sì 0
Surface No

Indietro
Icone
Avanti
Chip del titolo