Gli elenchi sono una rappresentazione visiva di uno o più elementi correlati. Di solito vengono utilizzati per visualizzare una raccolta di opzioni.
Risorse
Tipo | Link | Stato |
---|---|---|
Design | Origine progettazione (Figma) | Disponibile |
Implementazione | Jetpack Compose | Disponibile |
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.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/container-do.webp?authuser=3&hl=it)
Cosa fare
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/container-dont.webp?authuser=3&hl=it)
Attenzione
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.
![Casella di controllo di selezione](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-checkbox.webp?authuser=3&hl=it)
![Radio di selezione](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-radio.webp?authuser=3&hl=it)
![Opzione di selezione](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-switch.webp?authuser=3&hl=it)
- 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.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-do.webp?authuser=3&hl=it)
Cosa fare
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-dont.webp?authuser=3&hl=it)
Cosa non fare
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/action-dont.webp?authuser=3&hl=it)
Cosa non fare
Icone
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/icon-do.webp?authuser=3&hl=it)
Cosa fare
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/icon-dont.webp?authuser=3&hl=it)
Cosa non fare
Avatar e immagini
Gli elementi dell'elenco possono includere immagini ritagliate circolari per rappresentare una persona fisica o giuridica.