Gli elenchi sono una rappresentazione visiva di uno o più elementi correlati. Sono solitamente utilizzati per mostrare una raccolta di opzioni.
Risorse
Tipo | Collega | Stato |
---|---|---|
Progettazione | Origine progettazione (Figma) | Disponibile |
Implementazione | Jetpack Compose | Disponibile a breve |
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.
- Elenco di una riga: una singola riga per comunicare ogni elemento. Questo design semplice fa sì che ogni articolo sia chiaramente distinto dall'altro.
- Elenco a due righe: utilizza due righe parallele per comunicare ogni elemento. Questo design strutturato garantisce una leggibilità naturale ed evita sovraccarichi cognitivi.
- Elenco di tre righe: utilizza tre righe parallele per rappresentare ogni elemento. Questo design decorativo conferisce un'elevata visibilità visiva.
Anatomia
- Icona: una piccola immagine che rappresenta un oggetto o un'azione specifici, spesso utilizzata per comunicare visivamente un'idea o un concetto.
- Sottotitolo: una breve riga di testo visualizzata sopra il titolo o il sottotitolo, spesso utilizzata per fornire ulteriore contesto o enfatizzare.
- Titolo: una riga di testo grande e in grassetto che funge da intestazione principale di un elemento o di una pagina di design.
- Sottotitolo: una riga di testo più piccola che fornisce informazioni o contesto aggiuntivi sotto un titolo principale.
- 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.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/container-do.webp?authuser=6&hl=it)
Cosa fare
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/container-dont.webp?authuser=6&hl=it)
Attenzione
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.
![Casella di controllo di selezione](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-checkbox.webp?authuser=6&hl=it)
![Pulsante di opzione di selezione](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-radio.webp?authuser=6&hl=it)
![Sensore di selezione](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-switch.webp?authuser=6&hl=it)
- Caselle di controllo: seleziona uno o più elementi dell'elenco.
- Pulsanti di radio: seleziona un solo elemento dell'elenco.
- Selettori: attiva o disattiva un controllo.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-do.webp?authuser=6&hl=it)
Cosa fare
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-dont.webp?authuser=6&hl=it)
Cosa non fare
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/action-dont.webp?authuser=6&hl=it)
Cosa non fare
Icone
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/icon-do.webp?authuser=6&hl=it)
Cosa fare
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/icon-dont.webp?authuser=6&hl=it)
Cosa non fare
Avatar e immagini
Gli elementi dell'elenco possono includere immagini in un ritaglio circolare per rappresentare una persona o un'entità.