Best practice per le schede

Design su nero

Progettare su uno sfondo nero è fondamentale per Wear OS per due motivi principali:

  • Efficienza della batteria: ogni pixel illuminato sullo schermo consuma energia. Se utilizzi uno sfondo nero, riduci al minimo il numero di pixel attivi, prolungando la durata della batteria.
  • Estetica senza interruzioni: uno sfondo nero contribuisce a ridurre al minimo visivamente la lunetta dello smartwatch, creando l'illusione di una superficie continua che si estende fino al bordo del dispositivo. La presenza di elementi dell'interfaccia utente in questo spazio migliora ulteriormente questo effetto.

Esegui questa azione

Imposta sempre il colore di sfondo su nero.

Non farlo

Non impostare lo sfondo come immagine a tutta pagina o come colore a blocchi.

Includi solo gli elementi necessari

Se l'opzione è attiva (ad esempio, se utilizzi ProtoLayout Material3 PrimaryLayout), Wear OS mostrerà automaticamente l'icona dell'app permanente, che verrà visualizzata automaticamente quando l'utente scorre il carosello di riquadri. L'icona dell'app non deve essere progettata e aggiunta come parte del riquadro.

Assicurati che l'icona dell'app fornita sia monocromatica se hai un tema dinamico nel riquadro. Consulta le linee guida relative alle icone dei prodotti Android per scoprire come creare l'icona dell'app per il tuo brand.

Esegui questa azione

Wear OS potrebbe mostrare automaticamente l'icona dell'app mentre l'utente scorre il carosello di riquadri. Non è necessario inserire l'icona dell'app nel design del riquadro.

Non farlo

Non aggiungere l'icona dell'app nel design del riquadro, in quanto potrebbe essere visualizzata due volte/sovrapposta se viene mostrata anche a livello di sistema.

Nascondere i titoli delle app per garantire target di tocco minimi

Per garantire spazio sufficiente per gli elementi interattivi su schermi più piccoli, il titolo dell'app può essere nascosto quando un riquadro utilizza due righe (e una sezione in basso). In questo modo, le righe saranno abbastanza alte (almeno 48 dp). Il titolo può essere visualizzato di nuovo su schermi più grandi (da 225 dp in su).

Esegui questa azione

Su schermi di piccole dimensioni, il titolo dell'app viene nascosto per garantire che le due righe abbiano un'altezza minima e un target di tocco di 48 dp.

Non farlo

Se non nascondi il titolo dell'app su schermo piccolo e hai due righe, l'altezza dei componenti non sarà conforme ai nostri standard di accessibilità e sarà inferiore alle dimensioni minime del target di tocco. In questo esempio lo spazio per i pulsanti è inferiore a 48 dp, quindi viene tagliato.

Scegli un singolo caso d'uso principale da evidenziare

Per assicurarci che gli utenti sappiano cosa fare con ogni riquadro, che si tratti di aprire un'app, avviare un'attività o scoprire di più, è necessario che includano almeno un elemento interattivo nel layout.

Esegui questa azione

Questo riquadro specifico è efficace perché offre una piccola raccolta di opzioni e la possibilità di visualizzarne altre

Non farlo

Questa soluzione è meno utile per l'utente perché introduce una paralisi decisionale a causa di un numero eccessivo di opzioni fornite

Includi (almeno) un contenitore

Ogni riquadro nell'app deve contenere almeno un elemento contenitore ed essere completamente toccabile, con un link a una schermata corrispondente all'interno dell'app. Le informazioni del riquadro, contenute nel contenitore o presentate separatamente, devono comunicare chiaramente i contenuti collegati o l'azione disponibile.

Se vengono utilizzati pulsanti, questi devono rispettare le convenzioni di progettazione standard e fornire un'indicazione chiara della loro funzione.

Esegui questa azione

Questo riquadro funziona bene perché l'utente può intervenire su ciascuna delle funzionalità fornite, poiché sono disponibili opzioni di tocco chiare.

Non farlo

Questa scheda è meno efficace perché non indica chiaramente che l'utente può toccare i contenuti per visualizzare ulteriori informazioni

Rendere le azioni immediatamente comprensibili

Le esperienze sullo smartwatch non hanno il lusso di avere ampi spazi per comunicare il loro significato, quindi le schede più efficaci hanno componenti interattivi facilmente prevedibili.

Esegui questa azione

Un riquadro efficace sfrutta al meglio lo spazio disponibile per comunicare chiaramente il risultato di ogni azione

Non farlo

Le azioni in questo riquadro non sono chiare: dove indirizza l'utente il contenitore con la copertina dell'album e questo è diverso dal pulsante "Riproduci"?

Assegnare visivamente una priorità alle azioni

Per aiutare gli utenti a comprendere l'azione più importante in un riquadro, i contenitori interattivi devono avere la priorità visiva.

  • Utilizza i colori principali sui pulsanti di azione principali.
  • Utilizzare colori secondari/terziari per le azioni secondarie

Esegui questa azione

Questa scheda utilizza una combinazione di colori pieni (con ruoli di colore principale e secondario) con un ruolo di pulsante di fondo terziario chiaro, utilizzando lo stile di riempimento tonale

Non farlo

Questo riquadro contiene troppi utilizzi di pulsanti con stile riempito, che utilizzano tutti il ruolo del colore principale

Semplifica in meno contenitori

Per le schede, cerca di evitare di utilizzare più di un componente interattivo per attivare un'azione specifica e, al contrario, prova a semplificare il layout complessivo in meno contenitori.

Esegui questa azione

Questo riquadro utilizza diversi contenitori e ogni contenitore funge da pulsante per eseguire un'azione specifica, ad esempio avviare un timer o crearne uno nuovo.

Non farlo

L'utilizzo di 4 contenitori non è necessario in quanto tutte le informazioni verranno indirizzate alla stessa posizione

Utilizzare i container per scopi funzionali

Per garantire che gli utenti possano prevedere il comportamento di ciascun componente all'interno di un riquadro, non consigliamo di utilizzare contenitori a fini decorativi o strutturali per evitare tocchi che non fanno nulla.

Esegui questa azione

Questa soluzione funziona perché l'unica azione della scheda è un flusso di creazione e tutti gli altri contenuti sono in primo piano sullo sfondo nero

Non farlo

Questo riquadro è più confuso perché sembra che l'utente possa interagire con tutti i contenitori

Mostrare rappresentazioni rapide di grafici e diagrammi

La leggibilità è fondamentale per il design di Wear OS. Dato il tempo di visualizzazione limitato (circa 7 secondi), dai la priorità alle informazioni essenziali in un formato chiaro e facile da comprendere a colpo d'occhio.

Ricorda che lo smartwatch integra l'esperienza dello smartphone, fornendo un accesso rapido ai dettagli chiave.

Esegui questa azione

Mostrare rappresentazioni rapide e facili da leggere di informazioni numeriche o statistiche e consentire all'utente di toccare per visualizzare ulteriori informazioni in un'app, se necessario

Non farlo

Mostrare informazioni numeriche o statistiche dettagliate nel riquadro