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.


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.

  1. Elemento griglia
  2. Testo principale e secondario
  3. Sfondo griglia

Specifiche

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.

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

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

Dimensioni

Elemento Dimensioni (dp)
Icona dell'app 76
Numero minimo di celle dell'app 135
Numero minimo di celle dei contenuti 158

Elevation

Elemento Colore Asse Y Sfoca
Riquadro della griglia Nero al 22% 2 2

Esempi

Griglia di app - giorno
Griglia di app - notte
Griglia di contenuti - giorno
Griglia di contenuti - notte
L'utente trascina verso l'alto o verso il basso per scorrere i contenuti