Entwerfen für die WATCH

Mit der bevorstehenden Markteinführung von Apples neuestem und glänzendstem Produkt, der Apple Watch (äh, WATCH), gibt es viele Designer, die darauf aus sind, ein Gefühl für das neueste Spielzeug von Cupertino zu bekommen.  Es gibt einige neue Möglichkeiten, mit dem Gerät zu interagieren. Wie Apples Force-Touch-Menü und digitale Krone sowie viele Elemente der Benutzeroberfläche, mit denen Sie bereits vertraut sind, z. B. Schaltflächen, Textstile und Schalter.

Bevor wir die auf der Apple Watch vorhandenen Elemente der Benutzeroberfläche untersuchen, werden zunächst einige Grundlagen behandelt, die Sie bei der Entwicklung dieses neuen Geräts berücksichtigen sollten.  Zum Zeitpunkt des Schreibens ist die Apple Watch noch nicht veröffentlicht. Wenn Sie also Tipps, Kommentare oder Korrekturen haben, lassen Sie es mich auf Twitter oder in den Kommentaren wissen.

Körperliche Befestigung

Erstens ist die Apple Watch physisch mit dem Benutzer verbunden.  Beachten Sie diese Verbindung und wie sich Ihre Benutzer bei der Interaktion mit der Benutzeroberfläche fühlen.

Was denkst du, sind die Absichten von Apple, die Emotionen ihrer Nutzer bei der Apple Watch zu beachten?  Wenn dieser Werbespot mit der Content-Strategie von Apple übereinstimmt, sind die darin enthaltenen Emotionen Glück, Aufregung, Ehrfurcht und Staunen und vermitteln gleichzeitig ein Gefühl der Personalisierung durch die Verwendung verschiedener Uhrenarmbänder, Farben und Zifferblätter.  Wie können Sie diese Gefühle auch beim Design Ihrer Uhren-App vermitteln?  Wie verändert die Tatsache, dass die Uhr an den Benutzer angehängt ist, die Art und Weise, wie der Benutzer das Design Ihrer App empfindet?

Halte es einfach

Die Apple Watch ist nicht so leistungsfähig wie Ihr neues Smartphone.  Bei der Gestaltung für Web und Mobile bin ich manchmal schuld, ein hübsches Bild über einem kleineren Bild zu verwenden.  Im Falle der Apple Watch werden wir daran erinnert, die Dinge so leicht wie möglich zu halten, da diese zusätzlichen Kilobyte wirklich einen Unterschied machen.

Die schlechtesten Geräte im Web (Low-End-Telefone) haben ähnliche Spezifikationen wie die coolsten neuen Technologien (Smartwatches).  Design für alle, immer.

- Todd Parker (@toddmparker) 19. März 2015

Benutzer möchten keine langsamen und schleppenden Erfahrungen.  Die Verwendung größerer Bilder und Animationen führt nicht nur zu einer schlechten Benutzererfahrung, sondern auch dazu, dass Ihre App abgelehnt wird, sobald sie an Apple übermittelt wird.

Alle iOS #applewatch-Entwickler, für die Apps mit einer Vielzahl von Animationen genehmigt wurden, benötigen für mich eine Menge und sorgen sich um die Zurückweisung von https://t.co/5tmnBY3Qm4

- Henry Ton (@archtrainer), 3. April 2015

Fragen Sie sich: "Sind meine Animationen wirklich notwendig?"  Animationen sind schlecht, wenn sie eine Verzögerung verursachen, unabhängig von ihren Verbesserungsqualitäten.  Denken Sie daran, dass Sie etwas für einen Computer in der Größe einer Briefmarke erstellen, der auch Daten drahtlos vom Telefon streamen muss.  Dort besteht ein Engpass.

Stellen Sie sich vor, Sie bauen eine Website in den frühen 90er Jahren, die ihre Informationen über ein 14.4k-Modem an einen Benutzer auf einem Computer mit einem 386-Prozessor und 2 MB RAM übertragen muss.  In dieser Situation würden Sie keine benutzerdefinierten Schriftarten, Animationen und großen JavaScript-Bibliotheken verwenden.  Halten Sie die Dinge leicht.  Bauen Sie auf Geschwindigkeit und respektieren Sie die Zeit Ihrer Benutzer.  Widerstehen Sie dem Drang zu blenden.  Halten Sie Interaktionen sinnvoll.  Verwenden Sie keine unnötigen Animationen.  Viel Wasser trinken.  Sei freundlich und respektvoll gegenüber anderen.  Hör auf deine Mutter.

„Wenn Sie Interaktionen mit Ihrer iOS-App in Minuten messen, können Sie erwarten, dass Interaktionen mit Ihrer WatchKit-App in Sekunden gemessen werden.  Halten Sie also die Interaktionen kurz und die Schnittstellen einfach. “- Richtlinien für die Benutzeroberfläche von Apple Watch

Farbe und Typografie

Die Verwendung von Farbe und Typografie ist wichtig für das Branding Ihrer Anwendung, es sind jedoch einige wichtige Überlegungen zu berücksichtigen.

Farbe

„Farbe sorgt für visuelle Kontinuität und Markenbildung für Ihre App.“ - Richtlinien für die Benutzeroberfläche von Apple Watch

• Verwenden Sie Schwarz für Ihren Hintergrund.  Es fügt sich in die physische Einfassung des Bildschirms ein und sorgt dafür, dass keine Bildschirmkante entsteht.  Verwenden Sie keine hellen Hintergründe.
• Verwenden Sie kontrastreiche Farben für Text.  Denken Sie daran, dass die Uhr für längere Zeit nicht verwendet wird. Die Benutzer müssen in der Lage sein, Ihre Inhalte schnell und einfach zu lesen.
  
• Achten Sie auf Farbenblindheit.

Typografie

Verwenden Sie auf jeden Fall benutzerdefinierte Schriftarten. Beachten Sie jedoch, dass die Systemschriftart auf diesem neuen Gerät gut funktioniert.

„Text muss vor allem lesbar sein.  Wenn Benutzer die Wörter in Ihrer App nicht lesen können, spielt es keine Rolle, wie schön die Typografie ist. “- Richtlinien für die Benutzeroberfläche von Apple Watch

Vorteile der Systemschriftart (San Francisco) sind:

• Die verdichteten Zeichen nehmen weniger horizontalen Raum ein.
• Bei großen Größen sind sie weniger beabstandet und haben größere Glyphenöffnungen.
  
• Die Interpunktion wird proportional größer, wenn die Schrift kleiner wird.
  

Textstile

Textstile sind semantische Beschreibungen der beabsichtigten Verwendung Ihrer Schriftarten.  Beispiele sind Dinge wie Überschrift, Textkörper usw.  Sie kennen wahrscheinlich die HTML-Entsprechungen von <h1><h2> <body> und dergleichen.  Wenn Sie die integrierten Textstile verwenden, erhalten Sie eine kostenlose Dynamic Type-Unterstützung, die automatisch auf die Eingabehilfen der Benutzer reagiert.  Wenn Sie benutzerdefinierte Schriftarten verwenden, müssen Sie einige Arbeiten ausführen, um die Funktion zu übernehmen.

Platz

Die Apple Watch ist offensichtlich kleiner als ein Smartphone.  Der gesamte verfügbare Platz muss intelligent genutzt werden, um die Interaktionen zu gestalten, die Ihre Benutzer so angenehm wie möglich gestalten.  Halten Sie Ihre Tasten groß, damit Sie leicht mit ihnen interagieren können.  Erwägen Sie die Verwendung des Force Touch-Menüs für zusätzliche Optionen.  Widerstehen Sie der Versuchung, Ihr Logo in der App anzuzeigen. Es gibt andere Möglichkeiten, Ihre App durch die Verwendung von Farben und Bildern zu kennzeichnen, die sinnvoll und kontextbezogen sind.

„Der Platz auf der Apple Watch ist äußerst wichtig, und jedes Vorkommen eines Logos nimmt Platz weg von den Inhalten, die Benutzer sehen möchten.“ - Richtlinien für die Benutzeroberfläche von Apple Watch

Die Apple Watch verfügt über eine Einfassung an den Rändern, die Ihren Designs eine physische Polsterung verleiht.  Sie müssen daher an den Bildrändern keine Ränder hinzufügen.

Beim Entwickeln in Xcode sieht es auf den ersten Blick etwas seltsam aus, da diese Polsterung an den Rändern nicht zu sehen ist. Beachten Sie jedoch bei Ihren Entwürfen:

Bildschirmgröße

Apps zeigen auf beiden Größen der Apple Watch (38 und 42 mm) die gleiche Benutzeroberfläche. Wenn Sie relative Einheiten verwenden, können Sie Ihre Elemente vergrößern und verkleinern, um den verfügbaren Platz in beiden Größen zu füllen.  Der Bildschirm ist immer im Hochformat: Die Höhe ist größer als die Breite.

Navigation

In WatchKit-Apps stoßen Sie auf zwei völlig unterschiedliche Navigationsmuster:

Hierarchisch

"Hierarchisch" ist ein Navigationsmuster, das eine vertikale Bildlaufliste umfasst, die es dem Benutzer ermöglicht, eine Auswahl (durch Tippen) auf dem Bildschirm vorzunehmen, bis er sein gewünschtes Ziel erreicht.

Seite basiert

„Seitenbasiert“ ist ein horizontaler Scroll-Navigationsstil, der die aktuelle Seite durch eine Reihe von Punkten am unteren Rand des Watch-Bildschirms anzeigt.

Sie können diese beiden Systeme nicht in derselben App kombinieren, Sie können jedoch unabhängig von Ihrem Navigationstyp „Modal-Sheets“ anzeigen.

Modale Blätter

Sie können sich ein Modalblatt als Karte vorstellen, mit der der Benutzer eine Aufgabe ausführen kann. Modalblätter enthalten einen einzelnen Bildschirm oder mehrere Bildschirme, die in einem seitenbasierten Layout angezeigt werden. Der einzige Unterschied zwischen den beiden besteht im Hinzufügen von Punktindikatoren am unteren Rand der seitenbasierten Oberfläche.

Fügen Sie Ihrem Modalblatt keine Schaltfläche zum Schließen hinzu, da sich standardmäßig eine Schaltfläche oben links im Bildschirm befindet.  Es ist immer weiß, obwohl Sie den Text von Schließen in Abbrechen oder von etwas anderem ändern können, um weitere Bedeutung hinzuzufügen.  Ein Benutzer kann ein Modalblatt auch schließen, indem er vom linken Bildschirmrand aus wischt.

Alle Schaltflächen, die Sie in Ihren Modalblättern hinzufügen, sollten die Aktion ausführen, für die sie vorgesehen sind, und das Modalblatt schließen, sodass der Benutzer diesen zusätzlichen Schritt nicht ausführen muss.  Apple schlägt vor, dass Sie keine zweite modale Benutzeroberfläche hinzufügen. Andernfalls könnte dies zur Ablehnung der App führen.  Wenn Apple vor etwas warnt, ist es normalerweise am besten, zuzuhören, es sei denn, Sie haben einen guten Grund, dies nicht zu tun.

Wechselwirkungen

Es gibt möglicherweise mehr Möglichkeiten für einen Benutzer, mit Ihrer App in zukünftigen Generationen zu interagieren (z. B. Multi-Touch und neue Gesten). Dies sind jedoch die einzigen Möglichkeiten.

• Single Tap - Wird zum Drücken von Tasten und zum Auswählen von Optionen verwendet.
• Eingeschränkte Gesten - Vertikaler Streifzug zum Navigieren in Bildschirmen mit hoher Bildauflösung, Horizontaler Streifzug zum Navigieren durch seitenbasierte Bildschirme und horizontaler Streifzug nach links, um zum vorherigen Bildschirm zurückzukehren.  Es ist nicht möglich, das Wischen außerhalb der Navigation zwischen Seiten oder in einer vertikalen Tabelle durchzuführen.
• Force Touch - Drücken Sie fest auf das Zifferblatt, um auf ein Menü zuzugreifen, das dem aktuellen Bildschirm zugeordnet ist.
• Digital Crown - Das Rad an der Seite der Uhr kann in Ihrer App nur für vertikales Scrollen verwendet werden.

Blicke

Die Glance-Oberfläche wird von Apple als „zusätzliche Möglichkeit für den Benutzer zum Anzeigen wichtiger Informationen aus Ihrer App“ beschrieben.  Denken Sie an Informationen, die Sie möglicherweise schnell auf einem Bildschirm benötigen, wie zum Beispiel die Uhrzeit.  Verfügt Ihre App über Informationen, die der Benutzer häufig anzeigen möchte?  Erwägen Sie den Aufbau eines „Blicks“, um diese Informationen anzuzeigen.

Die Blicke werden aus einer Reihe vordefinierter Vorlagen für die obere und untere Hälfte des Bildschirms erstellt.  Blicke können vom Benutzer nicht gescrollt werden, und die App wird auf dem entsprechenden Bildschirm geöffnet, wenn der Benutzer auf einen Bildschirm tippt.  Blicke sind optional und nicht erforderlich.

Gruppen sind Container für Objekte in Ihrer App. Sie können sich ein bisschen wie divs in html vorstellen.  Gruppen haben eine Standardauffüllung, die Sie ändern oder entfernen können, wenn Sie möchten.  Sie haben kein Standardaussehen, verfügen jedoch über Attribute zum Festlegen von Position, Eckenradius, Größe, Rändern und Hintergrund.  Sie können eine Gruppe so einstellen, dass Elemente horizontal oder vertikal angeordnet werden, und Sie können Gruppen in andere Gruppen einbetten, um komplexere Layouts zu erstellen.

Hier sind einige der oberen und unteren Gruppenvorlagen für den Übersichtsbildschirm:

Benachrichtigungen

Benachrichtigungen werden dem Benutzer auf zwei verschiedene Arten angezeigt: ein kurzer Blick und ein langer Blick.

Kurzbenachrichtigungen

Diese teilen dem Benutzer mit, welche App ihn benachrichtigt und gibt eine Überschrift.  Wenn der Benutzer das Handgelenk schnell nach unten bewegt oder nicht klopft, wird die Benachrichtigung abgewiesen.  Der Benutzer muss nicht manuell mit der Benachrichtigung interagieren, um sie zu entfernen.  Das Design der Kurzbenachrichtigung basiert auf Vorlagen und enthält das App-Symbol, den App-Namen und eine Titelzeichenfolge.  Halten Sie Ihre Titelzeichenfolgen so kurz und sinnvoll wie möglich.

Langzeitbenachrichtigungen

Diese enthalten mehr Details zur Benachrichtigung und sind in ihrem Erscheinungsbild anpassbarer.  Die Grundstruktur ist für alle Apps gleich und enthält oben einen Schärpe, der das Symbol und den Namen der App, den benutzerdefinierten Inhalt Ihrer App, bis zu vier Aktionsschaltflächen und schließlich eine Abbruchschaltfläche unten anzeigt.

Elemente der Benutzeroberfläche

Lassen Sie uns mit diesen Grundlagen im Gedächtnis die verschiedenen Elemente der Benutzeroberfläche der Apple Watch erkunden.

"Denken Sie beim Erstellen der grafischen Elemente Ihrer App daran, dass jedes benutzerdefinierte Element gut aussehen und gut funktionieren sollte. Es sollte jedoch auch so aussehen, als gehörte es zu den anderen Elementen in der App, unabhängig davon, ob sie benutzerdefiniert oder standardisiert sind." - Apple Beachten Sie die Human Interface Guidelines

Animationen

Dynamische Animationen müssen vom iPhone übertragen werden, was zu einer unvermeidlichen Verzögerung führt.  Eine Watch-App wurde möglicherweise abgelehnt, da sie stark auf Animationen angewiesen ist. Verwenden Sie sie daher nur, um den Status mitzuteilen und dem Benutzer Feedback zu geben.  Die kostenlose Verwendung von Animationen wird nicht empfohlen (auch wenn es sich bei der Animation um ein lebenslustig tanzendes Baby handelt).  Speichern Sie vorgerenderte Animationen mit einer Folge statischer Bilder in Ihrem WatchKit-App-Bundle, damit sie dem Benutzer schnell angezeigt werden können, anstatt vom Telefon übertragen zu werden.

Key

Verwenden Sie Symbole anstelle von Text für nebeneinander angeordnete Schaltflächen und haben nie mehr als drei nebeneinander (Apple sagt in einem Fall, nicht mehr als zwei nebeneinander liegende Schaltflächen zu verwenden, und in einem anderen Fall nicht mehr als drei.)

Dies mag offensichtlich klingen, aber denken Sie daran, dass die Watch-Bildschirme klein sind. Halten Sie daher die Tasten so groß wie möglich - machen Sie es den Benutzern nicht schwer, auf eine Schaltfläche zu tippen.  Schaltflächen können ein Bild oder eine Farbe für den Hintergrund sowie eine andere Farbe für den Text haben. Sie können ein Beschriftungs- oder Gruppenobjekt enthalten und haben abgerundete Ecken (der Standard-Eckenradius beträgt 6 Punkte).

Touch-Menü erzwingen

Das Force-Touch-Menü zeigt das optionale Kontextmenü des aktuellen Bildschirms (sofern eingestellt) mit bis zu vier Aktionen an.  Die Aktionen werden von oben nach unten und von links nach rechts angezeigt, je nachdem, in welcher Reihenfolge sie dem Menü hinzugefügt werden.  Sie scrollen nicht.

