Gli elenchi sono contenitori di elementi con scorrimento e messa a fuoco integrati.
dell'AI
Organizzazione chiara: gli elenchi devono presentare le informazioni in una disposizione verticale chiara e scansionabile.
Presentazione coerente degli elementi: gli elementi dell'elenco devono seguire una struttura visiva coerente.
Focus e navigazione: nelle interfacce che si basano sulla navigazione direzionale, gli elenchi devono indicare chiaramente l'elemento attivo.
Interattività: gli elementi dell'elenco spesso rappresentano elementi selezionabili o su cui è possibile intervenire.
Utilizzo e posizionamento
Gli elenchi possono contenere vari contenuti correlati con elementi ripetibili. A differenza delle pile, gli elenchi riempiono il contenitore della visualizzazione dell'app.
Utilizzare le maschere per indicare i contenuti in overflow
Quando un elenco contiene più elementi di quelli che possono essere visualizzati in una visualizzazione, viene utilizzato un velo nero vicino ai limiti dell'elenco.
Se necessario, gli elenchi possono utilizzare un titolo
Un titolo statico o sticky può essere utilizzato in un elenco per chiarezza.
Cosa non fare
Utilizzare la profondità per indicare la messa a fuoco
Le voci di elenco si spostano tra 0 e +4 di profondità per gli stati non attivi e attivi.
Le voci elenco possono essere azionabili
Gli elementi di un elenco possono fungere da azioni. Mantieni l'azione sull'elemento dell'elenco
Anatomia
L'elenco è composto da un contenitore scorrevole e da elementi dell'elenco spaziati in modo uniforme. Le liste devono scorrere verticalmente, con un overshoot minimo, quando il numero di elementi supera l'area visibile.
A. Contenitore - area scorrevole
B. Voce elenco
C. Barre di sistema
List
Item: ogni singolo elemento all'interno dell'elenco.
A. Forma
B. Bordo
C. Icona iniziale
D. Contenuti testuali
E. Indicatore di scia
Personalizzazione
La maggior parte della personalizzazione avviene con le voci di elenco.
| Proprietà | Personalizzazione | Impostazioni predefinite |
|---|---|---|
| Voce elenco: forma | Sì | 40 dp |
| Elemento di elenco: icona iniziale e finale | Sì | Icona del simbolo di gravità media |
| Elemento di elenco: valori di spaziatura interna | Sì | 2d dp, 20 dp |
| Elemento dell'elenco: contenuti | Sì | A una riga: un elemento componibile Text per l'etichetta principale che utilizza Body Small A due righe: una colonna contenente due elementi componibili Text per un'etichetta principale e una secondaria Principale: Title Small Secondaria: Body Small |
| Elenco: verticalArrangement | Sì | 20 dp |