Design for Apple Watch Design et blikk i skisse

Hva du skal skape

Hvis dette er første gang du designer for en bærbar enhet, vil du legge merke til at det er noen viktige forskjeller i forhold til å designe et produkt for en smarttelefon eller en stasjonær datamaskin.

I dette raske tipset dekker jeg noen av disse forskjellene, samtidig som jeg lærer deg hvordan du designer for Apple Watch.

Før vi begynner

Vi vil designe et blikk for Apple Watch. Som en påminnelse er et blikk en enkelt skjerm uten interaktive elementer. Den viser bare informasjon og kan tappes for å åpne den tilsvarende Apple Watch-appen.

En bruker kan få et blikk ved å snu opp på visningsskjermbildet. En bruker kan også velge hvilke blikk de ønsker å se på deres Apple Watch. Det er opt, noe som betyr at en bruker må eksplisitt velge blikkene de vil se på enheten. Det er en elegant og enkel måte å vise informasjon om favorittappene på.

Det som skiller et blikk fra selve appen er at et blikk er en enkelt skjerm og som et resultat laster raskere. Blikk er også enklere og raskere å få tilgang til enn den tilsvarende Apple Watch-appen.

Retningslinjer for design

Design for Apple Watch betyr at du må holde visse retningslinjer i tankene. Dette ligner på å designe for iOS eller Android. Du kan lære mer om designretningslinjene i den forrige opplæringen i denne serien.

Utforme et blikk

Tenk deg en Apple Watch-app der brukeren enkelt kan spore budsjettet. I vårt blikk vil vi vise en Daglig Budsjett mens du også viser hvor mye penger brukeren har lagret så langt den måneden. Avhengig av hvordan noen bruker penger i løpet av dagen, reduseres det daglige budsjettet.

Trinn 1: Sett opp kunstbrettet

Åpne Skisse og sett inn et nytt tavla. Listen til høyre viser de forskjellige forhåndsinnstilte tavler du kan velge mellom. Under IOS-enheter velger du Apple Watch 42mm.

Klikk på tavla i laglisten din og bruk høyre panel for å velge en bakgrunnsfarge. Velg svart (# 000000) som bakgrunnsfargen. Svart er standard bakgrunnsfarge for Apple Watch-apper.

Trinn 2: Glans Tittel

På grunn av den sorte bezel av Apple Watch, kan vi bruke kunstbrettet til kanten i vårt design. I motsetning til en typisk app eller webdesign, er det ikke nødvendig å legge til en margin på enten venstre eller høyre av designen.

Legg til en tittel, "Budsjett", slik at brukeren er klar over hva blikket de ser på. SF Compact Standardteksten er brukt på Apple Watch. Du kan lære mer om typografi for Apple Watch på Apples utviklerwebside. For 42mm klokke ansiktet, er det best å holde seg til 32 pt (for 72 dpi design). Teksten skal være justert i øvre venstre hjørne.

Endelig, endre tittelfargen til en lysegrå (# a2a5ae) for å redusere kontrasten i svart og hvitt i designet. Hvit bør reserveres for informasjon vi ønsker å skille seg ut, for eksempel gjenværende budsjett.

Trinn 3: Daglig budsjett

Det viktigste elementet i oversikten er å vise brukerens daglige budsjett. Vi kunne presentere dette tekstmessig, men la oss gjøre designet mer interessant. Jeg vil gjerne designe en sirkulær graf, som avtar ettersom brukeren bruker penger.

Bruk først det ovale verktøyet til å lage en sirkel med en størrelse på 220 med 220. Senter formen i tavlen og sett kantbredden til 24. Klikk på innstillinger ikonet ved siden av grense tittelen for å åpne grenseinnstillingsmenyen. Sett Mellomrom til 1000 og Bindestrek til 138. Til slutt velger du rund slutter. Godt gjort, du har opprettet en grense ring.

I grenseinnstillingsmenyen kan du opprette en grense ring.

Deaktiver fylle farge på sirkelen og endre grense farge til en vinkelgradient etter eget valg. Du kan bruke rotere Fungerer for å flytte formen rundt på skjermen, men dette er ikke nødvendig for vårt blikkdesign.

En vinkelgradient er utmerket for farging av en kantring.

Høyreklikk den ovale i laglisten din og dupliser elementet. Åpne grenseinnstillingene for duplisert form og sett Bindestrek til 690. Flytt duplisert lag under det opprinnelige ovale laget og spill med gradientfarger og opasitet for å fullføre grafikken. I eksemplet nedenfor brukte jeg en kantet grå-svart gradient med redusert opasitet.

Deretter legger du til et tekstlag med kopi "$ 14.00 igjen". Angi skriftstørrelsen på "$ 14.00" til 38 pt og skriftstørrelsen på "gjenværende" til 26 pt. Senter teksten i tavla. Vårt blikk kommer sakte sammen.

Trinn 4: Money Saved

Til slutt må vi vise hvor mye penger brukeren har lagret så langt den måneden. Vi skal bruke den nederste delen av blikket for å legge til den delen av informasjonen. Fordi vi allerede har et grafisk element midt i blikket, bruker vi tekst til å vise hvor mye brukeren har lagret. Dette vil skape et velbalansert og informativt blikk.

Lag et nytt tekstlag og bruk SF Compact som skrift med a lys font vekt. Vi skal lage en bunnteksttekst. Velg en skriftstørrelse på 20 pt og sett teksten til noe i tråd med "$ 265.00 lagret denne måneden". Juster teksten nederst til venstre på tavlen.

Det som er viktig når du designer et blikk er at nederst på designet ditt vises paginering. En bruker kan sveipe mellom forskjellige blikk av forskjellige apps. La oss flytte footer-teksten opp med 40 poeng for å legge til litt margin nederst.

Fordi vi flyttet bunntekstteksten, er den daglige budsjettdelen uncentered. Flytt gruppen som inneholder teksten og de forskjellige ovalene opp med 20 poeng. Og vi er ferdige.

Konklusjon

Med noen få enkle former og triks skapte vi et elegant Apple Watch-blikk. Hvis du vil vite mer om byggevarer til Apple Watch, anbefaler jeg at du leser en veiledning om valg av riktig produktstrategi eller å lære mer om Apple Watch-designretningslinjene.

Hvis du har spørsmål om design for Apple Watch, nå ut i kommentarene eller på Twitter. Takk for tiden din.