Snabbtips Ta reda på Apple Watchs aktivitetsringar i skiss

I den här videon ska jag förklara hur du återskapar, med Sketch, de aktivitetsringar som du hittar på Apple Watch. Detta är den perfekta övningen för att visa hur mycket Sketch älskar matematik Du kommer bli förvånad över hur mycket Sketch kommer att beräkna för dig. Låt oss bli aktiva!

Titta på Snabbtips

 

Aktivitetsringar

Låt oss se vad vi syftar till här. Den här bilden är hämtad från www.apple.com och visar ringarna i sammanhanget:

Aktivitetsringarna från Apples Watch UI är ganska igenkännliga

1. Artboard

Börja med en tavla av 512px kvadrat; Det finns en förinställning för det.

Lägg till en bakgrundsfärg av ren svart (# 000000) och lägg sedan till ett cirkelobjekt på 300px till mitten. Denna cirkel har ingen fyllning, men ger den en fin färgstark stroke på 25px.

2. Ringar

Duplicera den första ringen och ändra sedan den genom att subtrahera 52px från dess bredd. Du kan göra detta genom att skriva in bokstavligen 300-52 i storlek fältet och Sketch kommer att göra beräkningen för dig. 

Rikta den centralt med den första ringen.

Recolor det, upprepa sedan processen för en tredje ring.

Gruppera de tre ringarna och namnge gruppen något som "tillbaka". Kopiera gruppen och namnge den som "front". Vi ska jobba på frontgruppen för nu, så du kan gömma den på baksidan.

3. Dash allt

För att ge våra ringar en "progress bar" effekt kommer vi att använda en stroke dash. Skiss har ett knep för detta: vi ber dig att beräkna cirkelns exakta omkrets genom att multiplicera bredden (300px) av pi π. Ange beräkningen 300 * 3,14159265359 i Gap inmatning av Gränser dialog och cirkeln kommer effektivt att försvinna. Detta beror på att klyftan mellan dess slagstreck täcker hela cirkelns diameter. Genom att kliva upp Rusa mätning ser vi att vår cirkel börjar visas igen.

Sketch ♥ math

Med det gjort, igen i Gränser dialog, runda av änden av stroke:

Slutligen, gå till Layer> Transform> Flip Vertical att vända ringen så att den börjar vid noll grader.

4. Ta tillbaka tillbaka

Med de cirklar som görs, gör "back" -gruppen synlig igen och slå 1 för att minska dess opacitet till 10%.

5. Ikoner

Allt som återstår att göra är att lägga till ikoner i slutet av streckningarna. Skapa en ny tavla av 16px, och skapa vilken typ av ikoner du behöver. Jag skapade några enkla pilikoner, men du kan även fånga några lämpliga ikoner från GraphicRiver:

Du är klar!

Här är vad vi skapade:

Tack för att du följer med, jag hoppas att den här snabba UI-övningen lärde dig ett par nya Sketch-tricks.

Liknande handledning