Questa pagina è stata tradotta dall'API Cloud Translation.

Griglie

Una visualizzazione a griglia mostra due o più colonne di immagini che rappresentano gli elementi del contenuto, con un breve testo sotto ogni immagine. Questa visualizzazione è ideale quando gli utenti si affidano principalmente alle immagini per effettuare le loro selezioni.

Le griglie sono scorrevoli verticalmente e possono variare in dimensioni, spaziatura e numero di colonne. Il contenuto della griglia può anche essere raggruppato in categorie.

Componente elementi elenco

Gli elenchi rappresentano un modo alternativo per visualizzare contenuti che richiedono un testo più esplicativo.

Anatomia

Le griglie contengono testo e controlli dell'interfaccia utente. Poiché gli utenti devono rispondere a queste griglie, non dovrebbero mai essere oscurate, né da altri elementi né dal bordo dello schermo.

1. Elemento della griglia
2. Testo primario e secondario
3. Sfondo a griglia

Specifiche

Componente elementi elenco

Specifiche, linee guida di stile e altro ancora.

Griglia dei contenuti (3 o 4 colonne)

Griglia app (4 colonne)

Griglia delle app con gli elementi utilizzati di frequente nella riga superiore

Posizionamento dell'icona dell'indicatore nel layout della griglia

Ridimensionamento dei layout

Questi layout di riferimento mostrano come adattare le griglie per adattarsi a schermi di diverse larghezze e altezze. Si noti che tutti i valori dei pixel sono espressi in pixel renderizzati, prima di qualsiasi sottocampionamento o sovracampionamento.

Schermi di larghezza standard

Schermi ampi

Per schermi di grandi dimensioni, si consiglia un layout a 3 colonne. Se si utilizza un layout a 4 colonne, mantenere una dimensione minima del riquadro di 219 dp.

Schermi extra-wide e super-wide

Spaziatura verticale delle griglie delle app su schermi di varie altezze

Per schermi corti, la spaziatura verticale dovrebbe essere ridotta tra gli elementi del contenuto della griglia e tra le icone e i titoli delle app.

Stili

Tipografia

Stile del tipo	Carattere tipografico	Peso	Dimensioni (dp)
Corpo 1	Roboto	Regolare	32
Corpo 2	Roboto	Regolare	28
Corpo 3	Roboto	Regolare	24

Colore

Elemento	Colore (modalità giorno)	Colore (modalità notturna)
Tipo primario / icone	Bianco	Bianco all'88%
Tipo secondario / icone	Bianco al 72%	Bianco al 60%
Linea divisoria	Bianco al 22%	Bianco al 12%
Sfondo griglia	Nero	Nero
Contenuto scrim	N / A	Nero al 22%
Troncamento del gradiente	Nero @ 0-100% nel 10% dello spazio del testo	Nero @ 0-100% nel 10% dello spazio del testo

Dimensionamento

Elemento	Dimensioni (dp)
Icona dell'app	76
Min app cell	135
Cella con contenuto minimo	158

Elevazione

Elemento	Colore	asse Y	Sfocatura
Griglia piastrellata	Nero al 22%	2	2