Utilizzo avanzato di Watch Face Designer

Questa pagina illustra casi d'uso più avanzati per Watch Face Designer, tra cui come aggiungere il supporto per i quadranti secondari, le complicazioni e i temi di colore. Per scoprire di più su come iniziare, consulta la guida ai principi di base.

Quadranti secondari

Puoi creare lancette analogiche che ruotano all'interno di una sezione del quadrante, proprio come un quadrante secondario su un vero orologio da polso.

Per farlo, segui questi passaggi:

1. Crea una cornice vuota che copra l'area in cui hai posizionato il quadrante secondario nel tuo design:

   

   Figura 1: cornice vuota che copre uno spazio per il quadrante secondario

2. Progetta la lancetta dei secondi all'interno di questa cornice:

   

   Figura 2: design della lancetta dei secondi all'interno di una cornice contenitrice

3. Seleziona la cornice del quadrante secondario che contiene la lancetta dei secondi. Poi, in Watch Face Designer, imposta Ruota intorno a su "Centro livello":

   

   Figura 3: dopo aver selezionato il frame contenitore (a sinistra), scegli il comportamento di rotazione della lancetta dei secondi (a destra)

Complicazioni

Per aggiungere uno spazio per le complicazioni, aggiungi una cornice al quadrante. All'interno di questo frame, progetta l'aspetto dello spazio per la complicazione quando è vuoto. Questo costituisce la base per gli altri tipi di complicazioni, come icone e testo.

Esistono molti tipi diversi di complicazioni. Il quadrante fornisce modelli per ogni tipo e le app sullo smartwatch di un utente decidono quale modello utilizzare e quali dati fornire. L'utente sceglie quale app inserire in quale slot per complicazioni.

Seleziona il frame contenente il design per lo spazio della complicazione. Poi, in Watch Face Designer, imposta Comportamento su "Spazio complicazione". Questo processo crea un componente con una variante (un design vuoto).

Figura 4: dopo aver selezionato il frame contenitore (a sinistra), scegli il comportamento dello "spazio per complicazioni" (a destra)

Applica i tipi di spazi per le complicazioni

Poiché non è molto utile includere uno spazio per complicazioni che supporta solo il tipo "vuoto", aggiungi un altro tipo. Nella finestra di Watch Face Designer, premi + Supporta un nuovo tipo e seleziona "Testo breve". Il testo breve è un tipo di complicazione supportato dalla maggior parte delle app, che mostra due piccole etichette insieme a un'icona.

Figura 5: aggiunta del supporto per un tipo di complicazione "testo breve"

Questo passaggio crea un'altra variante per rappresentare il nostro design per questo tipo di complicazione. Seleziona la riga "Testo breve" per passare direttamente a questa.

Quando modifichi i livelli all'interno di un modello di complicazione, viene visualizzata un'opzione "Comportamento". Questa opzione è simile a quella sui quadranti, ma qui puoi selezionare comportamenti specifici per il tipo di complicazione che stai modificando.

Per questo esempio, i livelli all'interno di una complicazione di testo breve possono essere il titolo dell'app, il testo o un'icona monocromatica. Monocolore significa che l'icona eredita il colore che hai impostato in Figma.

Dopo aver disegnato un rettangolo in cui vuoi che venga visualizzata l'icona dell'app sul quadrante, vai alla finestra Watch Face Designer e imposta Comportamento su "Icona monocolore":

Figura 6: modifica l'aspetto di uno slot complicazione per mostrare un'icona monocolore

A questo punto, crea due livelli di testo. Questi livelli rappresentano altri due slot "Testo breve": uno per il titolo e uno per il testo:

Figura 7: due livelli di testo mostrati in un layout dello spazio per la complicazione

L'anteprima mostra come viene creata la complicazione. Questo esempio mostra come potrebbe apparire una complicazione se a questo spazio fosse assegnata l'app di calendario.

Per mostrare il testo in caratteri maiuscoli, come mostrato nell'immagine seguente, utilizza la funzionalità di maiuscole e minuscole nel menu Tipografia di Figma.

