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:

   

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

   

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":

   

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).

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.

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":

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:

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.

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:

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:

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

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:

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

Infine, assegna questi colori alle lancette effettive che appaiono sul 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):

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:

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:

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: