So erstellen Sie eine Apple Watch App

Apple Watch App Design
(Bildnachweis: Zukunft)

Als Apple seine Smartwatch zum ersten Mal der Öffentlichkeit vorstellte, hatten alle das Gefühl, dass der unglaublichen Hardware aufgrund von Software-Hürden Funktionen fehlten. Seitdem haben sich die Hardwarefunktionen der Uhr so ​​stark verbessert, dass die neueste Apple Watch die beste Smartwatch ist, die jemals hergestellt wurde. Hast du noch keinen? Lesen Sie unseren Leitfaden zum besten Apple Watch Angebote oder diesen Monat heißer Apple Watch Deal etwas Geld sparen.

Navigation und UX fühlen sich nicht nur intuitiv an, sondern alle Apps werden auch sehr schnell gestartet und das Smartwatch-Erlebnis ist insgesamt ausgereifter geworden. Dies gilt insbesondere für diejenigen, die wir als ausgewählt haben besten Apple Watch Apps verfügbar, also probieren Sie sie als Inspiration aus.

In diesem Tutorial wird eine Apple Watch-App für einen Dienst im Uber Eats-Stil erstellt. Sie lernen die Designprinzipien kennen, die beim Entwerfen einer tragbaren App für eine Uhr zu berücksichtigen sind. Wir werden uns auch mit dem Entwerfen einer Beispielanwendung unter Adobe XD befassen. In diesem Tutorial sehen wir uns nur einige Bildschirme der App an, anstatt alle Bildschirme im Ablauf.



Warum ist es wichtig, für die Apple Watch anders zu gestalten?

Apple Watch App Design

Die Apple Watch verfügt über viele Funktionen, die bei anderen Wearables nicht vorhanden sind, z. B. die Aktivitätsüberwachung(Bildnachweis: Vamsi Batchu)

Es gibt viele Funktionen, die die Apple Watch von den Wearables der Konkurrenz abheben. Dazu gehören Verknüpfungen zu all Ihren aktuellen und bevorzugten Apps, die Möglichkeit, Ihre Herzfrequenz zu verfolgen und die Änderungen anzuzeigen, anpassbare Apple Watch-Gesichter, die Verfolgung von Aktivitätszielen und die Verwendung der Uhr zur Steuerung Ihres MacBook und Fernsehgeräts

Apple hat außerdem watchOS 6 für die Entwickler-Community mit revolutionären Verbesserungen veröffentlicht. Das Beste am neuen Entwicklungskit ist, dass die Apps keine iPhone-Komponente mehr benötigen. Dies erleichtert es der Entwickler-Community, zum ersten Mal eigenständige Uhrenanwendungen zu erstellen. Diese werden als Nur-Uhr-Apps bezeichnet. Darüber hinaus können Anwendungen jetzt neue APIs nutzen, um Ihre JavaScript-Apps nahtlos mit der Apple Watch zu verbinden. Aus diesem Grund müssen Entwickler verstehen, wie Apple Watch-Apps unterhaltsamer und intuitiver gestaltet werden können.

Jede Art von App-Design muss einem gut fokussierten Ansatz folgen. Tragbare Interaktionen werden in Sekunden gemessen, da Benutzer nicht viel Zeit auf dem Gerät verbringen. Hier sind einige der Themen, die wir betrachten können, wenn wir die verschiedenen Gestaltungsprinzipien betrachten.

Layout-Richtlinien

Apple Watch App Design: Layout

Das gleichzeitige Anzeigen von nur zwei Karten verbessert die Sichtbarkeit der App (links). Um eine visuelle Hierarchie auf der Kontaktseite der Restaurants zu gewährleisten, wird der Abstand zwischen den beiden Symbolen auf der Seite (rechts) beibehalten.(Bildnachweis: Vamsi Batchu)

01. Minimalen Inhalt einschließen

