Ontwerpen voor Apple Watch een blik in schets ontwerpen

Wat je gaat creëren

Als dit de eerste keer is dat u ontwerpt voor een draagbaar apparaat, zult u merken dat er een aantal belangrijke verschillen zijn in vergelijking met het ontwerpen van een product voor een smartphone of een desktopcomputer.

In deze snelle tip behandel ik enkele van deze verschillen, terwijl ik je ook leer hoe je moet ontwerpen voor Apple Watch.

Voor we beginnen

We gaan een kijkje nemen voor Apple Watch. Ter herinnering, een blik is een enkel scherm zonder interactieve elementen. Het geeft eenvoudig informatie weer en kan worden gebruikt om de bijbehorende Apple Watch-app te openen.

Een gebruiker heeft toegang tot een oogopslag door op het wijzerplaatscherm te vegen. Een gebruiker kan ook kiezen welke blikken ze willen zien op hun Apple Watch. Het is opt-in, wat betekent dat een gebruiker expliciet de blikken moet selecteren die hij op zijn apparaat wil zien. Het is een elegante en eenvoudige manier om informatie over hun favoriete apps weer te geven.

Wat een blik van de app zelf onderscheidt, is dat een blik een enkel scherm is en daardoor sneller laadt. Blikken zijn ook gemakkelijker en sneller toegankelijk dan de bijbehorende Apple Watch-app.

Ontwerp richtlijnen

Ontwerpen voor Apple Watch betekent dat je bepaalde richtlijnen in gedachten moet houden. Dit lijkt op ontwerpen voor iOS of Android. U kunt meer leren over de ontwerprichtlijnen in de vorige zelfstudie van deze serie.

Een blik ontwerpen

Stel u een Apple Watch-app voor waarin de gebruiker eenvoudig zijn of haar budget kan traceren. In onze ogen willen we een dagelijks budget terwijl ook de hoeveelheid geld wordt weergegeven die de gebruiker tot die maand heeft bespaard. Afhankelijk van hoe iemand overdag geld uitgeeft, neemt het dagbudget af.

Stap 1: Stel het tekengebied in

Open Sketch en voeg een nieuw tekengebied in. De lijst aan de rechterkant toont de verschillende vooraf ingestelde tekengebieden waaruit u kunt kiezen. Selecteer op iOS-apparaten Apple Watch 42 mm.

Klik op het tekengebied in uw lagenlijst en gebruik het rechterpaneel om een ​​achtergrondkleur te selecteren. Kies zwart (# 000000) als achtergrondkleur. Zwart is de standaardachtergrondkleur voor Apple Watch-apps.

Stap 2: blik titel

Vanwege de zwarte rand van de Apple Watch, kunnen we het tekenbord van rand tot rand gebruiken in ons ontwerp. In tegenstelling tot een typische app of webontwerp is het niet nodig om links of rechts een marge toe te voegen.

Voeg een titel toe, "Budget", zodat de gebruiker weet welke blik hij bekijkt. SF Compact is het standaard lettertype dat wordt gebruikt op Apple Watch. Je kunt meer over typografie te weten komen voor Apple Watch op de ontwikkelaarswebsite van Apple. Voor de wijzerplaat van 42 mm kunt u het beste bij 32 pt (voor ontwerpen van 72 dpi) blijven. De tekst moet in de linkerbovenhoek worden uitgelijnd.

Wijzig tenslotte de titelkleur in een lichtgrijs (# a2a5ae) om het contrast van zwart en wit in het ontwerp te verminderen. Wit moet worden gereserveerd voor informatie die we willen laten opvallen, zoals het resterende budget.

Stap 3: Dagbudget

Het belangrijkste kenmerk van de blik is het dagbudget van de gebruiker weergeven. We zouden dit tekstueel kunnen presenteren, maar laten we het ontwerp interessanter maken. Ik zou graag een cirkelgrafiek ontwerpen, die afneemt naarmate de gebruiker geld uitgeeft.

Gebruik eerst het ovale gereedschap om een ​​cirkel met een afmeting van 220 bij 220 te maken. Centreer de vorm in het tekengebied en stel de randdikte in op 24. Klik op de instellingen pictogram naast de randtitel om het menu randinstellingen te openen. set kloof tot 1000 en scheutje tot 138. Selecteer ten slotte de ronde loopt af. Goed gedaan, je hebt een grensring gemaakt.

In het menu Grensinstellingen kunt u een grensring maken.

Schakel de vullen kleur van de cirkel en verander de grens kleur naar een hoekgradiënt naar keuze. Je zou de kunnen gebruiken draaien functie om de vorm in het scherm te verplaatsen, maar dit is niet nodig voor ons blikontwerp.

Een hoekgradiënt is uitstekend voor het inkleuren van een grensring.

Klik met de rechtermuisknop op het ovaal in uw lagenlijst en dupliceer het element. Open de randinstellingen van de gedupliceerde vorm en stel deze in scheutje tot 690. Verplaats de gedupliceerde laag onder de originele ovale laag en speel met de verloopkleuren en dekking om de afbeelding te voltooien. In het onderstaande voorbeeld heb ik een hoekig grijs-zwart verloop met een verminderde dekking gebruikt.

Voeg vervolgens een tekstlaag toe met kopie "$ 14,00 resterend". Stel de lettergrootte van "$ 14.00" in op 38 pt en de lettergrootte van "resterend" op 26 pt. Centreer de tekst in het tekengebied. Onze blik komt langzaam samen.

Stap 4: geld opgeslagen

Ten slotte moeten we de hoeveelheid geld weergeven die de gebruiker tot die maand heeft opgeslagen. We gaan het onderste deel van de blik gebruiken om dat stuk informatie toe te voegen. Omdat we al een grafisch element in het midden van de blik hebben, gebruiken we tekst om het bedrag weer te geven dat de gebruiker heeft opgeslagen. Dit zorgt voor een goed gebalanceerde en informatieve blik.

Maak een nieuwe tekstlaag en gebruik SF Compact als het lettertype met een licht lettertype dikte. We gaan een voettekst maken. Selecteer een lettergrootte van 20 pt en stel de tekst in op de naam "$ 265.00 bespaard deze maand". Lijn de tekst linksonder in het tekengebied uit.

Wat belangrijk is bij het ontwerpen van een blik, is dat onderaan de pagina een paginering verschijnt. Een gebruiker kan vegen tussen verschillende blikken van verschillende apps. Laten we de voettekst met 40 punten naar boven verplaatsen om onderaan wat marge toe te voegen.

Omdat we de voettekst omhoog hebben verplaatst, is het gedeelte Dagbudget niet-gecentreerd. Verplaats de groep met de tekst en de verschillende ovalen met 20 punten omhoog. En we zijn klaar.

Conclusie

Met een paar eenvoudige vormen en trucs creëerden we een elegante blik van Apple Watch. Als u meer wilt weten over het bouwen van producten voor Apple Watch, raad ik u aan een zelfstudie te lezen over het kiezen van de juiste productstrategie of meer te leren over de ontwerprichtlijnen van Apple Watch.

Als je vragen hebt over ontwerpen voor de Apple Watch, neem dan contact op met de opmerkingen of op Twitter. Bedankt voor je tijd.