Elenchi

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Gli elenchi sono una rappresentazione visiva di uno o più elementi correlati. Sono comunemente utilizzati per visualizzare una raccolta di opzioni.

Risorse

In evidenza

• Gli elenchi sono una raccolta continua di testo o immagini.
• Gli elenchi devono essere naturali e facili da leggere.
• Gli elenchi sono costituiti da elementi contenenti azioni principali e supplementari rappresentate da icone e testo.

Varianti

Esistono tre tipi di elenchi: elenco di una riga, elenco di due righe ed elenco di tre righe.

1. Elenco di una riga: una singola riga per comunicare ogni elemento. Questo design semplice garantisce che ogni articolo sia chiaramente distinto dall'altro.
2. Elenco di due righe: utilizza due righe parallele per comunicare ogni elemento. Questo design strutturato garantisce una leggibilità naturale ed evita il sovraccarico cognitivo.
3. Elenco di tre righe: utilizza tre linee parallele per rappresentare ogni elemento. Questo design decorativo crea un alto livello di evidenza visiva.

Anatomia

1. Icona: una piccola immagine che rappresenta un oggetto o un'azione specifici, spesso utilizzata per comunicare visivamente un'idea o un concetto.
2. Sovralinea: una breve riga di testo visualizzata sopra il titolo o il sottotitolo, spesso utilizzata per fornire un contesto aggiuntivo o per mettere in evidenza un elemento.
3. Titolo: una riga di testo grande e in grassetto che funge da intestazione principale di un elemento di design o di una pagina.
4. Sottotitolo: una riga di testo più piccola che fornisce informazioni aggiuntive o un contesto sotto un titolo principale.
5. Controllo: un elemento interattivo che consente all'utente di inserire una decisione.

Stati

Specifiche

Utilizzo

Gli elenchi sono gruppi di testo e immagini organizzati in verticale. Ottimizzato per la comprensione della lettura, un elenco è costituito da una singola colonna continua di elementi. Gli elementi dell'elenco possono contenere azioni principali e supplementari rappresentate da icone e testo.

check_circle

Cosa fare

Gli elementi dell'elenco non sono pulsanti. Gli elementi non hanno contenitori. Per impostazione predefinita, gli elementi dell'elenco non sono selezionati e non sono attivi.

warning

Attenzione

Utilizza lo sfondo del contenitore per gli elementi dell'elenco solo se necessario.

Comandi di selezione

I controlli mostrano informazioni e azioni per gli elementi dell'elenco. Possono essere allineati al margine iniziale o finale dell'elemento dell'elenco.

1. Caselle di controllo: seleziona uno o più elementi dell'elenco.
2. Pulsanti di opzione: seleziona esattamente un elemento nell'elenco.
3. Interruttori: attiva o disattiva un controllo.

check_circle

Cosa fare

Utilizza un indicatore di selezione di icone per mostrare chiaramente l'elemento selezionato in un elenco. In questo modo, gli utenti potranno identificare facilmente l'elemento selezionato e migliorare l'esperienza utente complessiva.

cancel

Cosa non fare

Evita di fare affidamento solo sul colore di sfondo per indicare la selezione in un elenco.

cancel

Cosa non fare

Evita di inserire pulsanti all'interno di un elemento dell'elenco, perché potrebbero creare confusione su quale elemento è attualmente attivo.

Icone

check_circle

Cosa fare

Se nell'elenco mostri lo stesso tipo di contenuti, ometti le icone per ridurre il rumore visivo e migliorare l'esperienza utente. Evita di utilizzare icone in un elenco se non hanno uno scopo e non forniscono informazioni aggiuntive.

cancel

Cosa non fare

Evita di utilizzare la stessa icona per tutti gli elementi di un elenco. Questo può essere visivamente opprimente e creare confusione per gli utenti. Utilizza le icone solo quando aggiungono valore o forniscono informazioni aggiuntive.

Avatar e immagini

Gli elementi dell'elenco possono includere immagini ritagliate in un cerchio per rappresentare una persona o un'entità.