Elenchi

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

Risorse

In evidenza

• Gli elenchi sono una raccolta continua di testo o immagini.
• Gli elenchi devono sembrare naturali ed essere consultabili.
• Gli elenchi sono composti da elementi contenenti azioni principali e supplementari rappresentate da icone e testo.

Varianti

Esistono tre tipi di elenchi: a una riga, a due righe e a tre righe.

1. Elenco di una riga: una singola riga per comunicare ogni elemento. Questo design semplice fa sì che ogni articolo sia chiaramente distinto dall'altro.
2. Elenco a due righe: utilizza due righe parallele per comunicare ogni elemento. Questo design strutturato garantisce una leggibilità naturale ed evita sovraccarichi cognitivi.
3. Elenco di tre righe: utilizza tre righe parallele per rappresentare ogni elemento. Questo design decorativo conferisce un'elevata visibilità 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. Sottotitolo: una breve riga di testo visualizzata sopra il titolo o il sottotitolo, spesso utilizzata per fornire ulteriore contesto o enfatizzare.
3. Titolo: una riga di testo grande e in grassetto che funge da intestazione principale di un elemento o di una pagina di design.
4. Sottotitolo: una riga di testo più piccola che fornisce informazioni o contesto aggiuntivi 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 verticalmente. Ottimizzato per la comprensione della lettura, un elenco è costituito da una singola colonna continuativa di elementi. Le voci dell'elenco possono contenere azioni principali e supplementari rappresentate da icone e testo.

check_circle

Cosa fare

Le voci dell'elenco non sono pulsanti. Gli elementi non hanno contenitori. Per impostazione predefinita, le voci dell'elenco sono deselezionate e non attive.

warning

Attenzione

Utilizza lo sfondo del contenitore per le voci dell'elenco solo quando necessario.

Comandi di selezione

I controlli mostrano informazioni e azioni per le voci dell'elenco. Possono essere allineati al bordo iniziale o finale dell'elemento dell'elenco.

1. Caselle di controllo: seleziona uno o più elementi dell'elenco.
2. Pulsanti di radio: seleziona un solo elemento dell'elenco.
3. Selettori: attiva o disattiva un controllo.

check_circle

Cosa fare

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

cancel

Cosa non fare

Evita di fare affidamento esclusivamente 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, poiché potrebbe creare confusione in merito a quale elemento è attualmente attivo.

Icone

check_circle

Cosa fare

Se mostri lo stesso tipo di contenuti nell'elenco, ometti le icone per ridurre il rumore visivo e migliorare l'esperienza utente. Evita di utilizzare icone in un elenco se non servono a nulla 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 complicato e confuso per gli utenti. Utilizza invece le icone solo quando aggiungono valore o forniscono informazioni aggiuntive.

Avatar e immagini

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