Pulsanti

I pulsanti aiutano gli utenti ad avviare azioni o flusso. Scegli tra diversi tipi di pulsanti per dare risalto all'enfasi.

Risorse

Tipo	Collega	Stato
Progettazione	Origine progettazione (Figma)	Disponibile
Implementazione	Jetpack Compose	Disponibile

In evidenza

• Scegli il tipo di pulsante in base all'importanza dell'azione. Più importante è l'azione, maggiore è l'enfasi sul pulsante.
• I pulsanti devono avere etichette chiare per indicare l'azione che eseguono.
• Posiziona i pulsanti sullo schermo in modo logico, dove gli utenti probabilmente si aspettano di trovarli.
• Non abusare dei pulsanti. Troppi pulsanti sullo schermo interrompono la gerarchia visiva.

Varianti

Esistono sei tipi di pulsanti:

1. Pulsante Riempito
2. Pulsante con contorno
3. Pulsante icona
4. Pulsante icona contorno
5. Pulsante lungo
6. Pulsante Immagine

Scegli il tipo di pulsante in base all'importanza dell'azione. Più importante è l'azione, maggiore sarà l'enfasi che il pulsante dovrebbe avere.

Pulsante con contorni e riempito

I pulsanti pieni hanno l'impatto più visivo e dovrebbero essere utilizzati per azioni finali importanti che completano un flusso, come Salva, Partecipa ora, Conferma o Scarica.

I pulsanti con contorni sono pulsanti di enfasi media. Contengono le azioni importanti, ma non l'azione principale in un'app. I pulsanti con contorni si abbinano bene ai pulsanti pieni per indicare un'azione secondaria alternativa.

Anatomia

1. Contenitore
2. Testo etichetta
3. Icona (facoltativa)

Stati

Rappresentazione visiva dello stato di un componente.

1. Predefinito
2. Concentrazione
3. Premuti

Scheda tecnica

Pulsante icona e contorno icona

Utilizza i pulsanti icona per visualizzare le azioni in un layout compatto. I pulsanti icona possono rappresentare le azioni di apertura, come l'apertura di un menu extra o di una ricerca, oppure rappresentano azioni binarie che possono essere attivate e disattivate, ad esempio un preferito o un preferito. Vengono utilizzati anche per riprodurre o mettere in pausa i contenuti multimediali.

I pulsanti delle icone possono essere definiti in tre dimensioni: piccoli, medi e grandi.

Anatomia

1. Contenitore
2. Icona

Stati

1. Predefinito
2. Concentrazione
3. Premuti

Gli stati sono rappresentazioni visive utilizzate per comunicare lo stato di un componente o di un elemento interattivo.

Specifiche

Pulsante largo

I pulsanti larghi vengono utilizzati per porre maggiore enfasi rispetto al solito. Contengono azioni importanti. I pulsanti che rappresentano le opzioni correlate sono raggruppati. Il gruppo deve condividere una superficie comune.

Anatomia

1. Contenitore
2. Icona iniziale
3. Titolo
4. Sottotitolo

Stati

1. Predefinito
2. Concentrazione
3. Premuti

Gli stati sono rappresentazioni visive utilizzate per comunicare lo stato di un componente o di un elemento interattivo.

Specifiche

Pulsante Immagine

I pulsanti immagine vengono generalmente utilizzati per visualizzare le miniature dei contenuti disponibili nel livello di navigazione successivo. Di solito sono raggruppate insieme alle azioni correlate e il gruppo dovrebbe condividere una piattaforma comune.

Anatomia

1. Contenitore
2. Icona iniziale
3. Titolo
4. Sottotitolo
5. Livello immagine, composto da:
   1. Scrim (overlay dello stato)
   2. Gradiente (in base al colore della superficie)
   3. Immagine

Stati

1. Predefinito
2. Concentrazione
3. Premuti

Gli stati sono rappresentazioni visive utilizzate per comunicare lo stato di un componente o di un elemento interattivo.

Specifiche

Utilizzo

I pulsanti vengono generalmente utilizzati per comunicare azioni che un utente può eseguire. Si trovano spesso in elementi dell'interfaccia utente come finestre di dialogo, finestre modali, moduli, schede e barre degli strumenti.

I pulsanti sono solo una delle opzioni per rappresentare le azioni nell'interfaccia utente. Non abusarne. Troppi pulsanti sullo schermo interrompono la gerarchia visiva.

1. Contenitore
2. Icona
3. Testo etichetta
4. Titolo
5. Sottotitolo
6. Immagine

Contenitore

I pulsanti mostrano un contenitore intorno ai contenuti. Il container scala di 1,1 volte in stato attivo, mantenendo la spaziatura interna interna. Ecco alcune considerazioni per i container:

• Imposta la larghezza del contenitore in base ai contenuti con una spaziatura interna coerente.
• Imposta la posizione relativa del contenitore sulla griglia del layout adattabile.
• Utilizza contenitori in tinta unita per i pulsanti pieni.
• Usa il colore tratto e riempimento per lo stato attivo sui pulsanti con contorni. In primo piano, il container assume un colore di riempimento insieme ai contorni.
• Per i pulsanti largo e immagine, la larghezza del container viene impostata in base alla griglia di layout.
• Le dimensioni, la posizione e l'allineamento del container possono cambiare con la scalabilità del container principale.

I contenitori del testo e dei pulsanti icona hanno gli angoli completamente arrotondati. I contenitori con pulsanti wide e immagine hanno contenitori arrotondati da 12 dp.

Icona

Le icone comunicano visivamente l'azione del pulsante e aiutano ad attirare l'attenzione. Questi pulsanti devono essere posizionati sul lato iniziale del pulsante. Le icone sono sempre centrate verticalmente nel contenitore.

Testo etichetta

Il testo dell'etichetta è l'elemento più importante di un pulsante. Descrive l'azione che si verifica quando un utente tocca un pulsante.

Utilizza la maiuscola a inizio frase per il testo dell'etichetta del pulsante, con l'iniziale maiuscola e i nomi propri. Evita di scrivere a capo. Per la massima leggibilità, il testo dell'etichetta deve rimanere su una sola riga.

Immagine

I pulsanti immagine hanno sempre un overlay sfumato e un retino sopra l'immagine sullo sfondo. L'overlay gradiente viene impostato in base al colore del contenitore. Il telaio cambia in base allo stato.

Gruppi di pulsanti

I pulsanti vengono visualizzati insieme in una riga o colonna per garantire una navigazione coerente tra le azioni. Nelle sezioni seguenti vengono descritte le considerazioni.

Informa la gerarchia

Ogni schermata deve avere un'azione principale, rappresentata da un pulsante in evidenza, solitamente largo. Il pulsante deve essere più facile da visualizzare e da capire. Gli altri pulsanti devono essere meno in evidenza e non devono distrarre gli utenti dall'azione principale.

Il primo pulsante del gruppo funge da azione principale, poiché lo stato attivo viene impostato per primo.

Mantieni il layout lineare

1. Layout riga
2. Layout a colonne

Usa le varianti in modo logico

Nel layout a colonne, devono essere mantenute le varianti con un singolo pulsante. Nel layout di riga, diverse varianti possono essere raggruppate in un gruppo di pulsanti, ma la logica deve essere chiara. I pulsanti pieni e contorni possono essere utilizzati nello stesso gruppo, ma garantiscono una gerarchia chiara per le azioni.