Sådan laver du en Apple Watch App

Sep 12, 2025

hvordan

(Billedkredit: fremtiden)

Da Apple først lancerede sin smartwatch til offentligheden, følte alle, at den utrolige hardware manglede funktioner på grund af software forhindringer. Siden da har vagtens hardwarefunktioner forbedret så meget, at det nyeste Apple Watch er den bedste SmartWatch nogensinde lavet. Har du ikke en? Tjek vores vejledning til Bedste Apple Watch tilbud , eller denne måned Hot Apple Watch Deal for at spare nogle penge.

Ikke alene føler navigationen og UX intuitiv, men alle apps starter super hurtigt, og den samlede SmartWatch-oplevelse er blevet mere moden. Dette gælder især for dem, vi har valgt som Bedste Apple Watch Apps Tilgængelig, så tjek dem ud som inspiration.

Denne vejledning vil oprette en Apple Watch App til en Uber Eats-stil service. Du vil lære om designprincipperne at overveje, når du designer en bærbar app til et ur. Vi vil også se på at designe en prøveapplikation på Adobe XD. Med henblik på denne tutorial vil vi bare se på et par skærme af appen i stedet for alle skærme i strømmen.

Få Adobe Creative Cloud

Hvorfor er det vigtigt at designe forskelligt for Apple Watch?

Der er mange funktioner, der sætter Apple-uret bortset fra konkurrenters slid. Disse omfatter genveje til alle dine seneste og foretrukne apps, evnen til at spore din puls og se ændringerne, tilpasses Apple Watch Faces, Activity Målsporing, og brug af uret til at styre din MacBook og TV

Apple udslede også WATCHOS 6 for udviklerfællesskabet med revolutionerende forbedringer. Den bedste del om det nye udviklingssæt er, at appsne ikke længere har brug for en iPhone-komponent. Dette gør det nemmere for dev-samfundet at oprette selvstændige urprogrammer for første gang nogensinde. Disse kaldes watch-only apps. Ud over dette kan applikationer nu udnytte nye API'er til at forbinde dine JavaScript-apps til Apple Watch sømløst. Derfor er der behov for udviklere til at forstå, hvordan Apple Watch Apps kan udformes på en måde, der er mere behageligt og intuitivt.

Enhver form for app design skal følge en tilgang, der er velfokuseret. Slidbare interaktioner måles i sekunder, fordi brugere ikke bruger meget tid på enheden. Her er nogle af de temaer, vi kan se på, når man overvejer de forskellige designprincipper.

Layout retningslinjer.

Apple watch app design: layout — Viser kun to kort på en gang forbedrer synligheden af appen (venstre). For at sikre et visuelt hierarki i restauranternes kontaktside opretholdes mellem de to ikoner på siden (højre) (Billedkredit: Vamsi batchu)

01. Inkluder minimalt indhold

Undgå at vise en masse indhold på skærmen på én gang. Brugerne ønsker at få adgang til de mest nyttige oplysninger. Da der ikke er en masse fast ejendom på skærmen Watch, vil du ikke røre grænsefladen med detaljer, der er sekundære eller ikke nødvendige. Denne form for information kan altid præsenteres ved at rulle eller via et ekstra klik.

For en madleveringsapp, lad os oprette en side, hvor vi har de foretrukne restauranter, der er gemt i form af kort. Da dette er en side med en masse indhold, bør vi forsøge at vise kun to kort på én gang for at forbedre synligheden.

02. Vedligeholde visuelt hierarki

Design altid på en sådan måde, at et visuelt hierarki opretholdes. Dette hjælper brugerne med at finde de oplysninger, de søger efter nemt. For eksempel kan du gøre brug af negative rum- eller separatorlinjer for at sikre, at elementerne relateret til samme gruppe præsenteres intuitivt. Dette hjælper glanserbarheden og læsbarheden af din app. For at opretholde et visuelt hierarki i restauranternes kontaktside opretholdes mellem de to ikoner på siden, og også negativt rum anvendes.