Menüaktionen (Schaltflächen) erfordern ein Bild und eine Bezeichnung.  Das Bild sollte Strichzeichnungen und einfarbig mit transparentem Hintergrund sein.  Verwenden Sie Strichstärken, die für die Gerätegröße und die Komplexität des Symbols geeignet sind, zwischen 4 und 9 Pixeln (laut Apple).

Denken Sie an das Force-Touch-Kontextmenü, da dies eine neue und aufregende Art ist, mit dem Gerät zu interagieren.  Anstatt der Benutzeroberfläche zusätzliche Schaltflächen hinzuzufügen, sollten Sie das Kontextmenü "Force Touch" verwenden.

Icons

Icons sind Png-Kreise.  Sie können sie als indizierte Farben erstellen, um Platz, 24 Bit und keine Transparenz zu sparen.  Auf dem Startbildschirm der Uhr befindet sich auf den Symbolen kein Text.

Laden Sie diese Apple Watch-Symbolvorlage zur Verwendung in Ihren eigenen Projekten herunter.

Symbolgrößen für eine WatchKit-App auf der Apple Watch:

Symbolgrößen für die Verwendung der Apple Watch-App auf dem iPhone:

Bilder

Verwenden Sie ein Bild für alle Bildschirmgrößen. Geschwindigkeit und Effizienz sind extrem wichtig. Komprimieren Sie Ihre Bilder so stark wie möglich.  Speichern Sie Ihre PNGs mit indizierten Farben auf einem durchgehenden schwarzen Hintergrund und nicht auf einem transparenten Hintergrund.  Erstellen Sie alle Bildressourcen als @ 2x-Ressourcen. Es ist nicht erforderlich, Nicht-Retina-Bilder zu erstellen.

Komprimieren Sie Ihre PNGs mit Werkzeugen wie Tinypng, Pngout und Pngcrush.  ImageOptim ist ein tolles kostenloses Dienstprogramm für Mac-Benutzer.

Karten

Karten sind statische Screenshots eines Standorts und sind nicht interaktiv.  Durch Tippen auf eine Karte gelangt man zur Karten-App.

Etiketten

Ein Etikett ist eine fantastische Art und Weise, "statische Textfolge" zu sagen.  Es erlaubt keine direkte Benutzerinteraktion, obwohl es programmgesteuert aktualisiert werden kann und mehrere Zeilen umfassen kann.

Separator

Das Trennzeichen ist ein einfaches und dennoch wertvolles UI-Element: eine Zeile zum Trennen des Inhalts.

Schieberegler

Mit Schiebereglern können Benutzer Anpassungen vornehmen, indem Sie die Bilder nach links und rechts antippen.  Wenn Sie keine Bilder bereitstellen, sind die Standardwerte ein Plus (+) und ein Minus (-).

Wechselt

Über Schalter können Sie Ihrem Benutzer eine von zwei Optionen angeben.  Ein oder Aus, Ja oder Nein usw. Stilistisch sind Sie mit iOS vertraut und enthalten immer ein Etikett.

Tabellen

Eine Tabelle enthält Datenzeilen in einer einzelnen Spalte, durch die der Benutzer vertikal blättern kann.  Halten Sie Tabellen kleiner als 20 Zeilen, da mehr als das Blättern schwierig ist.  Wenn Sie mehr als 20 Zeilen haben, können Sie dem Benutzer die Option geben, mehr zu laden.  Die Größe der Tabellen wird dynamisch basierend auf der Anzahl der enthaltenen Zeilen geändert.  Daher ignorieren Tabellen alle Höhenbeschränkungen, die von Gruppen für sie festgelegt werden.  Apple empfiehlt, dass Sie keine Tabellen in Gruppen einbetten.

Abschließend

Apple´s Watch ist eine aufregende neue Plattform, die sich ständig weiterentwickeln wird, während Designer und Entwickler damit spielen und erstaunliche neue Erfahrungen sammeln.  Die Ideen, die mit einem Gerät verbunden sind, das an den Benutzer angeschlossen ist und die Herzfrequenz und andere Informationen erfassen kann, werden sich weiterentwickeln.  Wenn Sie neue Ideen haben, wie Sie mit diesen Systemen am besten arbeiten und interessante neue Interaktionen herstellen können, lassen Sie es uns wissen!

Zusätzliche Ressourcen

• Apple Watch Photoshop-Vorlage und Apple Watch-App-Symbolvorlage

• PSD-Modelle an den Armen der Menschen
• 3D-Rendering mit transparenten Hintergründen
• Apple Watch GUI-Kit
• Apple Watch UI Kit .sketch-Ressource