Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Entwerfen einer iOS-Fitnessanwendung mit Apple Watch-Kompatibilität

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Final product image
What You'll Be Creating

In diesem Tutorial werde ich Ihnen beibringen, wie Sie eine einfache und leicht zu bedienende iOS-Fitnessanwendung für die Verfolgung von Laufen im Freien und Radfahren entwickeln.  Neben der iOS-Anwendung gebe ich Ihnen ein Design-Beispiel für die Apple Watch-Oberfläche.

Am Ende dieses Tutorials können Sie eine iOS-Anwendung mit verschiedenen Bildschirmen und Ansichten in Sketch entwerfen.  Wir werden einige grundlegende und fortgeschrittene Techniken in Sketch verwenden, also fangen wir an!

Lernprogramm-Assets

Sie werden diese Vermögenswerte benötigen, um mitzukommen:

Kurze Verzichterklärung

Bevor wir beginnen, sollte ich darauf hinweisen, dass dieses Konzept völlig theoretisch ist.  Im Falle eines realen Projekts würde eine tiefgreifendere Analyse des Markt- und Nutzerverhaltens erforderlich sein, bevor wir daraus eine tatsächlich nutzbare mobile Anwendung machen könnten.  Ich laufe und fahre seit vier Jahren regelmäßig Rad, also habe ich dieses Konzept erstellt, um zu zeigen, wie eine Fitness-Anwendung aus meiner Sicht aussehen würde.

Einrichtung der Zeichenflächen

Wir verwenden Sketch, eine Design-Anwendung, die ursprünglich für die Gestaltung von Interfaces entwickelt wurde und heutzutage die schnellste und einfachste Art ist, für iOS zu entwerfen.

Schritt 1

Nachdem wir Sketch geöffnet haben, wählen wir im Menü Einfügen (Insert) die Option Zeichenfläche (Artboard)(A).

Setting up the Artboards

Sketch Mirror

Auf der linken Seite empfiehlt es sich, die Abmessungen des iPhone 6 zu wählen. Wenn Sie jedoch ein anderes iPhone verwenden, ist es besser, dieses zu wählen.  Das ist wichtig, denn mit Hilfe von Sketch Mirror können wir unsere Arbeit sofort in Echtzeit auf unserem iOS-Gerät sehen, ohne Bilder zu exportieren oder zu übertragen.  Sketch Mirror ist ein wichtiger Teil meines Design-Workflows, da ich innerhalb von Sekunden das Endergebnis meiner Arbeit sehen und fühlen kann.

Choose iPhone 6 size

Wählen Sie Größe von iPhone 6 Um Sketch Mirror zu aktivieren, müssen Sie die Sketch Mirror App aus dem App Store herunterladen und dann auf das Spiegel-Symbol in Sketch klicken (stellen Sie sicher, dass sich Ihre Geräte im selben Wi-Fi-Netzwerk befinden oder über ein USB-Kabel verbunden sind).

Using Sketch Mirror

Erstellung der Tab-Leiste

Seit der Einführung von iPhone 6 und 6 Plus ist es nahezu unmöglich, die ausgeblendete Navigationsschaltfläche in der oberen linken Ecke zu verwenden, da die meisten Benutzer sie nicht mit einer Hand erreichen können.  Aus diesem Grund habe ich die primäre Navigation am unteren Bildschirmrand platziert; immer sichtbar und leicht erreichbar.

Schritt 1

Erstellen wir am unteren Bildschirmrand ein 100px hohes Rechteck voller Breite.

Creating the Tab bar

Nun teilen wir dieses Rechteck so, dass wir fünf gleiche Rechtecke haben, in denen wir die Navigations-Icons später platzieren können.   Ich empfehle Ihnen, jedem Rechteck eine etwas andere Farbe zu geben, um die Grenzen eines jeden Rechtecks deutlich zu sehen.

Schritt 2

Lassen Sie uns ein weiteres 50x50px Quadrat für die Symbole erstellen.  Unten können wir die Etiketten für die verschiedenen Bildschirme hinzufügen: Aktivitäten, Herausforderungen, GO, Freunde und Profil. Für diese Etiketten setze ich Avenir Next Regular mit 24px Schriftgröße und 24px Zeilenhöhe.