03. Husk rummet er værdifuldt

Som tidligere diskuteret er ikke meget plads til rådighed på slid. Gør brug af al bredden på skærmen og design din app på en måde, så indholdet går fra den ene kant til den anden. Du skal ikke bekymre dig om polstring, fordi slidgarnene giver naturlig polstring omkring indholdet af appen. Du skal også sørge for at reducere afstanden mellem interne elementer. For eksempel, på ordren igen side i appen, vil du måske bruge kort, der repræsenterer de poster, der er bestilt tidligere: Sørg for, at kortene er designet på en sådan måde, at de spænder over tværs af urets grænseflade, så absolut ingen plads er spildt.

Menuer skal bruges til at erstatte knapper, når det er muligt. De er mere effektive til at levere et dedikeret sted for handlingerne. Sørg for, at du ikke har mere end fire handlinger i en menu. Dette vil også frigøre plads i grænsefladen ved at slippe af med knapper.

Juster altid dine elementer til venstre for den bærbare grænseflade. Ifølge brugervenlighedsprincipper er venstrejusteret tekst meget lettere for læsning. Også når der er masser af lodrette stakke af knapper med tekstmærker, gør venstre justering det lettere at scanne oplysningerne hurtigt.

Navigationsretningslinjer.

Apple Watch app design: navigation — Eksempler på begge de fælles navigationsmønstre set: hierarkisk (venstre) og sidebaseret (højre) (Billedkredit: Vamsi batchu)

Ligesom enhver grænseflade har bærbare apps mere end en skærm. Der er to navigationsmønstre, du kan bruge, når du designer en: sidebaseret og hierarkisk. Du kan blande begge, afhængigt af behovet.

Den hierarkiske navigation er velegnet til grænseflader eller en del af appen, hvor du skal præsentere en liste over muligheder, der kan rulles og klikkes. Et sådant eksempel er indstillinger, som er til stede i næsten enhver applikation. Når brugeren klikker på ethvert element i listen, præsenteres en ny skærm, der indeholder flere detaljer om det pågældende emne. Denne form for navigation gør det også lettere at navigere hurtigt ved hjælp af swipe-interaktionen eller den digitale krone.

Sidebaseret navigation kan bruges, når der er en mindre liste over sider, der skal præsenteres. Dette gør det nemt for brugeren at skubbe gennem disse sider og se indholdet. Dots nederst på siden angiver dens plads i sæt af sider.

En vigtig ting at huske, når du designer en bærbar app, er, at den altid skal supplere iPhone / Android-appen, men ikke efterligne den. Telefon apps har tendens til at medtage en række sider, men bærbare apps skal være designet til hurtige interaktioner.

Interaktionsretningslinjer.

Apple Watch app design: interaction — Giv altid visuel feedback, når den digitale krone bruges, f.eks. Viser placeringen af en rulle (venstre) og den taptiske motor på Apple Watch, som er ansvarlig for sin haptiske feedback (højre) (Billedkredit: Vamsi batchu)

04. Giv feedback, når du interagerer med den digitale krone

Dette er et af de mest væsentlige aspekter af bærbare grænseflader, og det gør det muligt for brugerne at rulle gennem uden nogen distraktion til deres indhold. Når appen er designet, skal du sørge for at give visuel feedback til brugeren, når de interagerer med den digitale krone. Et eksempel på dette ville vise placeringen af rullen, når kronen roteres for at rulle.

05. Tilpas Haptics.

En haptikmotor i en bærbar enhed bruger kraft på huden for at skabe realtid taktil feedback. Dette er vigtigt for at skabe en intuitiv oplevelse for brugeren, når der sker noget væsentligt i appen. Du kan tilpasse den tilgængelige haptik til et Apple Watch for at gøre appen oplevelse mere meningsfuld. Brug altid hver haptisk kun til det tilsigtede formål. For eksempel kan meddelelser, bekræftelses- og fejlscenarier hver især knyttes til en bestemt haptisk.

06. Opret genkendelige bevægelser

