Elenchi

Gli elenchi sono una rappresentazione visiva di uno o più elementi correlati. Di solito vengono utilizzati per visualizzare 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 costituiti da elementi contenenti elementi principali e supplementari azioni rappresentate da icone e testo.

Varianti

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

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

Anatomia

1. Icona: un piccolo grafico che rappresenta un oggetto o un'azione specifici, spesso utilizzati per comunicare visivamente un'idea o un concetto.
2. Overline: una breve riga di testo che compare sopra il titolo o il sottotitolo. spesso utilizzati per fornire ulteriore contesto o enfasi.
3. Titolo: una riga di testo lunga e in grassetto che funge da intestazione principale del un elemento di design o una pagina.
4. Sottotitolo: una riga di testo più piccola che fornisce informazioni aggiuntive. o 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 organizzati verticalmente di testo e immagini. Ottimizzato per la comprensione in lettura, un elenco è composto da un singolo colonna continua di elementi. Le voci dell'elenco possono contenere azioni principali e supplementari rappresentate per icone e testo.

check_circle

Cosa fare

Le voci dell'elenco non sono pulsanti. Gli elementi non hanno container. Per impostazione predefinita, gli elementi dell'elenco sono deselezionati e non attivi.

warning

Attenzione

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

Comandi di selezione

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

1. Caselle di controllo. Seleziona una o più voci dell'elenco.
2. Pulsanti di opzione: selezionane uno solo. voce dell'elenco.
3. Sensori: attiva o disattiva un controllo.

check_circle

Cosa fare

Utilizza un indicatore di selezione delle icone per mostrare chiaramente l'elemento selezionato in un elenco. In questo modo, gli utenti potranno identificare facilmente quale articolo hanno selezionato e miglioreranno 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 posizionare pulsanti all'interno di un elemento dell'elenco, in quanto potrebbe creare confusione su quale elemento sia attualmente attivo.

Icone

check_circle

Cosa fare

Se nell'elenco vengono mostrati 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 quando 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ò confondere gli utenti dal punto di vista visivo. Utilizza invece le icone solo quando aggiungono valore o forniscono informazioni aggiuntive.

Avatar e immagini

Gli elementi dell'elenco possono includere immagini ritagliate circolari per rappresentare una persona fisica o giuridica.