Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Carte

Le schede possono contenere un'ampia gamma di informazioni, come testo, icone, immagini, risposte di Gemini o azioni.

Gli elementi di design devono essere ancorati alla parte inferiore del frame.

Principi

Coerenza: le schede raggruppano informazioni e azioni correlate in un'unica unità facilmente fruibile.

Chiarezza: presentano i contenuti in modo chiaro e organizzato, migliorandone la scannabilità.

Versatilità: le schede possono adattarsi per mostrare un'ampia gamma di contenuti, da piccole descrizioni di testo a riepiloghi più complessi con più elementi.

Modularità: progettate per essere modulari e riutilizzabili in diverse parti dell'interfaccia Jetpack Compose Glimmer per occhiali.

Utilizzo e posizionamento

Le schede possono contenere un'ampia gamma di informazioni, come testo, icone, immagini, azioni o risposte di Gemini.

Gli elementi di design devono essere ancorati alla parte inferiore del frame.

Utilizza i modelli di schede Jetpack Compose Glimmer per i contenuti, in quanto sono disponibili in molte varianti e ottimizzati per seguire i principi di progettazione degli occhiali.

Cosa fare

Mantieni i contenuti concisi e rispetta le best practice di stile, ad esempio l'utilizzo dei colori.

Cosa non fare

Saturare gli utenti con troppi contenuti all'interno delle schede o abbandonare le linee guida di stile.

Utilizza un gruppo di pulsanti con una scheda per visualizzare più di un'azione.

Cosa fare

Avere esattamente un pulsante nidificato in una scheda per una messa a fuoco più chiara.

Cosa non fare

Avere più pulsanti all'interno di una scheda. Le schede non devono essere trattate come una finestra di dialogo mobile.

Anatomia

Le schede sono create con modelli di slot preimpostati.

Gli elementi di design devono essere ancorati alla parte inferiore del frame. 1. Intestazione: la sezione superiore della scheda, progettata per contenere un'immagine.

2. Titolo e sottotitolo: questi campi di testo forniscono le etichette principale e secondaria per la scheda.

3. Icona iniziale: un'icona facoltativa che viene visualizzata all'inizio dell'area dei contenuti della scheda.

4. Icona finale: un'icona facoltativa che viene visualizzata alla fine dell'area dei contenuti della scheda.

5. Azione: uno spazio per un elemento interattivo principale, ad esempio un pulsante. In questo modo, gli utenti possono eseguire un'azione direttamente dalla scheda. Se una scheda ha un'azione, deve contenerne una sola.

6. Contenuti principali: il corpo principale della scheda, in cui inserisci il testo o altri contenuti principali.

Obiettivo

Per le schede il cui scopo principale è ospitare un elemento interattivo specifico (come.il pulsante nell'azione), lo stato attivo deve passare direttamente a quell'elemento, non al contenitore della scheda. Una scheda diventa selezionabile quando rappresenta un singolo elemento navigabile, ad esempio una voce in un elenco. In questo modo, l'esperienza utente è più diretta e accessibile.

Gli elementi di design devono essere ancorati alla parte inferiore del frame. Una scheda attiva come elemento di elenco.

Gli elementi di design devono essere ancorati alla parte inferiore del frame. Un pulsante all'interno di una scheda viene messo in evidenza come elemento interattivo.