Hoe een Apple Watch-app te maken

Sep 13, 2025
Procedures
Apple Watch app design
(Beeldkrediet: toekomst)

Toen Apple eerst zijn smartwatch aan het publiek lanceerde, voelde iedereen dat de ongelooflijke hardware geen functies was vanwege softwareshordt. Sindsdien zijn de hardwaremogelijkheden van het horloge zo veel verbeterd dat de nieuwste Apple Watch de beste smartwatch is die ooit is gemaakt. Heb er geen? Bekijk onze gids voor de beste appelhorloge deals , of deze maand Hot Apple horloge deal om wat geld te besparen.

Niet alleen voelen de navigatie en UX intuïtief, maar alle apps lanceren super snel en de algehele smartwatch-ervaring is volwassen geworden. Dit geldt vooral voor degenen die we hebben geplukt als de Beste Apple Watch-apps Beschikbaar, dus controleer ze als inspiratie.

Deze tutorial creëert een Apple Watch-app voor een Uber Eet-achtige service. Je zult leren over de ontwerpprincipes om te overwegen bij het ontwerpen van een draagbare app voor een horloge. We zullen ook kijken naar het ontwerpen van een voorbeeldaanvraag op Adobe XD. Voor het doel van deze tutorial gaan we gewoon naar een paar schermen van de app in plaats van alle schermen in de stroom.

Waarom is het belangrijk om anders te ontwerpen voor het Apple Watch?

Apple Watch app design

Het Apple Watch heeft veel functies die niet worden gevonden op andere wearables, zoals het volgen van activiteiten (Beeldkrediet: Vamsi Batchu)

Er zijn veel functies die de Apple Watch onderscheiden van de wearables van de concurrenten. Deze omvatten snelkoppelingen naar al uw recente en favoriete apps, de mogelijkheid om uw hartslag te volgen en de wijzigingen, aanpasbare Apple-horloge-gezichten, activiteitsdoeltracking te volgen en het horloge te gebruiken om uw MacBook en TV te beheersen

Apple bracht ook Watchos 6 uit voor de ontwikkelaargemeenschap met revolutionaire verbeteringen. Het beste deel van de nieuwe ontwikkelingskit is dat de apps geen iPhone-component meer hebben. Dit maakt het voor de Dev-community gemakkelijker om zelfstandige horlogetoepassingen voor de eerste keer te maken. Dit worden horloge-alleen-apps genoemd. Daarnaast kunnen aanvragen nu profiteren van nieuwe API's om uw JavaScript-apps aan te sluiten op naadloos naar het Apple-horloge. Daarom is er behoefte aan ontwikkelaars om te begrijpen hoe Apple Watch-apps kunnen worden ontworpen op een manier die leuker en intuïtief is.

Elke vorm van app-ontwerp moet een aanpak volgen die goed gefocust is. Draagbare interacties worden in seconden gemeten omdat gebruikers niet veel tijd op het apparaat besteden. Hier zijn enkele van de thema's waar we kunnen kijken bij het overwegen van de verschillende ontwerpprincipes.

Lay-out-richtlijnen

Apple watch app design: layout

Toont slechts twee kaarten, verbetert de zichtbaarheid van de app (links). Om een ​​visuele hiërarchie op de contactpagina van de restaurants te garanderen, wordt de afstand tussen de twee pictogrammen op de pagina gehandhaafd (rechts) (Beeldkrediet: Vamsi Batchu)

01. Neem minimale inhoud op

Vermijd het weergeven van veel inhoud op het scherm tegelijk. De gebruikers willen toegang krijgen tot de meest nuttige informatie. Aangezien er niet veel onroerend goed op het tv-scherm is, wilt u de interface niet rommelen met details die secundair zijn of niet nodig zijn. Dit soort informatie kan altijd worden gepresenteerd door scrollen of via een extra klik.

Laten we een pagina maken waar we de favoriete restaurants in de vorm van kaarten hebben opgeslagen. Omdat dit een pagina is met veel inhoud, moeten we proberen slechts twee kaarten tegelijk te tonen om de zichtbaarheid te verbeteren.

02. Behoud visuele hiërarchie

Ontwerp altijd op een zodanige manier dat een visuele hiërarchie wordt gehandhaafd. Dit helpt de gebruikers de informatie die ze op zoek zijn gemakkelijk te vinden. U kunt bijvoorbeeld gebruik maken van negatieve ruimte of scheiderslijnen om ervoor te zorgen dat de elementen met betrekking tot dezelfde groep intuïtief worden gepresenteerd. Dit helpt de blanco en de leesbaarheid van uw app. Om een ​​visuele hiërarchie op de contactpagina van de restaurants te behouden, wordt de afstand tussen de twee pictogrammen op de pagina gehandhaafd en wordt ook negatieve ruimte gebruikt.

Apple Watch app design: layout

Deze pagina's Pagina toont aan hoe de linkerafstemming van inhoud het gemakkelijk is om te lezen (links). Een voorbeeld van een menu waarin u de vier belangrijkste items hebt die door de gebruiker zijn toegankelijk (rechts) (Beeldkrediet: Vamsi Batchu)