Tab bar guidelines

Schritt 3

Jetzt können wir unsere Symbole in diese kleinen Quadrate platzieren.  Stellen Sie sicher, dass jedes Symbol entweder 50 px hoch oder 50 px breit ist. Für unser Profil-Symbol erstellen wir mit unserem Oval-Werkzeug (O) einen 50x50px-Kreis und wählen im Füllfeld (Fills panel) die Bildfüllung (image fill) aus.

Profile picture

Schritt 4

Blenden Sie die Hilfsrechtecke aus, indem Sie auf das kleine Augensymbol neben den Ebenen klicken.

Hideunhide layers

Für den Hintergrund unserer Tableiste habe ich eine volle weiße #FFFFFF Farbe mit 70% Opazität und 8px Hintergrundunschärfe (background blur) gewählt.  Ich fügte auch eine 1px #B4B4B4 Linie mit dem Linie-Werkzeug (L) als ein visuelles Trennzeichen am oberen Rand der Tableiste hinzu.

Tab bar background

Tableiste HintergrundFür die inaktiven Tab-Icons und Labels empfehle ich einen Grauton #666666 anstelle eines einfachen Schwarzs, und für den aktiven Teil legen wir eine lebhafte rote Farbe wie #FF3B30 fest.

Active and inactive icons

Entwerfen des GO-Bildschirms

Die meisten unserer Benutzer würden die Anwendung öffnen, kurz bevor sie zum Ausführen oder Radfahren bereit sind. Daher sollten sie zunächst mit dem Tracking der Trainingseinheiten beginnen.  Aus diesem Grund beginnen wir mit der Gestaltung des GO-Bildschirms, damit der Benutzer sofort mit dem Training beginnen kann.

Vor jeder Aktivität im Freien überprüfe ich immer das Wetter im Voraus, nur um zu wissen, was ich erwarten sollte, einschließlich der Windstärke und der Zeit des Sonnenuntergangs.  Aus meiner Sicht sind diese Details wirklich wichtig, wenn Sie im Freien sind, also habe ich einen eingebauten Wetterabschnitt auf dem GO-Bildschirm entworfen.  Auf diese Weise müssen Benutzer nicht jedes Mal eine Wetteranwendung überprüfen, bevor sie unsere Fitness-App öffnen.

Schritt 1

Zunächst benötigen wir einen weißen iOS-Status und eine Navigationsleiste aus der Entwurfsvorlage für die iOS-Benutzeroberfläche von Sketch, die Sie unter Datei> Neu von Vorlage> iOS-UI-Design (File > New From Template > iOS UI Design) finden.

Using iOS UI Design template
Copying the Navigation bar

Hinweis: Da die Sketch iOS UI Design-Vorlage uns 1x Assets zur Verfügung stellt, müssen wir sie in eine 2 px Auflösung konvertieren. Das kann einfach mit dem Skalierungswerkzeug (Scale tool) durchgeführt werden.

Using Scale in Sketch

Schritt 2

Für die Hintergrundfarbe unserer Navigationsleiste wollte ich eine lebendige und vitale Farbe wählen, die den Benutzer dazu inspiriert, sich sofort zu bewegen und zu handeln.  Also habe ich ein flaches, aber immer noch lebhaftes Rot gewählt, #FF3B30, das Ihre Aufmerksamkeit erregen soll, wenn Sie es das erste Mal sehen.

GPS indicator

GPS-AnzeigeFür die GPS-Stärke-Anzeige habe ich einen einfachen Gradienten von #15FF00 bis #15FF00 in einem abgerundeten Eckrechteck verwendet.

Auf der gegenüberliegenden Seite platzierte ich ein Fahrradsymbol, um einfach zwischen Lauf- und Fahrradmodus zu wechseln.

Schritt 3

