20. Dezember 2018

UI-Design und Prototyping von Apps mit Sketch

Vor der Umsetzung eines App-Projektes sollten die Inhalte der App grob hinsichtlich ihrer Gliederung und Struktur skizziert werden:

Welche Sichten mit welchen Funktionalitäten gibt es?
Wie kommt man von A nach B?

Dazu bietet es sich an, zunächst mit Wireframes auf Papier zu beginnen:

Dieses Vorgehen schafft schnell Klarheit über die Anforderungen und dient als Dokumentation. Häufig werden dabei potentielle Probleme aufgedeckt, die sich von vornherein berücksichtigt leichter und schneller lösen lassen, als wenn sie erst bei der Umsetzung der App auffallen und dann größere Umbauarbeiten notwendig machen. Bei der Umsetzung von Projekten im Kundenauftrag hilft diese Designdokumentation bei der Kommunikation mit dem Kunden und sollte in einem Vorprojekt erarbeitet werden.

Auf dieser Grundlage bietet sich die Verwendung eines grafisches Designwerkzeugs an, um die konkrete Gestaltung der Sichten der App zu definieren. Gut geeignet ist das Vektorzeichenprogramm Sketch. Dieses wartet mit einigen Features für die Umsetzung von App-Entwürfen auf.

Insbesondere praktisch ist die Vielzahl von Bibliotheken mit Symbol-Gestaltungselementen, die das Aussehen von iOS-Widgets nachahmen. Apple selbst stellt eine solche Bibliothek für Sketch bereit. Die Elemente können über den Inspector angepasst und mit Texten und Icons versehen werden:

Designvorlagen
Konfigurierbare Eigenschaften

Mit den Prototyping-Werkzeugen können die einzelnen Screens zu einer navigierbaren Vorschau verknüpft werden:

Sketch Prototyping

Mit der kostenfreien App Sketch Mirror können Entwürfe während des Bearbeitens auf dem iPhone oder iPad angezeigt werden.

Für das Übernehmen von grafischen Gestaltungselementen in das Xcode-Projekt kann die Exportfunktionalität von Sketch benutzt werden. Die Benennung der zu exportierenden Grafikdateien erfolgt über die Namen der Ebenen:

Sketch: Export

Mittels File » Export... können dann alle Grafiken in den benötigten Größen und Formaten in einem Durchgang exportiert werden:

Sketch: Export

Tutorial 1: App entwerfen und Grafiken exportieren mit Sketch

Dieses Tutorial zeigt, wie das Oberflächen-Design für eine iOS-App mit dem Designwerkzeug Sketch skizziert werden kann. Diese Gestaltungsvorlagen werden in den folgenden Kapiteln mittels Storyboards in Xcode umgesetzt. Falls das Thema UI-Design für Sie weniger von Interesse ist, können Sie dieses Tutorial überspringen.

  1. Laden Sie die kostenfreie 30-Tage-Testversion von Sketch von sketchapp.com. Installieren und starten Sie die App.

  2. Installieren Sie auf der Apple Design Resources-Seite via Add iOS Sketch Library die Designvorlage für Sketch:

    Vorlagendatei Sketch
  3. Erstellen Sie ein neues Sketch-Dokument und erstellen Sie hier ein neues Artboard mit Insert » Artboard A. Wählen Sie als Größe Apple Devices » iPhone XS:

    Neue Seite in Sketch anlegen
  4. Fügen Sie aus der Symbolbibliothek des Dokumentes ein Bars » Navigation Bar » iPhone - Compact » Light - Default-Element sowie ein Status Bar-Element hinzu:

    Navigation Bar in Sketch hinzufügen
  5. Fügen Sie analog ein Device Bezels » iPhone XS Display Shape-Element ein und sperren sie es per Rechtsklick auf die Ebene mit Lock Layer.

  6. Wählen Sie die Navigation-Bar-Ebene aus und konfigurieren Sie die Inhalte für das Element unter Overrides. Konfigurieren Sie hier die Buttons und den Titel:

    Sketch Overrides
  7. Fügen Sie ein Element Controls » Buttons » Light - Label hinzu und vergeben Sie einen Text für die Anzeige der Anzahl der heute zu lernenden Lernkarten:

    Button hinzufügen

  8. Erstellen Sie analog einen Entwurf für die Lernkarten-Ansicht. Verknüpfen Sie die Screens über die Prototyping-Einstellungen. Die Icons für die Buttons finden Sie im Order UI in assets.zip. Alternativ finden Sie im assets.zip unter Sketch/Flashcards.sketch einen vollständigen Design-Entwurf für die App.

    Sketch Prototyping
  9. Lassen Sie die Vorschau des Prototyps anzeigen oder verwenden Sie Sketch Mirror um den Prototyp auf dem iPhone direkt anzuzeigen:

    Vorschau in Sketch

