Pulsanti

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

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, ad esempio 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.

check_circle

Cosa fare

Utilizza la divulgazione progressiva per mostrare le azioni meno pertinenti.

cancel

Cosa non fare

Sovraccaricare la visualizzazione dell'utente con troppi pulsanti.

check_circle

Cosa fare

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

cancel

Cosa non fare

utilizzare un pulsante come elemento decorativo statico.

Anatomia

Predefinito

1. Attivato: stato predefinito. 2. Passaggio del mouse 3. Tocca

Grande

1. Attivato: stato predefinito. 2. Passaggio del mouse 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, chiarezza e riconoscimento al pulsante. La dimensione del pulsante può contribuire a enfatizzare l'importanza.