Jetzt erstellen wir unsere Wettervorhersage am oberen Bildschirmrand.  Da die meisten unserer Trainingseinheiten normalerweise nicht länger als drei Stunden dauern, werden wir eine dreistündige Vorhersage mit zusätzlichen Informationen über die Windstärke und die Sonnenuntergangszeit bereitstellen.  Ich empfehle ein hellgraues wie #ACACAC für diese Art von Informationen, weil wir die Wettervorhersage nicht überbewerten möchten.

Weather section

Schritt 4

Als visuelles Trennzeichen zwischen verschiedenen Arten von Schnittstellen zeichnen wir ein #ECECEC-Rechteck mit 54px Höhe und 100% Breite.

Designing the weather section

Schritt 5

Vor Beginn des Trainings kann es motivierend sein, sich ein Ziel zu setzen.  Das kann in Form einer Entfernung, einer Zeit oder einer neuen durchschnittlichen Geschwindigkeitsaufzeichnung erfolgen.  Um diese Ziele anzuzeigen, erstellen wir zwei separate Kreise mit den folgenden Dimensionen: 270x270px und 230x230px.

Creating the goal circle

Erstellung des ZielkreisesZiehen Sie den ersten nach dem Platzieren der Kreise und ziehen Sie ihn in den zweiten im Ebenenbereich (layer panel).  Um eine Ringform zu erstellen, wählen Sie die Option 'Subtrahieren (Subtract)'.

Subtract option

Für die Hintergrundfarbe dieses Rings erstellen wir einen linearen Farbverlauf (linear gradient) von #AAFFA9 bis #11FFBD und setzen Sie die Opazität (opacity) auf 20%.  Das wird der inaktive Zustand unseres Rings sein.

Inactive background

Inaktiver HintergrundFür den aktiven Teil, lassen Sie uns unsere Form duplizieren, indem Sie die Form im Ebenenbereich auswählen > Rechtsklick > Duplizieren (Right click > Duplicate) (alternativ können wir auch mit ⌘-C und ⌘-V duplizieren).

Jetzt benötigen wir das Vektorwerkzeug (Vector tool) (V), um eine Maske auf unserem aktiven Kreis zu erstellen.

Using the vector tool

Hinweis: Durch Drücken der Shift-Taste während der Verwendung des Vektorwerkzeugs können Sie perfekte gerade Linien erstellen.

Verschieben wir diese Ebene unter den aktiven Kreis und legen Sie sie als Maskenebene (Masking layer) fest.  Vergessen Sie nicht, die Rahmenfüllung unserer Vektorform zu deaktivieren.

Masking layers

Für die feinen Details fügen wir zwei zusätzliche 20x20px Kreise zu unserer Maskenform hinzu, was uns eine schöne abgerundete Kante am Ende des aktiven Rings gibt.

Fine details

Profi-Hinweis: Legen Sie für den Text in der Mitte des Rings eine kleine Menge an innerem Schatten fest.

Text shadow

Nun, das einzige, was von unserem GO-Bildschirm fehlt, ist der GO-Button, der ein 120px großes Rechteck mit #FF3B30 roter Farbe sein wird.

Designing the GO button

Erstellung der Aktivitätenansicht

Auf dem Aktivitäten-Bildschirm können wir schnell durch die Trainingseinheiten von unseren Freunden oder uns selbst navigieren.  Nachdem Sie eines dieser Trainingsgeräte angeklickt haben, können wir ein detaillierteres Aussehen einschließlich eines interaktiven Graphen erhalten.

Am Ende dieses detaillierten Aussehens zeigen wir die Gesamtergebnisse des ausgewählten Trainings an, während Sie oben die spezifischen Ergebnisse sehen, je nachdem, wo wir den Graphen berühren (angezeigt durch einen hellen vertikalen Balken).

Schritt 1

Wie zuvor beginnen wir mit unserer Navigationsleiste und fügen ein zusätzliches 'Plus' -Symbol hinzu, mit dem der Benutzer Workouts manuell hinzufügen kann.

Creating the Activities screen

Schritt 2

