Ontwerpen voor Apple Watch ontwerprichtlijnen

Apple Watch biedt een nieuw medium om met gebruikers te communiceren. Het gebruik van een app op een draagbaar apparaat is heel anders dan op je smartphone. Om app-makers te begeleiden tijdens hun reis om een ​​goede Apple Watch-app te bouwen, heeft Apple ontwerprichtlijnen uitgegeven om hen te helpen bij het ontwerpen van een goede app-ervaring. In dit artikel bekijken we die richtlijnen.

Ontwerpfilosofie

Om goede applicaties voor de Apple Watch te ontwerpen, is het belangrijk om de ontwerpfilosofie te begrijpen die Apple in gedachten had toen hij de Apple Watch ontwierp. Apple raadt aan de volgende grondslagen in gedachten te houden.

Lichtgewicht plus persoonlijke interacties zijn de ontwerpbasis van Apple voor de Apple Watch.

lichtgewicht

Vanwege de beperkte schermgrootte en het maximale operationele vermogen, moet de Apple Watch voornamelijk worden gebruikt als een apparaat om snelle interacties te ondersteunen.

persoonlijk

Een apparaat is nog nooit zo dicht bij ons geweest. Apple benadrukt dat je oplettend moet zijn en rekening moet houden met de nauwe band terwijl je een Apple Watch-app ontwerpt.

interacties

Er zijn vier verschillende manieren waarop een gebruiker gebaren kan gebruiken om door een toepassing te navigeren:

  • Een tik activeert een actie-gebaseerde gebeurtenis.
  • Verticale veegbewegingen scrollen over het huidige scherm (een gebruiker kan ook de digitale kroon gebruiken om te scrollen).
  • Horizontale veegbewegingen geven de vorige of volgende pagina weer in een pagina-gebaseerde interface.
  • Linkerkant-swipes navigeren terug naar een bovenliggend scherm in een hiërarchische interface.

Force Touch

Wanneer een gebruiker druk uitoefent op het Apple Watch-scherm, detecteert deze kracht en geeft een menu-overlay weer voor het huidige scherm. In de alarm-app wordt bijvoorbeeld Force Touch gebruikt om een ​​nieuw alarm toe te voegen.

Haptische feedback

Een unieke manier om een ​​gebruiker feedback te geven voor de Apple Watch is om haptische feedback te geven. Er zijn verschillende soorten haptieken die elk een specifieke betekenis hebben, zoals succes, falen of een klik.

App-componenten

Apple biedt een scala aan opties voor interactie met een applicatie, inclusief meldingen, blikken en complicaties.

meldingen

Links: Short Look. Rechts: lang kijken.

Er is een onderscheid tussen een korte look en een lange look. Wanneer een gebruiker een melding ontvangt en ze hun pols opheffen, zien ze eerst een korte blik. Een korte blik bestaat uit een titel, de app-naam en het app-pictogram.

Er verschijnt een lange blik als een gebruiker doorgaat naar de melding te kijken in plaats van zijn pols te laten zakken na het zien van de korte blik. Het inhoudsgebied voor een lange blik is dynamisch, maar de algemene structuur van de melding is dat niet. U kunt knoppen toevoegen aan een lang uiterlijk om een ​​melding uitvoerbaar te maken.

Glances

Een blik is een enkel scherm waar een gebruiker toegang toe heeft zonder een app te hoeven openen. Dit doe je door op het startscherm te vegen. Niet elke app heeft een blik nodig, omdat het een informatief scherm is. Een gebruiker kiest welke blikken hij wil toevoegen aan zijn Apple Watch. Over het algemeen zijn er een aantal regels waarmee u rekening moet houden bij het ontwerpen van een oogopslag.

  • Een blik moet snel en gemakkelijk te lezen zijn.
  • Een blik moet contextueel relevant zijn en niet alleen een app-opstartprogramma. Voor een aandelen-app geeft u bijvoorbeeld de meest recente marktprijzen weer.
  • Blikinhoud van links uitlijnen. Dit is een standaard voor alle blikken en houdt de visuele hiërarchie consistent.

complicaties

Voorbeelden van complicaties. Van links naar rechts: grote afbeelding Flat, Ringafbeelding en Stapel.

Een complicatie voegt app-specifieke informatie toe aan de wijzerplaat van een gebruiker. Wijzerplaten zijn aanpasbaar en dus zijn complicaties op een wijzerplaat divers. U hebt bijvoorbeeld zowel grote als kleine modulaire complicaties en circulaire sjablonen. Complicaties worden getekend met behulp van sjablonen, wat betekent dat er beperkte maatwerk is op het gebied van ontwerp.

U kunt meer te weten komen over de complicatiefamilies en sjablonen in Human Interface Guidelines. Complicaties zijn optioneel.

Informatie-architectuur

Over het algemeen zijn er twee soorten navigatiemodellen die voldoen aan uw behoeften:

  • op pagina's gebaseerde navigatie
  • hiërarchische navigatie

Op pagina's gebaseerde navigatie