03. Onthoud dat de ruimte waardevol is

Zoals eerder besproken, is niet veel ruimte beschikbaar op wearables. Maak gebruik van alle breedte op het scherm en ontwerp uw app op een bepaalde manier, zodat de inhoud van de ene rand naar het andere gaat. Maak je geen zorgen over de vulling omdat de wearables natuurlijke opvulling bieden rond de inhoud van de app. U moet ook zorgen voor de afstand tussen interne elementen. Bijvoorbeeld, op de pagina Bestel opnieuw in de app, wilt u mogelijk kaarten gebruiken die de items die eerder zijn besteld te gebruiken: zorg ervoor dat de kaarten op zo'n manier zijn ontworpen dat ze over de interface van het horloge overspoelen, dus absoluut geen ruimte wordt verspild.

Menu's moeten worden gebruikt om de knoppen waar mogelijk te vervangen. Ze zijn effectiever in het leveren van een toegewijde plaats voor de acties. Zorg ervoor dat u niet meer dan vier acties in een menu hebt. Dit zal ook ruimte in de interface vrijmaken door knoppen af ​​te komen.

Lijn uw elementen altijd aan de linkerkant van de draagbare interface. Volgens bruikbaarheidsprincipes is de linker uitgelijnde tekst veel gemakkelijker om te lezen. Ook, wanneer er veel verticale stapels knoppen met tekstlabels zijn, maakt het linkeruitlijning het gemakkelijker om de informatie snel te scannen.

Navigatierichtlijnen

Apple Watch app design: navigation

Voorbeelden van beide gemeenschappelijke navigatiepatronen gezien: hiërarchisch (links) en pagina-gebaseerd (rechts) (Beeldkrediet: Vamsi Batchu)

Net als elke interface hebben wearable apps meer dan één scherm. Er zijn twee navigatiepatronen die u kunt gebruiken bij het ontwerpen van één: pagina-gebaseerd en hiërarchisch. Je kunt beide mengen, afhankelijk van de behoefte.

De hiërarchische navigatie is goed geschikt voor interfaces of een gedeelte van de app waar u een lijst met opties wilt presenteren die kunnen worden gescrold en geklikt. Een dergelijk voorbeeld is instellingen, die in bijna elke toepassing aanwezig is. Wanneer de gebruiker op een item in de lijst klikt, wordt een nieuw scherm gepresenteerd dat meer details over het specifieke item bevat. Ook maakt dit soort navigatie het gemakkelijker om snel te navigeren met behulp van de veeginteractie of de digitale kroon.

Paginasnavigatie kan worden gebruikt wanneer er een kleinere lijst met pagina's is die moet worden gepresenteerd. Dit maakt het eenvoudig voor de gebruiker om door deze pagina's te vegen en de inhoud te bekijken. De stippen onderaan de pagina geven de plaats in de set pagina's aan.

Een belangrijk ding om te onthouden bij het ontwerpen van een draagbare app is dat het altijd de iPhone / Android-app moet aanvullen, maar het niet nabootst. Telefoon-apps bevatten meestal een aantal pagina's, maar draagbare apps moeten zijn ontworpen voor snelle interacties.

Interactiegichtlijnen

Apple Watch app design: interaction

Geef altijd visuele feedback wanneer de digitale kroon wordt gebruikt, zoals de locatie van een scroll (links) en de taptische motor van de Apple Watch, die verantwoordelijk is voor de haptische feedback (rechts) (Beeldkrediet: Vamsi Batchu)

04. Geef feedback bij het interageren met de digitale kroon

Dit is een van de meest essentiële aspecten van draagbare interfaces en het maakt de gebruikers mogelijk om zonder enige afleiding naar hun inhoud te bladeren. Wanneer de app wordt ontworpen, zorg er dan voor dat u visuele feedback geeft aan de gebruiker wanneer ze communiceren met de digitale kroon. Een voorbeeld hiervan zou de locatie van de scroll laten zien wanneer de kroon wordt geroteerd om te scrollen.

05. Pas Haptics aan

Een haptics-engine in een draagbaar apparaat maakt gebruik van kracht op de huid om real-time tactiele feedback te maken. Dit is essentieel in het creëren van een intuïtieve ervaring voor de gebruiker wanneer er iets belangrijks gebeurt in de app. U kunt de beschikbare haptics voor een Apple Watch aanpassen om de app-ervaring meer betekenisvol te maken. Gebruik altijd elke haptische alleen voor het beoogde doel. Bijvoorbeeld kunnen meldingen, bevestiging en foutscenario's worden gekoppeld aan een specifieke haptiek.

06. Creëer herkenbare gebaren

Gebaren zijn een belangrijk stukje draagbare technologie, maar zijn beperkt tot zeer weinig keuzes. Over het algemeen zijn er enkele systemen gegenereerde gebaren in de wearables, die meestal niet moeten worden gewijzigd - anders riskeert u de verwarring voor de gebruikers. De meest voorkomende gebaren zijn taps, verticale en horizontale swipes en links-edge swipes. Wanneer u echter een aangepast gebaar maakt, zoals Double Tap, zorg er dan voor dat ze herkenbaar zijn.