Vermeiden Sie es, viele Inhalte gleichzeitig auf dem Bildschirm anzuzeigen. Die Benutzer möchten auf die nützlichsten Informationen zugreifen. Da auf dem Bildschirm nicht viel Platz vorhanden ist, möchten Sie die Benutzeroberfläche nicht mit Details überladen, die zweitrangig sind oder nicht benötigt werden. Diese Art von Informationen kann immer durch Scrollen oder durch einen zusätzlichen Klick angezeigt werden.

Erstellen wir für eine App zum Liefern von Lebensmitteln eine Seite, auf der die Lieblingsrestaurants in Form von Karten gespeichert sind. Da dies eine Seite mit viel Inhalt ist, sollten wir versuchen, nur zwei Karten gleichzeitig anzuzeigen, um die Sichtbarkeit zu verbessern.

02. Visuelle Hierarchie beibehalten

Entwerfen Sie immer so, dass eine visuelle Hierarchie erhalten bleibt. Dies hilft den Benutzern, die gesuchten Informationen leicht zu finden. Sie können beispielsweise negative Leerzeichen oder Trennlinien verwenden, um sicherzustellen, dass die Elemente, die sich auf dieselbe Gruppe beziehen, intuitiv dargestellt werden. Dies unterstützt die Übersichtlichkeit und Lesbarkeit Ihrer App. Um eine visuelle Hierarchie auf der Kontaktseite der Restaurants beizubehalten, wird der Abstand zwischen den beiden Symbolen auf der Seite beibehalten und auch ein negativer Bereich verwendet.

Apple Watch App Design: Layout

Diese Benachrichtigungsseite zeigt, wie die linke Ausrichtung des Inhalts das Lesen erleichtert (links). Ein Beispiel für ein Menü, in dem der Benutzer auf die vier wichtigsten Elemente zugreift (rechts).(Bildnachweis: Vamsi Batchu)

03. Denken Sie daran, Platz ist wertvoll

Wie bereits erwähnt, steht auf Wearables nicht viel Platz zur Verfügung. Nutzen Sie die gesamte Breite des Bildschirms und gestalten Sie Ihre App so, dass der Inhalt von einer Kante zur anderen wechselt. Machen Sie sich keine Sorgen um die Polsterung, da die Wearables eine natürliche Polsterung für den Inhalt der App bieten. Sie müssen auch sicherstellen, dass der Abstand zwischen internen Elementen verringert wird. Auf der Seite 'Erneut bestellen' in der App möchten Sie möglicherweise Karten verwenden, die die zuvor bestellten Artikel darstellen: Stellen Sie sicher, dass die Karten so gestaltet wurden, dass sie sich über die Benutzeroberfläche der Uhr erstrecken, sodass absolut kein Platz vorhanden ist ist verschwendet.

Menüs müssen verwendet werden, um Schaltflächen nach Möglichkeit zu ersetzen. Sie sind effektiver darin, einen speziellen Ort für die Aktionen bereitzustellen. Stellen Sie sicher, dass ein Menü nicht mehr als vier Aktionen enthält. Dadurch wird auch Speicherplatz in der Benutzeroberfläche frei, indem Schaltflächen entfernt werden.

Richten Sie Ihre Elemente immer links von der tragbaren Oberfläche aus. Nach den Usability-Prinzipien ist linksbündiger Text viel einfacher zu lesen. Wenn viele vertikale Stapel von Schaltflächen mit Textbeschriftungen vorhanden sind, erleichtert die Ausrichtung nach links das schnelle Scannen der Informationen.

Apple Watch App Design: Navigation

Beispiele für beide gängigen Navigationsmuster: hierarchisch (links) und seitenbasiert (rechts)(Bildnachweis: Vamsi Batchu)

Wie jede Benutzeroberfläche haben tragbare Apps mehr als einen Bildschirm. Es gibt zwei Navigationsmuster, die Sie beim Entwerfen eines Musters verwenden können: seitenbasiert und hierarchisch. Sie können je nach Bedarf beide mischen.

