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.
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