Um zwischen den Workouts unserer Freunde und unseren eigenen zu wechseln, müssen wir eine sekundäre Navigationsleiste erstellen.  Wählen wir das Rectangle-Werkzeug (R) und erstellen Sie ein 90px großes Rechteck mit einer dunkelblauen Farbfüllung #1F2033.

Designing the secondary navigation bar

Erstellen Sie nun ein weiteres 22x22px Quadrat und drehen Sie es um 45 Grad.

Secondary navigation bar details

Wir können diese beiden Ebenen wie bei unseren Torringen gruppieren.  Stellen Sie sicher, dass Sie die Subtrahieren-Option anstelle der Union verwenden.

Using the Subtract option

Hinweis: Beachten Sie die leichte Änderung in Bezug auf die Opatität zwischen dem aktiven und dem inaktiven sekundären Navigationselement.

Schritt 3

Für das detaillierte Aussehen erstellen wir ein weiteres Rechteck mit demselben dunkelblauen Hintergrund.  Aber diesmal ist die Höhe 387px.  Für die Richtlinien verwenden wir das Linienwerkzeug (Line tool) (L).

Activities details

Schritt 4

Um den Höhenunterschied während des Trainings visuell anzuzeigen, müssen wir eine benutzerdefinierte Form mit dem Vektorwerkzeug (V) erstellen.  Es gibt keine spezielle Technik, um dieses Diagramm zu erstellen, also optimieren wir die Bézier-Kurve, bis wir das Gefühl haben, dass es richtig ist.

Displaying the altitude difference

Schritt 5

Neben dem Niveauunterschied können wir auch die Geschwindigkeitsänderungen während des Trainings mit einer bunten Kurve darstellen, wobei der rote und der grüne Bereich die Geschwindigkeit anzeigen.

Displaying the pace difference

Die Methode ist die gleiche wie zuvor mit dem Vektorwerkzeug und den Bézier-Kurven.  Für die Füllfarbe habe ich #FF3B30 für Rot und #22EA05 für Grün verwendet (grün bedeutet schneller als Durchschnittsgeschwindigkeit, Rot bedeutet langsamer).

Pace curve colors

Schritt 6

Mit Hilfe des Content Generator Sketch-Plugins können wir unseren Avatarkreisen ganz einfach verschiedene Profilbilder hinzufügen.

Using Content Generator Sketch plugin

Jetzt sind wir auch mit dem Aktivitäten-Bildschirm (Activities screen) fertig!

Final Activities screen

 Entwerfen des Herausforderungen-Bildschirms (Challenges Screen)

Auf dem Herausforderungen-Bildschirm können wir die besonderen Herausforderungen sehen, an denen wir beteiligt sind.  Während des Entwerfen dieses Bildschirms habe ich ein von Apple Watch inspiriertes kreisförmiges Design mit einem Kartentyp kombiniert, sodass der Benutzer die Herausforderungen je nach Wichtigkeit neu anordnen kann.

Schritt 1

Nachdem wir die vorherigen Bildschirme entworfen haben, wird es viel einfacher sein, diese zu erstellen, weil wir das meiste bereits entworfen haben.  Zunächst erstellen wir eine neue Zeichenfläche (Artboard) (A) und kopieren die Navigationsleiste und die sekundäre Navigationsleiste vom Aktivitäten-Bildschirm.

Schritt 2

Um die Karten zu erstellen, benötigen wir ein 355x400px Rechteck.

Challenges cards

Schritt 3

Als Hintergrundfarbe habe ich ein einfaches Weiß verwendet, aber um die Karten visuell vom Hintergrund zu trennen, fügte ich ein wenig schwarzen Schatten mit 20% Opazität hinzu.Kartendetails

Card details

Schritt 4

Um konsequent und kohärent in der gesamten Anwendung zu sein, ist es wichtig, den Benutzern die gleiche Art von Informationen auf die gleiche Weise zu zeigen.  Wie Sie sich vielleicht erinnern, haben wir bereits einen kleinen Ring für die Anzeige von Zielen auf dem GO-Bildschirm entworfen, sodass wir jetzt dieselbe Technik verwenden können.