Een op pagina's gebaseerde navigatie is het meest geschikt voor een platte verzameling informatie. De app bestaat uit een aantal afzonderlijke pagina's. Een gebruiker kan horizontaal tussen de pagina's vegen (en verticaal om meer inhoud op één pagina weer te geven). Het wordt geadviseerd om het aantal pagina's te beperken om de navigatie voor gebruikers soepel te houden.

Hiërarchische navigatie

Een hiërarchische navigatie biedt een hiërarchie. Het meest gebruikelijke ontwerp is om een ​​lijstpagina en een detailpagina te hebben. Het is aan te bevelen om slechts twee of drie niveaus van hiërarchie te hebben.

Waarschuwingen en actiebladen

Een voorbeeld van een actielijst

Net zoals er meldingen en actiebladen zijn in een typische mobiele app, kunt u dit type navigatie ook gebruiken in een Apple Watch-app. De algemene richtlijnen hier zijn om spaarzaam gebruik te maken van waarschuwingen, gebruik beknopte berichten en bieden altijd de mogelijkheid om een ​​melding te negeren.

Interface ontwerp

Om de ontwerprichtlijnen voor de gebruikersinterface beter verteerbaar te maken, heb ik de belangrijkste onderstaande regels samengevat.

  • Een Apple Watch is er in twee maten, 38 mm en 42 mm. Dezelfde inhoud moet worden weergegeven, ongeacht de schermgrootte, door relatieve grootte te gebruiken.
  • Over het algemeen links uitgelijnde elementen. Tekst die links uitgelijnd is, is veel gemakkelijker te lezen en Apple Watch-apps passen deze regel consequent toe.
  • Apps hebben altijd een zwarte achtergrond om een ​​illusie te creëren dat er een randloos scherm is.
Een afgeronde rechthoek is een ontwerppatroon dat wordt gebruikt voor knoppen.
  • Vermijd het gebruik van kleur als de enige manier om interactiviteit te tonen, de afgeronde rechthoek is een consistent ontwerppatroon voor knoppen.
  • U kunt een algemene tint definiëren om op te treden als primaire merkkleur. Zorg ervoor dat de kleuren die u kiest voor een toepassing licht zijn om de leesbaarheid en het contrast met de zwarte achtergrond te garanderen.
  • Voeg geen startscherm toe omdat het de interactiesnelheden vertraagt.
  • Apple Watch ondersteunt geanimeerde afbeeldingsreeksen en uiterlijk-animaties, maar voegt meestal geen waarde toe aan uw app.

Typografie

Apple gebruikt SF Compact als het systeemlettertype op Apple Watch. Er zijn twee variaties (puntafmetingen gebaseerd op afbeeldingen van 144px / inch):

  • SF Compact-tekst voor labels waarvan de tekst 19pt of kleiner is
  • SF Compact beeldscherm voor labels waarvan de tekst 20pt of groter is

U kunt aangepaste typografie toevoegen, maar dit wordt niet aanbevolen. Dynamisch type is erg handig op Apple Watch en daarom is het gebruik van het systeemlettertype vaak de beste ontwerpoplossing.

Apple biedt standaard ingebouwde type-stijlen, variërend van koppen tot voetnoten om de behoefte aan aangepaste typografie te verminderen.

Bouw blokken

Twee bouwstenen voor switches

Om het gemakkelijker te maken om Apple Watch-apps te maken, biedt Apple een aantal interface-elementen, die u als bouwstenen kunt gebruiken om uw app te maken. Hieronder vindt u een korte lijst van de verschillende die u kunt gebruiken. Elk interface-element heeft zijn eigen set richtlijnen. U kunt meer informatie over deze richtlijnen vinden in de onderstaande bronnen.

  • statische tekst (labels)
  • afbeeldingen
  • groepen (combineert afbeeldingen en labels, bijvoorbeeld)
  • pickers (gemanipuleerd met de digitale kroon)
  • tafels
  • toetsen
  • switches
  • sliders
  • kaarten
  • films
  • datum- en timerlabels
  • menus

Middelen

Apple levert ontwerpmiddelen die je kunt gebruiken. U kunt ze openen via de website van Human Interface Guildeines van Apple.

Bovendien geeft Apple een overzicht in de Human Interface Guidelines voor een indicatie van de exacte pixelafmetingen die nodig zijn voor iconografie en complicatie-afbeeldingen.

Als u meer wilt weten over de specifieke richtlijnen voor de verschillende bouwstenen om uw Apple Watch-app te maken, kunt u meer informatie vinden in de sectie Interface-elementen van de richtlijnen voor menselijke interfaces van Apple..

Conclusie

Door vast te houden aan de ontwerprichtlijnen van Apple voor de Apple Watch, zorgt u ervoor dat uw app begrijpelijk is voor Apple Watch-gebruikers. Tegelijkertijd is het met de bestaande typografie en bouwstenen mogelijk om geweldige Apple Watch-apps te maken zonder aanpassingen.

Als u meer wilt weten over de ontwerprichtlijnen, gaat u naar Apple's Human Interface Guidelines for Apple Watch. Als je vragen hebt, kun je ze achterlaten in de reacties hieronder of contact met mij opnemen via Twitter. Bedankt voor je tijd.