Tutorial 2: Grafiken und Icons in Assets importieren und Launch-Screen einrichten

  1. Öffnen Sie das im Artikel Xcode-Überblick erstellte Beispielprojekt oder laden Sie ein Start-Stand von dem Projekt herunter: Flashcards.zip.

  2. Laden und entpacken Sie die Grafiken von assets.zip.

  3. Öffnen Sie im Xcode-Projektnavigator die Datei Assets.xcassets. Für Apps, die auf iPhone und iPad ausgeliefert werden, wird das Icon in fünf verschiedenen Größen benötigt. Wählen Sie das AppIcon aus und verwenden Sie die folgenden Dateien aus den heruntergeladenen Assets:

    • iPhone App: AppIcon-iPhone@2x.png und @3x.png
    • iPad App: AppIcon-iPad.png und @2x.png und AppIcon-iPadPro@2x.png
    • App Store: AppIcon-AppStore.png für Darstellung im App Store.

    Alle weiteren Icons sind für die Integration in die Spotlight-Suche, Benachrichtigungen und die Einstellungsseite der App und werden nur benötigt, wenn diese Funktionen für die App verwendet werden sollen.

    Ziehen Sie außerdem den Ordner UI in die Dateiliste der Assets um dem Projekt alle benötigten Grafiken hinzuzufügen:

    Xcode Assets

    Tipp: Es empfiehlt sich die Verwendung von größenunabhängigen Vektorgrafiken im .PDF-Format - Xcode erstellt für diese beim Build automatisch Bilddateien in allen benötigten Auflösungen.

  4. Öffnen Sie LaunchScreen.storyboard. Klicken und halten Sie den Object Library Button um zur Media Library zu gelangen. Ziehen Sie die logo-Grafik aus der Media Library auf den Startbildschirm. Platzieren Sie die Grafik mittig:

    LaunchScreen.storyboard bearbeiten
  5. Fügen Sie mittels Align zwei Layout Constraints Horizontally + Vertically in Container hinzu, um die Logo-Grafik auf allen Bildschirmgrößen immer mittig zu zentrieren:

    Launchscreen: Constraints hinzufügen
  6. Öffnen Sie das Main.storyboard und fügen Sie aus der Object Library (erneut gehaltener Klick auf den Library Button) ein Label hinzu. Klicken Sie dieses doppelt an und geben Sie den Text Flashcards an. Platzieren Sie das Label mittig, aber legen Sie noch keine Constraints an:

    Main.storyboard: Label hinzufügen

Tutorial 3: Änderungen am Xcode-Projekt via Git committen

Xcode unterstützt die Versionierung von Xcode-Projekten mit dem Versionskontrollsystem Git. In den folgenden Kapiteln wird ein lokales Git-Repository verwendet, um die Änderungen an dem Beispielprojekt zu versionieren. So können Sie jederzeit Änderungen an dem Projekt rückgängig machen und die einzelnen Schritte im Nachhinein nachvollziehen.

  1. Wählen Sie im Menü Source Control » Commit um die Änderungen in das lokale Git-Repository zu übernehmen (dieses wurde beim Anlegen des Projektes erstellt). Geben Sie als Commit-Nachricht "2. Assets importiert" an und übernehmen Sie die Änderungen mit Commit Files:

    Xcode und Git - Source Control - Commit
  2. Machen Sie testweise eine beliebige Änderung an dem Projekt und verwerfen Sie diese wieder mit Source Control » Discard All Changes....