Displaying our goals

Hinweis: Wenn Sie mehr Inspiration für schöne UI-Verläufe erhalten möchten, empfehle ich Ihnen, uigradients.com zu überprüfen.

Schritt 5

Das letzte noch fehlende Element ist die Tab-Leiste am unteren Bildschirmrand, also kopieren wir das vom vorherigen Bildschirm und stellen sicher, dass wir den aktiven Zustand der Registerkarte ändern.

Final Challenges screen

Erstellen Sie den Abschnitt Browse-Herausforderungen

Auf dem Bildschirm Browse-Herausforderungen können wir schnell die beliebtesten und neuesten Herausforderungen durchblättern, in denen wir sehen können, wie viele Tage noch für die Durchführung einer bestimmten Herausforderung verbleiben und wie viele Mitglieder daran teilnehmen.

Schritt 1

Wie immer können wir die bekannten Designelemente von vorherigen Bildschirmen kopieren, aber vergessen Sie nicht, die sekundäre Navigationsleiste zu ändern.

Schritt 2

Lassen Sie uns die grundlegenden Informationen zu einer Herausforderung erstellen und fügen Sie ein benutzerdefiniertes Abzeichen als Motivation hinzu.  Das ist die Belohnung, wenn jemand die Herausforderung erfüllt.

Hinweis: Für dieses Tutorial habe ich nur ein einfaches Abzeichen erstellt, aber in einem realen Projekt würde ich viel mehr Zeit damit verbringen, verschiedene, hochglanzpolierte Abzeichen zu entwerfen.

Designing the Browse Challenges screen

Hinweis: Beachten Sie die kleinen Unterschiede in Größe und Farbe des Textes, um eine klare Hierarchie zu erstellen.

Schritt 3

Um die verbleibende Zeit visuell anzuzeigen, erstellen Sie eine Zeitleiste.  Diese Leiste hat abgerundete Ecken 40px und eine #F5F5F5 Hintergrundfarbe.

Designing the timeline

Schritt 4

Für den aktiven Teil dieser Bar kopieren wir unser vorheriges Rechteck, machen es ein wenig kürzer und setzen einen linearen Farbverlauf von #44FF30 auf #FFDA30.

Timeline colors

Schritt 5

Nach dem Duplizieren dieses Abschnitts und dem Kopieren der Tab-Leiste vom vorherigen Bildschirm, sind wir bereit mit dem Abschnitt Browse-Herausforderungen!

Browse Challenges final

Noch etwas: Apple Watch

Last but not least habe ich ein Apple Watch Interface für unsere Anwendung erstellt.  Dieses Designkonzept basiert auf den Apple Watch Human Interface Guidelines.  Diese Richtlinien werden von Apple bereitgestellt, damit Entwickler und Designer die Möglichkeiten dieser neuen Plattform besser verstehen können.

Ich habe vier verschiedene Watch-Interfaces für unsere Fitness-Anwendung erstellt.  Im Fall des ersten Konzepts habe ich einen hochgradig anpassbaren Bildschirm erstellt, auf dem Sie die Informationen basierend auf Ihren Interessen neu anordnen können.  Darüber hinaus ändert sich die Farbe der wichtigsten (größten) Daten immer in Abhängigkeit davon, wie weit Sie von Ihrem ursprünglichen Ziel entfernt sind.  In diesem Fall bedeutet die grüne Farbe, dass Sie Ihr Fernziel fast erreicht haben.

Apple Watch interface design

Herzliche Glückwünsche!

Wir haben unser Design für iOS-Fitnessanwendungen abgeschlossen.  Nach diesem Tutorial hoffe ich, dass Sie Sketch für das Design von mobilen Anwendungen sicherer einsetzen können.

Zögern Sie nicht, die vollständige Sketch-Datei herunterzuladen, um einen detaillierteren Blick auf die von uns verwendeten Designtechniken zu werfen.  Ich bin neugierig zu hören, wie Sie den Prozess gefunden haben, also zögern Sie nicht, Feedback und Fragen in den Kommentaren zu hinterlassen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.