Gestures er et vigtigt stykke bærbar teknologi, men er begrænset til meget få valg. Generelt er der få systemer-genererede bevægelser i slidgarnene, som normalt ikke bør ændres - ellers risikerer du at skabe forvirring for brugerne. De mest almindelige gestus er vandhaner, lodrette og vandrette swipes og venstre kantwipes. Men når du opretter en brugerdefineret gestus som dobbelt tryk, skal du sørge for, at de er genkendelige.

Interface Elements Guidelines.

07. Inkluder advarsler og actionark

Disse interfaceelementer bruges generelt til at kommunikere, når der er opstået en fejl eller samler en feedback fra brugeren. Sørg altid for, at du bruger advarslerne sparsomt og brug handlingsarkene til at give brugeren en liste over muligheder for at reagere på en begivenhed. For eksempel kan aktionsarkene i vores madleveringsapp til messagingfunktionalitet indeholde muligheden for enten at reagere på eller afskedige anmeldelsen.

08. Brug PNG-billeder

Billeder i slidgarnene kan enten være statiske eller en række billeder, der er animerede med tiden. Sørg for, at det billede, der bruges eller eksporteres til designet, er et PNG-element. Også, da der altid er en belastningstid, der er knyttet til billederne, skal du bruge et stedholderbillede i stedet for det faktiske billede for at give brugeren en visuel cue.

09. Feature videoer

Medierne er afgørende for enhver form for grænseflade, som bare kan være lydfiler eller videofiler. Sørg for, at lyd- / videoklipene ikke er mere end 30 sekunder, da de bruger mere diskplads. Inkluder altid et plakatbillede, der er knyttet til videoen, så brugeren kan træffe velinformerede beslutninger.

09. Brug pickers.

Dette er de grænsefladeelementer, der viser en liste over elementer, der rulles eller navigeres via den digitale krone. Dette er en måde at gøre det muligt for brugeren at foretage valg. Listeplukkere skal bruges, når udvælgelsen skal være tekst / billede. Et simpelt eksempel på dette er dato picker. Sekvensplukkere bruges generelt til at replikere et billede for at oprette en brugerdefineret grænseflade, f.eks. En ratingfunktion. Brugere kan give en rating til en af de ordrer, de modtog ved hjælp af en kundevurderingsvælger.

Alle de apps, du opretter for et Apple-ur - eller noget andet bærbar - skal være lydhør, handlingsaktiv og glanserbar. Interaktionerne skal være hurtige, og dataene i apps skal opdateres lejlighedsvis. Reduktion af lastningsskærmstiden gør også meget for at gøre oplevelsen mere intuitiv.

Vil du gennemse Apple ure? Tjek de tilbud, vi fandt nedenfor.

Læs mere:

De 25 bedste iPad Pro apps for at gøre din Apple Pencil Shine
Sådan testes reagere websteder og apps
MOBILE APP DESIGN: En Beginner's Guide

Sådan laver du en Apple Watch App

Hvorfor er det vigtigt at designe forskelligt for Apple Watch?

Layout retningslinjer.

01. Inkluder minimalt indhold

02. Vedligeholde visuelt hierarki

03. Husk rummet er værdifuldt

Navigationsretningslinjer.

Interaktionsretningslinjer.

04. Giv feedback, når du interagerer med den digitale krone

05. Tilpas Haptics.

06. Opret genkendelige bevægelser

Interface Elements Guidelines.

07. Inkluder advarsler og actionark

08. Brug PNG-billeder

09. Feature videoer

09. Brug pickers.

hvordan - Mest populære artikler

Sådan bruges reagerer forår til animerede komponenter

21 Måder til at optimere din CSS og fremskynde dit websted

Sådan oprettes et app-ikon på Illustrator

Sådan bruger du digitale værktøjer til at oprette et håndtegnet udseende

Groom en uimodståelig furry væsen

Sådan opbygges et websted på fuld side i vinkel

Sådan gør du en fotorealistisk himmel

Byg komplekse layouter med Postcss-Flexbox

Kategorier