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.
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.
- Elenco di una riga: una singola riga per comunicare ciascun elemento. Questo semplice
garantisce che ogni elemento sia chiaramente distinto dall'altro.
- Elenco a due righe: utilizza due righe parallele per comunicare ciascun elemento.
Questo design strutturato garantisce una leggibilità naturale ed evita
un sovraccarico.
- Elenco di tre righe: utilizza tre linee parallele per rappresentare ciascun elemento.
Questo design decorativo crea un elevato livello di importanza visiva.
Anatomia
- Icona: un piccolo grafico che rappresenta un oggetto o un'azione specifici, spesso
utilizzati per comunicare visivamente un'idea o un concetto.
- Overline: una breve riga di testo che compare sopra il titolo o il sottotitolo.
spesso utilizzati per fornire ulteriore contesto o enfasi.
- Titolo: una riga di testo lunga e in grassetto che funge da intestazione principale del
un elemento di design o una pagina.
- Sottotitolo: una riga di testo più piccola che fornisce informazioni aggiuntive.
o contesto sotto un titolo principale.
- 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.
- Caselle di controllo. Seleziona una o più voci dell'elenco.
- Pulsanti di opzione: selezionane uno solo.
voce dell'elenco.
- 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.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2024-08-19 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Mancano le informazioni di cui ho bisogno"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Troppo complicato/troppi passaggi"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Obsoleti"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema di traduzione"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema relativo a esempi/codice"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Altra"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Facile da capire"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Il problema è stato risolto"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Altra"
}]
{"lastModified": "Ultimo aggiornamento 2024-08-19 UTC."}
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2024-08-19 UTC."]]