Die hierarchische Navigation eignet sich gut für Benutzeroberflächen oder einen Abschnitt der App, in dem Sie eine Liste von Optionen anzeigen müssen, die gescrollt und angeklickt werden können. Ein solches Beispiel sind Einstellungen, die in fast jeder Anwendung vorhanden sind. Wenn der Benutzer auf ein Element in der Liste klickt, wird ein neuer Bildschirm angezeigt, der weitere Details zu dem bestimmten Element enthält. Diese Art der Navigation erleichtert auch das schnelle Navigieren mithilfe der Swipe-Interaktion oder der Digital Crown.

Die seitenbasierte Navigation kann verwendet werden, wenn eine kleinere Liste von Seiten angezeigt werden soll. Dies erleichtert dem Benutzer das Durchwischen dieser Seiten und das Anzeigen des Inhalts. Die Punkte am unteren Rand der Seite geben den Platz in der Seitengruppe an.

Eine wichtige Sache, die Sie beim Entwerfen einer tragbaren App beachten sollten, ist, dass sie die iPhone / Android-App immer ergänzen, aber nicht nachahmen sollte. Telefon-Apps enthalten in der Regel mehrere Seiten, tragbare Apps müssen jedoch für schnelle Interaktionen ausgelegt sein.

Interaktionsrichtlinien

Apple Watch App Design: Interaktion

Geben Sie immer visuelles Feedback, wenn Sie die digitale Krone verwenden, z. B. die Position einer Schriftrolle (links) und die Taptic Engine der Apple Watch, die für das haptische Feedback verantwortlich ist (rechts).(Bildnachweis: Vamsi Batchu)

04. Geben Sie Feedback, wenn Sie mit der Digital Crown interagieren

Dies ist einer der wichtigsten Aspekte tragbarer Benutzeroberflächen und ermöglicht es den Benutzern, ohne Ablenkung zu ihren Inhalten zu scrollen. Stellen Sie bei der Entwicklung der App sicher, dass Sie dem Benutzer visuelles Feedback geben, wenn er mit der Digital Crown interagiert. Ein Beispiel hierfür wäre die Anzeige der Position der Schriftrolle, wenn die Krone zum Scrollen gedreht wird.

05. Passen Sie die Haptik an

Eine Haptik-Engine in einem tragbaren Gerät verwendet Kraft auf die Haut, um taktiles Feedback in Echtzeit zu erzeugen. Dies ist wichtig, um eine intuitive Benutzererfahrung für den Benutzer zu schaffen, wenn in der App etwas Wichtiges passiert. Sie können die verfügbaren Haptiken für eine Apple Watch anpassen, um die App-Erfahrung aussagekräftiger zu gestalten. Verwenden Sie jede Haptik immer nur für den vorgesehenen Zweck. Beispielsweise können Benachrichtigungs-, Bestätigungs- und Fehlerszenarien jeweils mit einer bestimmten Haptik verknüpft werden.

06. Erstellen Sie erkennbare Gesten

Gesten sind ein wichtiges Stück tragbarer Technologie, beschränken sich jedoch auf sehr wenige Möglichkeiten. Im Allgemeinen gibt es nur wenige systemgenerierte Gesten in den Wearables, die normalerweise nicht geändert werden sollten. Andernfalls besteht die Gefahr, dass die Benutzer verwirrt werden. Die häufigsten Gesten sind Tippen, vertikale und horizontale Wischen und Wischen am linken Rand. Wenn Sie jedoch eine benutzerdefinierte Geste wie z. B. zweimaliges Tippen erstellen, stellen Sie sicher, dass diese erkennbar sind.

Richtlinien für Schnittstellenelemente

Apple Watch App Design: Interaktion

