Sistema di progettazione di piastrelle

I riquadri condividono alcuni elementi di design fondamentali. Usa componenti e modelli di riquadri per creare riquadri unici per la tua app.

Elementi fondamentali

La tabella seguente descrive gli elementi fondamentali di progettazione dei riquadri.

testo_alt testo_alt
testo_alt testo_alt testo_alt

Icona dell'app

Le icone delle app sono fornite dallo sviluppatore dell'app e vengono mostrate temporaneamente sullo schermo.

Area di progettazione

Ogni modello di riquadro ha le proprie regole per l'area dei contenuti principali. Assicurati di fare riferimento alle indicazioni relative al layout.

Pulsante in basso

I pulsanti sono importanti per attivare azioni secondarie nel riquadro. Posiziona i pulsanti al 6,3% sopra la parte inferiore dello schermo.

Icona dell'app

Wear mostra automaticamente l'icona dell'app mentre l'utente scorre il carosello di riquadri. L'icona dell'app scompare e non deve essere implementata all'interno del riquadro. Per ulteriori informazioni sulla creazione delle icone delle app, consulta Icone dei prodotti.

testo_alt

Figura 1. Esempi di icone delle app

Wear mostra automaticamente l'icona dell'app

Supponiamo che Wear OS mostri automaticamente l'icona dell'app.
Posiziona l'icona dell'app sul riquadro o verrà visualizzata due volte.

Pulsante

Scegli un testo breve per i pulsanti. Utilizza un testo specifico per l'azione e la destinazione dell'invito all'azione. Assicurati che la traduzione del testo del pulsante rientri nel numero di caratteri. Se il testo del pulsante tradotto è troppo lungo, imposta la dicitura Altro sul pulsante.

testo_alt testo_alt testo_alt

Posizionamento

Specifiche pulsante

Tipo

Posiziona il pulsante a metà 6,3% dal basso se il quadrante orologio. Lascia una spaziatura interna di 12 dp su entrambi i lati. Le dimensioni dei caratteri non sono scalabili. Imposta una dimensione minima di nove caratteri. Per le lingue non latine, utilizza una dimensione dei caratteri minima di sette.

Modelli

Sono disponibili quattro tipi di modelli di riquadro. Scarica il Tile Design Kit (Figma) per vedere gli esempi e fornire un feedback sulla tua esperienza nell'utilizzo di questo modello.

Incentrato sul testo

Il modello di riquadri basati su testo è progettato per visualizzare testo sui riquadri come le ultime notizie, i prossimi eventi e i promemoria. Viene comunemente utilizzato per gli stati di accesso, errore e configurazione, allo scopo di informare gli utenti su ciò che sta accadendo e offrire un chiaro invito all'azione.

incentrato sul testo

Incentrato sui pulsanti

Il modello di riquadri incentrato sui pulsanti è progettato per i riquadri con un massimo di cinque azioni principali. Utilizza questo modello per avviare rapidamente attività specifiche.

pulsante incentrato su

Incentrato sulle informazioni

Il modello di riquadri incentrato sulle informazioni mostra metriche e progressi di alto livello. Questa funzionalità è particolarmente utile per i riquadri relativi a salute e fitness. Offre opzioni flessibili per la visualizzazione dei contenuti. Per mantenere la visibilità, dai priorità ai dati importanti ed evita di sovraccaricare il modello.

incentrato sulle informazioni

Incentrato sui dati

Il modello di riquadri incentrato sui dati è versatile e consente di visualizzare grafici ed elementi grafici che riepilogano informazioni periodiche. Offre flessibilità nella visualizzazione dei dati ed è utile per creare stati visivi vuoti. Mantenere elementi grafici semplici è essenziale per garantire che il riquadro resti facilmente visibile.

incentrato sui dati

Colore

Per rendere visibili i riquadri, limitati a tre colori.

Imposta il colore di sfondo su nero.
Imposta il colore di sfondo su un'immagine o un colore al vivo.

Tipografia

Utilizza Roboto come carattere principale su Wear OS. Usa Corpo 2 come dimensione predefinita e minima per il carattere e Visualizza 2 come dimensione più grande.

dimensione tipo

Per ulteriori informazioni su carattere, spessore e dimensioni, consulta la sezione Tipografia.

Componenti

Usa i componenti per creare i tuoi riquadri. Personalizza i colori del componente per esprimere il tuo brand seguendo le linee guida sui temi dei materiali di utilizzo.

Scarica il Tile Design Kit (Figma) per vedere alcuni esempi di componenti.

Component Variante Esempio
Pulsante Pulsante standard

Taglie disponibili: Standard, Large ed Extra Large

testo_alt
Pulsante Pulsante testo standard

Taglie disponibili: Standard, Large ed Extra Large

testo_alt
Chip Chip standard principale testo_alt
Chip Chip standard secondario testo_alt
Chip Chip di avatar piccolo testo_alt
Chip Chip avatar grande testo_alt
Chip Chip compatto (in basso) testo_alt
Indicatore avanzamento Indicatore di avanzamento standard testo_alt
Indicatore avanzamento Indicatore di avanzamento con intervallo testo_alt

Risorse

Per ulteriori informazioni, consulta le linee guida per la progettazione dei riquadri.