Suggerimento rapido ricrea gli anelli di attività di Apple Watch in Sketch

In questo video spiegherò come ricreare, utilizzando Sketch, gli anelli di attività che troverai su Apple Watch. Questo è l'esercizio perfetto per dimostrare quanto Sketch adori la matematica; rimarrai sorpreso di quanto Sketch calcolerà per te. Attendiamo!

Guarda il consiglio rapido

 

Anelli di attività

Vediamo cosa stiamo puntando qui. Questa immagine è presa da www.apple.com e mostra gli anelli nel contesto:

Gli anelli di attività dall'interfaccia utente di Apple sono abbastanza riconoscibili

1. Tavola da disegno

Inizia con una tavola da disegno di 512 px quadrati; c'è un preset per questo.

Aggiungi un colore di sfondo di nero puro (# 000000) quindi aggiungi un cerchio di 300 px al centro. Questo cerchio non avrà un riempimento, ma dagli un tocco colorato di 25px.

2. Anelli

Duplica il primo squillo, quindi ridimensionalo sottraendo 52 px dalla sua larghezza. Puoi farlo inserendo letteralmente 300-52 nel campo delle dimensioni e Sketch eseguirà il calcolo per te. 

Allinearlo centralmente con il primo squillo.

Ricolora, quindi ripeti il ​​processo per un terzo squillo.

Raggruppa i tre anelli e dai al gruppo qualcosa come "indietro". Duplica il gruppo e chiamalo come "front". Per ora lavoreremo sul gruppo di facciata, quindi puoi nascondere quello sul retro.

3. Dash it all

Per dare ai nostri anelli un effetto "barra di progresso" useremo un trattino a tratti. Lo schizzo ha un trucco per questo: gli chiederemo di calcolare la circonferenza esatta del cerchio moltiplicando la larghezza (300px) per pi π. Inserisci il calcolo 300 * 3.14159265359 nel divario input del frontiere dialogo e il cerchio sparirà in modo efficace. Questo perché lo spazio tra i suoi tratti tratti copre l'intero diametro del cerchio. Tirando su il trattino misura vedremo il nostro cerchio ricominciare a riapparire.

Sketch ♥ matematica

Con quello fatto, di nuovo nel frontiere dialogo, arrotondare le estremità del tratto:

Infine, vai a Livello> Trasforma> Rifletti verticalmente per capovolgere l'anello in modo che inizi a zero gradi.

4. Portare indietro

Con i cerchi completati, fai di nuovo visibile il gruppo "indietro" e colpisci 1 ridurre la sua opacità al 10%.

5. Icone

Tutto ciò che resta da fare è aggiungere icone alle estremità dei tratti. Crea una nuova tavola da disegno di 16px e crea qualsiasi tipo di icone di cui hai bisogno. Ho creato alcune semplici icone a forma di freccia, ma potresti anche prendere alcune icone adatte da GraphicRiver:

Hai finito!

Ecco cosa abbiamo creato:

Grazie per avermi seguito, spero che questo rapido esercizio di UI ti abbia insegnato un paio di nuovi trucchi di Sketch.

Tutorial simili