Geben Sie dem Benutzer eine Auswahl an Optionen für die Reaktion auf ein Ereignis, indem Sie Aktionsblätter (links) und ein Beispiel für die Bilder als Symbole verwenden, wobei jedem Element ein farbiges Logo zugeordnet ist (rechts).(Bildnachweis: Vamsi Batchu)

07. Fügen Sie Warnungen und Aktionsblätter hinzu

Diese Schnittstellenelemente werden im Allgemeinen verwendet, um zu kommunizieren, wenn ein Fehler aufgetreten ist, oder um Feedback vom Benutzer zu erhalten. Stellen Sie immer sicher, dass Sie die Warnungen sparsam verwenden, und verwenden Sie die Aktionsblätter, um dem Benutzer eine Liste mit Optionen zur Reaktion auf ein Ereignis zu geben. In unserer App für die Zustellung von Lebensmitteln für Messaging-Funktionen können die Aktionsblätter beispielsweise die Option enthalten, auf die Benachrichtigung zu antworten oder sie zu verwerfen.

08. Verwenden Sie PNG-Bilder

Bilder in den Wearables können entweder statisch oder eine Reihe von Bildern sein, die mit der Zeit animiert werden. Stellen Sie sicher, dass das Format des Bildes, das verwendet oder in das Design exportiert wird, ein PNG-Element ist. Da den Bildern immer eine Ladezeit zugeordnet ist, verwenden Sie anstelle des eigentlichen Bildes ein Platzhalterbild, um dem Benutzer einen visuellen Hinweis zu geben.

09. Feature-Videos

Medien sind für jede Art von Schnittstelle unerlässlich, bei der es sich lediglich um Audiodateien oder Videodateien handeln kann. Stellen Sie sicher, dass die Audio- / Videoclips nicht länger als 30 Sekunden sind, da sie mehr Speicherplatz beanspruchen. Fügen Sie immer ein Poster-Bild hinzu, das dem Video zugeordnet ist, damit der Benutzer fundierte Entscheidungen treffen kann.

09. Verwenden Sie Picker

Dies sind die Oberflächenelemente, die eine Liste von Elementen anzeigen, die über die digitale Krone gescrollt oder navigiert werden. Dies ist eine Möglichkeit, dem Benutzer die Auswahl zu ermöglichen. Listenauswahl sollte immer dann verwendet werden, wenn die Auswahl Text / Bild sein muss. Ein einfaches Beispiel hierfür ist die Datumsauswahl. Sequenz-Picker werden im Allgemeinen verwendet, um ein Bild zu replizieren und eine benutzerdefinierte Oberfläche zu erstellen, z. B. eine Bewertungsfunktion. Benutzer können eine der Bestellungen, die sie erhalten haben, mit einem Kundenbewertungs-Picker bewerten.

Alle Apps, die Sie für eine Apple Watch oder ein anderes tragbares Gerät erstellen, sollten reaktionsschnell, umsetzbar und übersichtlich sein. Die Interaktionen sollten schnell sein und die Daten in den Apps müssen gelegentlich aktualisiert werden. Die Verkürzung der Ladezeit des Bildschirms trägt ebenfalls wesentlich dazu bei, das Erlebnis intuitiver zu gestalten.

Möchten Sie Apple-Uhren durchsuchen? Schauen Sie sich die Angebote an, die wir unten gefunden haben.

Die besten Angebote für die Apple Watch Series 3 von heute 31 Amazon Kundenbewertungen Apple Watch Series 3, GPS, ... John Lewis & Partner £ 197 Deal anzeigen Apple Watch Series 3 (GPS, ... Amazonas Prime £ 199 Deal anzeigen Apple Watch Series 3 GPS 38mm ... Wackeln £ 199 Deal anzeigen Reduzierter Preis Apple Watch Series 3 (2018 ... very.co.uk £ 309 £ 229 Deal anzeigen Weitere Angebote anzeigen Wir prüfen täglich über 130 Millionen Produkte auf die besten Preise

Weiterlesen: