Questa guida spiega come creare un quadrante, aggiungere elementi basati sul tempo e includere il supporto per le foto selezionate dall'utente, inclusa una galleria di più foto. Per ulteriori funzionalità, consulta la guida avanzata.
Creare un quadrante
Per creare un quadrante, disegna una cornice in Figma, quindi configurala nel seguente modo:
Imposta le dimensioni su 450 unità di larghezza per 450 unità di altezza:
Figura 1: il pannello del layout del frame di Figma, che mostra un quadrante 450x450 Anche altre dimensioni vanno bene, ma 450 x 450 è consigliata per i quadranti di Wear OS ed è necessaria per l'esportazione in Watch Face Studio.
Per un quadrante orologio a basso consumo di batteria, imposta il colore di riempimento del frame su nero:
Figura 2: riquadro di riempimento del frame che mostra un colore di riempimento nero Imposta il nome del frame sul nome che vuoi dare al quadrante. Questo viene visualizzato sugli smartwatch degli utenti.
Dopo aver creato e configurato la cornice, apri il plug-in Watch Face Designer e seleziona la cornice appena creata. Un'anteprima in tempo reale viene visualizzata nella finestra di Watch Face Designer.
Aggiungere elementi a un quadrante
Aggiungi alcuni elementi al quadrante in modo che gli utenti possano leggere l'ora.
Ora analogica
Disegna un rettangolo, che funge da lancetta dei secondi sullo smartwatch.
Verifica che, quando viene mostrato l'inizio di un nuovo minuto, il rettangolo sia centrato orizzontalmente e che il bordo inferiore si trovi al centro del quadrante dell'orologio, proprio come una lancetta reale. Per impostazione predefinita, Figma attiva Snap to Geometry, che mostra linee guida rosse per aiutarti con l'allineamento di questo rettangolo:
Successivamente, comunica a Watch Face Designer che questo livello non è solo decorativo. Seleziona il rettangolo che hai disegnato nel passaggio precedente, poi vai alla finestra Watch Face Designer e cambia Comportamento da "Statico" a "Lancetta dei secondi".
Nota come la lancetta inizia a muoversi una volta al secondo, simulando il ticchettio di un orologio. Se vuoi, puoi regolare la rotazione e creare una lancetta dei minuti e una lancetta delle ore in modo simile a come hai creato questa.
Per suggerimenti sui quadranti secondari, consulta la guida sull'utilizzo avanzato.
Ora digitale
Possiamo anche visualizzare l'ora in formato digitale. Per farlo, crea un livello di testo in Figma. Per ora, inserisci Hh:Mm:Ss come contenuto di testo
del livello.
Nella finestra Watch Face Designer, modifica il comportamento del testo da "Statico" a "Ora digitale". L'anteprima mostra l'aspetto su un dispositivo reale:
Per scoprire l'insieme di caratteri disponibili che puoi utilizzare, segui la guida
del modello visualizzata nella barra laterale della finestra di Watch Face Designer. Ad esempio, a indica se l'ora corrente è "AM" o "PM", che puoi utilizzare con il "formato ora" per visualizzare l'ora nel formato di 12 ore.
Puoi selezionare qualsiasi carattere in Figma, inclusi quelli non disponibili in Wear OS, che viene esportato e raggruppato automaticamente nel quadrante. Tieni presente che ogni carattere ha i propri termini di licenza per la ridistribuzione.
Visualizzare l'anteprima di orari diversi
Per vedere il quadrante in diversi momenti della giornata, puoi regolare l'ora mostrata nell'anteprima trascinando il cursore nella parte inferiore della finestra di Watch Face Designer:
Quando hai finito di visualizzare l'anteprima in orari diversi, puoi reimpostare l'ora corrente selezionando il pulsante Reimposta nell'angolo in basso a sinistra:
Includi foto fornite dagli utenti
Il quadrante può includere uno spazio per una foto personalizzata. In questo modo, gli utenti possono aggiungere una foto personale come sfondo, continuando a visualizzare l'ora e qualsiasi altro elemento incluso nel design.
Per supportare le foto personalizzate, aggiungi un livello al quadrante e imposta il relativo Comportamento su "Foto fornita dall'utente". Per questo esempio, utilizziamo una fotografia di esempio di un fiore per questo livello come immagine predefinita. Questa immagine viene utilizzata come riserva prima che l'utente abbia assegnato una propria foto o quando l'utente sceglie di non utilizzarne una.
Supportare la selezione multipla di foto
Il quadrante può supportare la selezione multipla di foto. Watch Face Designer chiama questa funzionalità galleria:
Quando Selezione foto è impostato su "Galleria", l'utente può selezionare più foto per questo spazio e lo smartwatch le mostra in sequenza in momenti diversi, a seconda di ciò che selezioni in "Cambia foto":
- Se selezioni "Al tocco", la foto cambia quando l'utente tocca il tuo livello.
- Se è selezionata l'opzione "Alza il polso", le modifiche vengono apportate ogni tre volte che l'utente
alza il polso. Al momento, questa impostazione non può essere regolata utilizzando Watch Face
Designer. Scopri di più su come il formato quadrante fornisce un supporto più avanzato
utilizzando l'attributo
changeAfterEvery.
Scopri di più
Per visualizzare l'anteprima del quadrante orologio su un dispositivo fisico, consulta la guida alle esportazioni.
Per ulteriori opzioni e funzionalità, consulta la guida all'utilizzo avanzato.