Il modello Griglia presenta gli elementi in un layout a griglia ed è utile quando gli utenti si affidano principalmente alle immagini per effettuare le loro selezioni.
Questo modello può essere incorporato nel modello Scheda per fornire una navigazione a schede o incluso nel modello Mappa + Contenuti per fornire una griglia su una mappa.
Il modello di griglia include quanto segue:
- Intestazione facoltativa (l'intestazione viene sostituita dalle schede quando questo modello viene incorporato nel modello Scheda)
- Elementi della griglia (vedi la nota di seguito), ciascuno contenente un'icona o un'immagine di grandi dimensioni
- Testo principale per ogni elemento della griglia (facoltativo)
- Testo secondario per ogni elemento della griglia (facoltativo)
- Un'immagine o un'icona (facoltativa)
- Un badge
- Pulsanti di azione mobile facoltativi
Per una maggiore flessibilità e per usufruire delle funzionalità più recenti, utilizza il modello di elemento a sezioni anziché il modello a griglia. Con il modello di elemento a sezioni, puoi combinare elenchi e griglie per creare una struttura di navigazione personalizzata.
Requisiti UX del modello a griglia
| SHOULD | Limita la lunghezza delle stringhe di testo primario e secondario per evitare il troncamento. |
| SHOULD | Avere un'azione associata a ogni elemento della griglia (gli elementi solo informativi non sono consigliati). |
| SHOULD | Indica chiaramente lo stato dell'elemento (per gli elementi della griglia che hanno più stati, ad esempio selezionato e non selezionato) tramite variazioni di immagine, icona o testo. |
| SHOULD | Includi un'intestazione con un titolo facoltativo e azioni principali e secondarie. |
| NON DEVE | Includi contemporaneamente una barra delle azioni e un pulsante di azione mobile. |
| MAG | Mostra un indicatore di caricamento anziché l'icona o l'immagine di un elemento della griglia quando è in corso un'azione associata all'elemento. |
Risorse
| Tipo | Link |
| Riferimento API |
GridTemplate, GridTemplate.Builder
|