Voci elenco

Una visualizzazione elenco mostra i contenuti come elementi pubblicitari in un elenco a una colonna che scorre verticalmente. Questa visualizzazione è migliore 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, consentendo di visualizzare più elementi sullo schermo.


Anatomia

In una visualizzazione elenco, ogni riga contiene un riquadro che rappresenta un elemento dell'elenco. Le azioni principali possono riempire il riquadro, in modo che gli utenti possano avviare un'azione da qualsiasi punto del riquadro. Per le azioni supplementari rappresentate da icone e testo, è possibile usare solo l'area contenente le icone e il testo.

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

Specifiche

Voce dell'elenco a riga singola

Voce dell'elenco su due righe

Voce dell'elenco di due righe invertita

Voce dell'elenco su più righe con intestazione

Voce dell'elenco su più righe senza intestazione

Voce dell'elenco con overflow del testo

Voce dell'elenco con azioni di suddivisione

Posizionamento dell'icona dell'indicatore negli elementi dell'elenco


Layout di scalabilità

Questi layout di riferimento mostrano come adattare gli elementi dell'elenco per adattarli a 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 vengono visualizzati in pixel sottoposti a rendering, prima che si verifichi qualsiasi down-sampling o up-sampling.

Schermi standard, larghi ed extra larghi

Schermi standard, larghi ed extra larghi con riquadro di contenuti

Schermi grandangolari


Stili

Tipografia

Stile tipo Tipo di carattere Peso Dimensioni (dp)
Corpo 1 Roboto Periodici 32
Corpo 3 Roboto Periodici 24

Colore

Elemento Colore(modalità giorno) Colore (modalità notturna)
Tipo principale / icone di colore bianco Bianco all'88%
Tipo secondario / icone Bianco @ 72% Bianco @ 60%
Linea di divisione Bianco @ 22% Bianco @ 12%
Sfondo voce elenco di colore nero di colore nero

Taglie

Elemento Dimensioni (dp)
Altezza voce elenco 96 (schermo corto) / 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 di divisione 1

Esempi

Elenco impostazioni - giorno
Elenco impostazioni - notte
Elenco impostazioni - giorno
Elenco impostazioni - notte
Elenco contenuti multimediali - giorno
Elenco contenuti multimediali - notte