Questa pagina è stata tradotta dall'API Cloud Translation.

Griglia

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

Le griglie sono scorrevoli in verticale e possono variare per dimensioni, spaziatura e numero di colonne. I contenuti della griglia possono anche essere raggruppati in categorie.

Componente Elenco elementi

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

Anatomia

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

Elemento griglia

Testo principale e secondario

Sfondo griglia

Specifiche

Etichette di layout

Definizioni di E, M, KL, P, Flex

Componente Elenco elementi

Specifiche, linee guida per lo stile e altro ancora

Griglia dei contenuti (3 o 4 colonne)

Griglia di app (4 colonne)

Griglia di app con elementi utilizzati di frequente nella prima riga

Posizione dell'icona dell'indicatore nel layout a griglia

Layout di scalabilità

Questi layout di riferimento mostrano come adattare le griglie 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 sono in pixel sottoposti a rendering, prima che si verifichi qualsiasi campionamento inferiore o superiore.

Layout

Margini, scorciatoie e spaziatura interna per schermi di varie dimensioni

Etichette di layout

Definizioni di E, M, KL, P, Flex

Schermate a larghezza standard

Widescreen

Per gli schermi larghi, è consigliato un layout a tre colonne. Se utilizzi un layout a 4 colonne, mantieni una dimensione minima del riquadro di 219 dp.

Schermi ultrawide e superwide

Spaziatura verticale delle griglie di app su schermi di varie altezze

Per gli schermi brevi, la spaziatura verticale deve essere ridotta tra gli elementi dei contenuti della griglia e tra le icone e i titoli delle app.

Stili

Linee guida tipografiche

Riferimenti a scala e griglia, esempi tipografici e altro ancora

Linee guida per i colori

Tavolozze, valori di altitudine e opacità e altro ancora

Tipografia

Tipo di stile	Tipo di carattere	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 / icone principali	Bianco	Bianco @ 88%
Tipo / icone secondarie	Bianco @ 72%	Bianco al 60%
Linea di divisione	Bianco @ 22%	Bianco al 12%
Sfondo griglia	Nero	Nero
Scarto per i contenuti	N/D	Nero al 22%
Troncamento sfumatura	Nero @ 0-100% nel 10% dello spazio di testo	Nero @ 0-100% nel 10% dello spazio di testo