Voci elenco

In una visualizzazione elenco vengono mostrati i contenuti come elementi pubblicitari in un elenco a colonna singola che scorre in verticale. Questa visualizzazione è ideale quando gli utenti si affidano alla lettura del testo e alla visualizzazione dei dati per effettuare la selezione.

Gli elementi dell'elenco richiedono meno spazio verticale rispetto agli elementi della griglia, consentendoti di visualizzare più elementi sullo schermo.


Anatomia

In una visualizzazione elenco, ogni riga contiene un riquadro che rappresenta una voce dell'elenco. Le azioni principali possono riempire il riquadro, così gli utenti possono avviare l'azione da qualsiasi punto del riquadro. Per le azioni supplementari rappresentate da icone e testo, è utilizzabile solo l'area geografica che contiene le icone e il testo.

1. Icona principale
2. Pulsante del selettore attivo
3. Pulsante del selettore disattivato
4. Testo principale e secondario
5. Riquadro dei contenuti

Specifiche

Voce elenco singola

Voce elenco a due righe

Elemento dell'elenco di due righe invertito

Voce di elenco a più righe con intestazione

Voce elenco su più righe senza intestazione

Voce elenco con overflow di testo

Voce dell'elenco con azioni divise

Posizione dell'icona dell'indicatore nelle voci dell'elenco


Layout di scalabilità

Questi layout di riferimento mostrano come adattare gli elementi dell'elenco per adattarli agli schermi di varie larghezze e altezze. Le categorie di larghezza e altezza sono definite nella sezione Layout. Tieni presente che tutti i valori dei pixel sono in pixel sottoposti a rendering, prima che si verifichi qualsiasi campionamento inferiore o superiore.

Schermi standard, larghi ed extra wide

Schermate standard, larghe ed extra larghe con riquadro dei contenuti

Schermi ultrawide


Stili

Tipografia

Tipo di stile Tipo di carattere Peso Dimensioni (dp)
Corpo 1 Roboto Regolare 32
Corpo 3 Roboto Regolare 24

Colore

Elemento Colore(modalità Giorno) Colore (modalità notturna)
Tipo / icone principali Bianco Bianco @ 88%
Tipo / icone secondarie Bianco @ 72% Bianco al 60%
Linea di divisione Bianco @ 22% Bianco al 12%
Sfondo voce elenco Nero Nero

Dimensioni

Elemento Dimensioni (dp)
Altezza voce elenco 96 (schermate brevi) / 116 (schermo standard) / 128 (schermo alto)
Icona principale 44
Icona terziaria 24
Riquadro dei contenuti Altezza voce elenco meno 1 dp
Avatar medio 76
Spessore linea divisoria 1

Esempi

Elenco impostazioni - giorno
Elenco impostazioni - notte
Elenco impostazioni - giorno
Elenco impostazioni - notte
Elenco media - giorno
Elenco media - notte