Figura 8: il pannello Caratteri in Figma, mostrato con l'opzione "Maiuscole" selezionata

Tieni presente che, a differenza del tempo digitale, non esiste un'esportazione arbitraria di caratteri per il testo della complicazione. Le complicazioni vengono sempre disegnate utilizzando il carattere di sistema del dispositivo Wear OS, che può variare, ma in genere è Roboto.

Per aggiungere il supporto per altri tipi di complicazioni o personalizzare le impostazioni correlate, come App predefinita o se lo spazio viene visualizzato quando lo smartwatch è in modalità Ambient, seleziona lo spazio della complicazione all'interno del quadrante:

Figura 9: Watch Face Designer supporta un'ulteriore personalizzazione per gli spazi delle complicazioni, inclusa l'impostazione di un'app predefinita e l'attivazione/disattivazione della visualizzazione della complicazione in modalità Always On (sistema ambient)

Temi colore

All'interno del quadrante, puoi includere più opzioni per i temi cromatici. L'utente può quindi scegliere il tema che preferisce utilizzando il selettore dei quadranti sullo smartwatch.

Watch Face Designer include il supporto per i temi di colore che utilizzano gli stili Figma.

Considera il caso in cui, dato il seguente quadrante, vuoi consentire all'utente di personalizzare i colori delle lancette e del quadrante:

Figura 10: il quadrante dell'orologio di esempio "Bauhaus", che supporta la modifica del colore delle lancette e del quadrante

Crea il primo stile

Per creare uno stile di colore personalizzabile sullo smartwatch, crea un nuovo stile:

1. Deseleziona tutti gli elementi sul canvas.
2. Nella barra laterale destra, accanto a Stili, seleziona il pulsante +.

Devi assegnargli un nome in un modo specifico:

Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name

Nota:Figma utilizza le barre (/) per rappresentare le cartelle negli stili.

In questo caso, il nome del quadrante di esempio è Bauhaus, quindi il colore inizia con questo, seguito da Hands, che è l'elemento che gli utenti possono personalizzare. Poi, fornisci un nome di colore descrittivo, ad esempio Charcoal, e specifica quale elemento specifico, la lancetta delle ore, deve cambiare colore.

Mettendo insieme tutti questi elementi, il nome finale è: Bauhaus/Hands/Charcoal/Hours:

Figura 11: la finestra di dialogo Crea nuovo stile di colore, in cui puoi aggiungere stili di colore personalizzabili dall'utente a un quadrante

Segui una procedura simile per creare un tema di colori personalizzato per la lancetta dei minuti:

Figura 12: applicazione dello stile Carbone a un altro elemento all'interno del quadrante

Infine, assegna questi colori alle lancette effettive che appaiono sul quadrante:

Figura 13: assegnazione del tema Bauhaus/Hands/Charcoal/Minutes alla lancetta dei minuti del quadrante

Aggiungi un altro stile

Crea un nuovo stile modificando la parte Theme Name dello stile. Il seguente esempio aggiunge un nuovo stile chiamato Rust (Bauhaus/Hands/Rust/Hours):

Figura 14: un nuovo tema di colore per le lancette del quadrante chiamato Ruggine

L'utente può quindi passare dal tema di colore"Antracite " a"Ruggine" sul proprio dispositivo e le lancette delle ore e dei minuti del quadrante vengono ricolorate di conseguenza:

Figura 15: la schermata di configurazione rivolta all'utente per la selezione di un tema di colore per le lancette del quadrante (a sinistra), nonché l'effetto della selezione di Ruggine da questo elenco (a destra).

Applica ad altri elementi

Segui passaggi simili per rendere modificabili altri elementi del quadrante. Questi temi possono essere combinati e puoi utilizzare un numero qualsiasi di stili di colore per creare temi complessi intercambiabili:

Figura 16: un elenco più completo di stili

Con il set di stili precedente, hai fornito due opzioni per le lancette: Rust e Charcoal e tre opzioni per il quadrante: Light, Dark e Duotone:

Figura 17: schermata di configurazione rivolta all'utente per la scelta tra i temi di colore supportati per il quadrante dell'orologio