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.
Icona dell'appLe icone delle app sono fornite dallo sviluppatore dell'app e vengono mostrate temporaneamente sullo schermo. |
Area di progettazioneOgni modello di riquadro ha le proprie regole per l'area dei contenuti principali. Assicurati di fare riferimento alle indicazioni relative al layout. |
Pulsante in bassoI 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.
Wear mostra automaticamente l'icona dell'app
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.
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 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.
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 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.
Colore
Per rendere visibili i riquadri, limitati a tre colori.
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.
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 |
Pulsante | Pulsante testo standard | Taglie disponibili: Standard, Large ed Extra Large |
Chip | Chip standard principale | |
Chip | Chip standard secondario | |
Chip | Chip di avatar piccolo | |
Chip | Chip avatar grande | |
Chip | Chip compatto (in basso) | |
Indicatore avanzamento | Indicatore di avanzamento standard | |
Indicatore avanzamento | Indicatore di avanzamento con intervallo |
Risorse
Per ulteriori informazioni, consulta le linee guida per la progettazione dei riquadri.