Interface-elementen Richtlijnen

Apple Watch app design: interaction

Geef de gebruiker de keuze aan opties voor het reageren op een evenement door actiebladen (links) te gebruiken, en een voorbeeld van de afbeeldingen als pictogrammen, waar elk item is geassocieerd met een kleurrijk logo (rechts) (Beeldkrediet: Vamsi Batchu)

07. Voeg waarschuwingen en actiebladen toe

Deze interface-elementen worden over het algemeen gebruikt om te communiceren wanneer er een fout is opgetreden of wat feedback van de gebruiker verzamelt. Zorg er altijd voor dat u de meldingen spaarzaam gebruikt en gebruik de actiebladen om de gebruiker een lijst met opties te geven om te reageren op een evenement. In onze Food Delivery-app voor berichtenfunctionaliteit kunnen bijvoorbeeld de actiebladen de optie bevatten voor het reageren op of het afwijzen van de melding.

08. Gebruik PNG-afbeeldingen

Afbeeldingen in de wearables kunnen statisch of een reeks afbeeldingen zijn die met de tijd geanimeerd zijn. Zorg ervoor dat het formaat van het beeld dat wordt gebruikt of geëxporteerd naar het ontwerp een PNG-element is. Omdat er altijd een laadtijd is gekoppeld aan de afbeeldingen, gebruikt u een placeholder-afbeelding in plaats van het werkelijke beeld om de gebruiker een visuele keu te geven.

09. Feature-video's

Media is essentieel voor elke soort interface, wat gewoon audiobestanden of videobestanden kan zijn. Zorg ervoor dat de audio- / videoclips niet meer dan 30 seconden zijn terwijl ze meer schijfruimte consumeren. Neem altijd een posterafbeelding op die is gekoppeld aan de video, zodat de gebruiker wel geïnformeerde beslissingen kan nemen.

09. Gebruik pickers

Dit zijn de interface-elementen die een lijst met items weergeven die worden gescrold of navigated via de digitale kroon. Dit is een manier om de gebruiker in staat te stellen selecties te maken. Lijstplukkers moeten worden gebruikt wanneer de selectie tekst / afbeelding moet zijn. Een eenvoudig voorbeeld hiervan is de datumkiezer. Sequence Pickers worden over het algemeen gebruikt om een ​​afbeelding te repliceren om een ​​aangepaste interface te maken, zoals een beoordelingsfunctie. Gebruikers kunnen een beoordeling geven aan een van de bestellingen die ze hebben ontvangen met behulp van een klantwaarschijnmaker.

Alle apps die u maakt voor een Apple-horloge - of enig ander draagbaar - moet responsief zijn, bruikbaar en schoonmaken. De interacties moeten snel zijn en de gegevens in de apps moeten af ​​en toe worden bijgewerkt. Het verminderen van de laadschermtijd doet ook veel om de ervaring intuïtiever te maken.

Wil je door Apple-horloges bladeren? Bekijk de aanbiedingen die we hieronder vonden.

Lees verder:

  • De 25 beste iPad Pro-apps om je Apple Pencil Shine te maken
  • Hoe reacties en apps te testen
  • Mobiel app ontwerp: een beginnersgids

Procedures - Meest populaire artikelen

8 Verbazingwekkende nieuwe grafisch ontwerp tutorials

Procedures Sep 13, 2025

Of je nu net begint in grafisch ontwerp of een doorgewinterde pro, er is altijd iets nieuws om te leren of je voor het spel wilt blijven. Grafisch ontwerp is zo'n uitgestrekte discipline die ..

Hoe te ontwerpen met CSS-vormen: een introductie

Procedures Sep 13, 2025

De basis van elke website is om de pagina af te delen in kleinere elementen die inhoud hebben. Het grote probleem hiermee voor on..

Maak een chromatisch aberratie-effect

Procedures Sep 13, 2025

Chromatische aberratie (vervorming), ook bekend als 'Color Fringing' is een gemeenschappelijk optisch probleem. Het treedt op wan..

5 dingen die je nodig hebt voor olieverfschilderij

Procedures Sep 13, 2025

Er is een ongegronde mystiek rond olieverfschilderij die enkele artiesten heeft uitgeschakeld om ze te verkennen. Als u het recht..

Hoe metalen reflecties te tekenen

Procedures Sep 13, 2025

Wanneer licht een metalen voorwerp opslaat, kan deze op een ongebruikelijke manier terugkomen op een object in de buurt. Normaal ..

10 Gouden regels voor responsieve SVGS

Procedures Sep 13, 2025

De vele voordelen van SVG - inclusief oneindig schaalbare vectorafbeeldingen, kleine bestandsgroottes en directe integratie met d..

Leer om ontwerp- en inhoudsprints uit te voeren

Procedures Sep 13, 2025

Ontwerp en inhoud Sprints zijn de sleutel tot het samenbrengen van producteigenaren, ontwerpers, onderzoekers, contentstrategen e..

Hoe de prestaties van e-commerce-sites

Procedures Sep 13, 2025

Tammy Everts zal een presentatie geven over de verbinding tussen ontwerp, prestaties en conversieperc..

Categorieën