Share
Cosa starai creandoSe è la prima volta che si progetta un dispositivo indossabile, noterete che ci sono alcune differenze chiave rispetto alla progettazione di un prodotto per uno smartphone o un computer desktop.
In questo rapido suggerimento, tratto alcune di queste differenze e ti insegnerò anche come progettare per Apple Watch.
Progetteremo uno sguardo per Apple Watch. Come promemoria, un'occhiata è una singola schermata senza elementi interattivi. Visualizza semplicemente le informazioni e può essere toccato per aprire l'app Apple Watch corrispondente.
Un utente può accedere a uno sguardo scorrendo verso l'alto sullo schermo del quadrante. Un utente può anche scegliere quali sguardi vorrebbe vedere sul loro Apple Watch. È opt-in, il che significa che l'utente deve selezionare esplicitamente gli sguardi che desidera vedere sul proprio dispositivo. È un modo elegante e semplice per mostrare informazioni sulle loro app preferite.
Ciò che distingue uno sguardo dall'app stessa è che uno sguardo è uno schermo singolo e, di conseguenza, carica più rapidamente. Gli sguardi sono anche più facili e veloci da accedere rispetto alla corrispondente app Apple Watch.
Progettare per Apple Watch significa che devi tenere a mente determinate linee guida. Questo è simile al design per iOS o Android. Puoi saperne di più sulle linee guida di progettazione nel tutorial precedente di questa serie.
Immagina un'app di Apple Watch in cui l'utente possa facilmente monitorare il proprio budget. Nel nostro sguardo, vogliamo mostrare a Budget giornaliero mentre mostra anche la somma di denaro che l'utente ha risparmiato fino a quel mese. A seconda di come qualcuno spende denaro durante il giorno, il budget giornaliero diminuisce.
Apri Schizzo e inserisci una nuova tavola da disegno. L'elenco a destra mostra le diverse tavole da disegno preimpostate tra cui è possibile scegliere. Sotto dispositivi iOS, seleziona Apple Watch 42mm.
Fai clic sulla tavola da disegno nell'elenco dei livelli e utilizza il pannello destro per selezionare un colore di sfondo. Scegli nero (# 000000) come colore di sfondo. Il nero è il colore di sfondo predefinito per le app di Apple Watch.
Grazie alla cornice nera di Apple Watch, possiamo utilizzare la tavola da disegno edge-to-edge nel nostro design. A differenza di una tipica app o web design, non è necessario aggiungere un margine a sinistra oa destra del progetto.
Aggiungi un titolo, "Budget", in modo che l'utente sia consapevole di quale sguardo stia guardando. SF Compact è il carattere predefinito utilizzato su Apple Watch. Puoi saperne di più sulla tipografia per Apple Watch sul sito web degli sviluppatori di Apple. Per il quadrante da 42 mm, è meglio attenersi a 32 pt (per i modelli a 72 dpi). Il testo dovrebbe essere allineato nell'angolo in alto a sinistra.
Infine, cambia il colore del titolo in grigio chiaro (# a2a5ae) per ridurre il contrasto tra bianco e nero nel disegno. Il bianco dovrebbe essere riservato alle informazioni che vogliamo distinguere, come il budget rimanente.
La caratteristica più importante del colpo d'occhio è la visualizzazione del budget giornaliero dell'utente. Potremmo presentare questo testo, ma rendiamo il design più interessante. Mi piacerebbe progettare un grafico circolare, che diminuisce man mano che l'utente spende denaro.
Innanzitutto, utilizzare lo strumento ovale per creare un cerchio con una dimensione di 220 per 220. Centrare la forma nella tavola da disegno e impostare la larghezza del bordo su 24. Fare clic sul impostazioni icona accanto al titolo del bordo per aprire il menu delle impostazioni del bordo. Impostato divario a 1000 e trattino a 138. Infine, selezionare il il giro finisce. Ben fatto, hai creato un anello di confine.
Nel menu delle impostazioni del bordo, puoi creare un bordo per il bordo.Disabilitare il riempire colore del cerchio e cambia il confine colore a un gradiente angolare di tua scelta. Potresti usare il ruotare funzione per spostare la forma sullo schermo, ma questo non è necessario per il nostro progetto di colpo d'occhio.
Un gradiente angolare è eccellente per colorare un anello di bordo.Fai clic con il pulsante destro del mouse sull'ovale nell'elenco dei livelli e duplica l'elemento. Apri le impostazioni del bordo della forma duplicata e imposta trattino a 690. Spostare il livello duplicato sotto il livello ovale originale e giocare con i colori sfumati e l'opacità per completare l'immagine. Nell'esempio seguente, ho utilizzato un gradiente angolare grigio-nero con un'opacità ridotta.
Successivamente, aggiungi un livello di testo con copia "$ 14,00 rimanenti". Imposta la dimensione del font da "$ 14,00" a 38 pt e la dimensione del font da "rimanente" a 26 pt. Centra il testo nella tavola da disegno. Il nostro sguardo si sta lentamente avvicinando.
Infine, dobbiamo mostrare la somma di denaro che l'utente ha risparmiato fino a quel mese. Utilizzeremo la sezione in basso dello sguardo per aggiungere quell'informazione. Poiché abbiamo già un elemento grafico al centro dello sguardo, utilizzeremo il testo per visualizzare l'importo che l'utente ha salvato. Ciò creerà uno sguardo ben bilanciato e informativo.
Crea un nuovo livello di testo e usalo SF Compact come il carattere con a luce peso del carattere. Stiamo per creare un testo di piè di pagina. Seleziona una dimensione del carattere di 20 pt e imposta il testo a qualcosa sulla falsariga di "$ 265,00 salvati questo mese". Allinea il testo in basso a sinistra della tavola da disegno.
Ciò che è importante quando si progetta uno sguardo è che nella parte inferiore della pagina apparirà l'impaginazione. Un utente può scorrere tra diversi sguardi di diverse app. Spostiamo il testo del footer di 40 punti per aggiungere un margine in basso.
Poiché abbiamo spostato il testo del footer, la sezione del budget giornaliero non è centrata. Sposta il gruppo contenente il testo e i diversi ovali di 20 punti. E abbiamo finito.
Con alcune semplici forme e trucchi, abbiamo creato un'elegante occhiata Apple Watch. Se vuoi saperne di più sulla creazione di prodotti per Apple Watch, ti consiglio di leggere un tutorial sulla scelta della giusta strategia di prodotto o di imparare di più sulle linee guida di progettazione di Apple Watch.
Se hai domande sulla progettazione di Apple Watch, contatta i commenti o su Twitter. Grazie per il tuo tempo.
Accentsconagua