Btn training bbbdf557d2 Nächste iOS-Schulung: 25. Februar - 01. März 2019, Stuttgart

4. UI-Design und Prototyping von Apps mit Sketch

Vor der Umsetzung eines App-Projektes empfiehlt es sich, die Inhalte der App zunächst hinsichtlich ihrer Gliederung und Struktur zu skizzieren:

Welche Sichten mit welcher Funktionalität gibt es?
Wie kommt man von A nach B?

Auf dieser Grundlage bietet sich die Verwendung eines grafisches Designwerkzeugs an, um die konkrete Gestaltung der Sichten der App zu definieren.

Dieses Vorgehen ist hilfreich dabei, Klarheit über die Anforderungen zu schaffen und diese zu dokumentieren. Häufig werden dabei auch 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 in der Kommunikation mit dem Kunden und sollte idealerweise in einem Vorprojekt erarbeitet werden.

Zur Realisierung von Design-Entwürfen bietet sich das Vektorzeichenprogramm Sketch an. Dieses wartet mit einigen Features für die Umsetzung von App-Entwürfen auf:

Insbesondere praktisch sind eine Vielzahl von fertigen Designelementen, allen voran die von Apple bereitgestellten Elemente, die über Eigenschaften konfigurierbar sind und das Aussehen von iOS-Widgets nachahmen:

Designvorlagen
Konfigurierbare Eigenschaften

Obwohl es sich um ein Vektorzeichenprogramm handelt, das heißt Designentwürfe können beliebig skaliert werden und später an größere Displaygrößen angepasst werden, kann eine pixelgenaue Vorschau aktiviert werden (View » Canvas » Show Pixels on Zoom ^P), die einer Vorschau in einem pixelgenauen Designwerkzeug wie Photoshop entspricht:

Pixelvorschau in Sketch

Für das Übernehmen von Gestaltungselementen in das Xcode-Projekt kann die Exportfunktionalität von Sketch benutzt werden. Die Benennung der exportierten Grafikdateien erfolgt über die Namen der Ebenen und es können alle benötigten Grafiken in den benötigten Größen und Formaten auf einen Schlag exportiert werden:

Sketch: Export

Dies ist auch praktisch für Zusammenspiel zwischen Grafiker und Entwickler - wird ein so konfiguriertes Designdokument später weiterbearbeitet, können veränderte Grafikelemente mit Share » Export neu exportiert und sehr einfach im Xcode-Projekt aktualisiert werden:

Sketch: Export

Mit der kostenfreien App Sketch Mirror können Sie Entwürfe während des Bearbeitens auf dem iPhone oder iPad betrachten:

Sketch Mirror

Prototypen von Apps mit Xcode Storyboards bauen

Auf der Grundlage der Designentwürfe kann mit überschaubarem Aufwand mit einem Xcode Storyboard ein ausführbarer Prototyp der App erstellt werden, der noch keine echten Funktionalitäten enthält, sondern nur die Designentwürfe anzeigt und miteinander verknüpft. Diese Vorgehensweise empfiehlt sich, da man so oft noch undefiniertes Aspekte findet, die geklärt werden sollten, bevor es an die Implementierung geht. Das Vorgehen zur Erstellung eines solchen Prototypen mit Xcode-Storyboards wird in den folgenden Tutorials beschrieben.

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. Auf der Grundlage dieser Gestaltungsvorlagen wird im darauffolgenden Tutorial ein auf dem iPhone lauffähiger Prototyp erstellt, der noch keine tatsächliche Funktionalität aufweist und ausschließlich die grafischen Designvorlagen anzeigt. Falls das Thema UI-Design für Sie weniger von Interesse ist, können Sie dieses Tutorial überspringen und für das Folgetutorial bereitgestellte Grafiken verwenden.

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

  2. Laden Sie von Apple UI Design Resources die Designvorlage für Sketch herunter und entpacken Sie die heruntergeladene Datei iOS-11-Sketch.zip. Installieren Sie das Schritartpaket San Francisco Pro.pkg und duplizieren ⌘D Sie die Vorlagendatei UIElements+DesignTemplates+Guides.sketch zu Flashcards.sketch:

    Vorlagendatei Sketch
  3. Öffnen Sie Flashcards.sketch und fügen Sie eine neue Seite „App Entwurf“ hinzu und erstellen Sie hier ein neues Artboard mit Insert » Artboard A. Wählen Sie als Größe Apple Devices » iPhone 8:

    Neue Seite in Sketch anlegen
  4. Fügen Sie aus der Vorlagenbibliothek iOS UI Design ein Bars » Navigation » Navigation Bar-Element hinzu:

    Navigation Bar in Sketch hinzufügen
  5. Fügen Sie das Element in den App-Entwurf ein. Die Inhalte für das Element können unter Overrides eingestellt werden. Konfigurieren Sie hier die Buttons und den Titel:

    Sketch Overrides
  6. Fügen Sie analog einige Table Cell Elemente für eine Auswahlliste hinzu und konfigurieren Sie die Titel über die Overrides. Erstellen Sie analog einen Entwurf für die Lernkarten-Ansicht:

    Table Cells hinzufügen

    Die Icons für die Buttons finden Sie im Order UI in assets.zip.

  7. Vergeben Sie Namen für die beiden Artboards. Wählen Sie die beiden Artboards aus und markieren Sie diese mit Make exportable für den Export. Wählen Sie als Format PDF aus:

    Sketch Make Exportable
  8. Markieren Sie analog die drei Buttons in der Lernkartensicht für den Export als PDF. Beachten Sie dabei die Benennung der Layer - aus diesen werden die Dateinamen für die exportierten Grafiken abgeleitet:

    Sketch Benennung der Layer für den Export

  9. Exportieren Sie die Grafiken aus dem Designentwurf mit Share » Export ⇧⌘E.

Tutorial 2: Grafiken importieren und Launch-Screen einrichten

  1. Öffnen Sie das im ersten Kapitel erstellte Flashcards-Projekt in Xcode.

  2. Verwenden Sie die im vorherigen Tutorial exportierten Grafiken oder laden und entpacken Sie die Grafiken aus 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
    • iPad Pro App: AppIcon-iPadPro@2x.png

    Alle weiteren Icons sind für die Integration in die Spotlight-Suche, Benachrichtigungen und die Einstellungsseite der App und können unausgefüllt bleiben, sofern die entsprechenden Features nicht verwendet werden.

    Ziehen Sie außerdem die Ordner UI und Prototyp 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 und 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 immer mittig zu zentrieren:

    Launchscreen: Constraints hinzufügen

Tutorial 3: Prototyp mit Storyboard erstellen

  1. Löschen Sie die vom Projektassistenten angelegte Klasse ViewController.swift und wählen Sie Move to Trash (Remove reference würde die Datei im Dateisystem bestehen lassen):

    ViewController löschen
    Löschen bestätigen
  2. Öffnen Sie Main.Storyboard und wählen Sie als Vorschaugröße View as: iPhone 8 aus:

    Storyboard: Vorschaugröße
  3. Wählen Sie den bestehenden View-Controller aus und entfernen Sie die angegebene Klasse im Identity Inspector ⌘⌥3:

    ViewController-Klasse entfernen
  4. Öffnen Sie die Media Library und ziehen Sie den Entwurf für Flashcards auf den Controller:

    Storyboard Media Library
  5. Fügen Sie dem Storyboard über die Object Library einen weiteren View Controller hinzu und legen Sie auf diesen das Bild aus der Media Library mit dem Entwurf für die Lernkarten-Ansicht:

    Storyboard View Controller hinzufügen
  6. Erstellen Sie einen antippbaren Bereich um von der Eingangs-Sicht zur Lernkarte zu wechseln: Suchen Sie dazu in der Object Library nach Button. Fügen Sie den Button hinzu. Konfigurieren Sie den Button im Attributes Inspector auf der rechten Seite: entfernen Sie den Text und setzen Sie eine transparente Hintergrundfarbe:

    Storyboard Media Library
  7. Verknüpfen Sie die beiden Sichten mit einem Segue-Übergang: ziehen Sie dazu mit der rechten Maustaste vom Button auf den 2. ViewController und wählen Show als Segue-Art:

    Segue-Übergang erstellen

  8. Duplizieren Sie den Button mit ⌘D und erstellen Sie analog einen klickbaren Bereich mit Übergang vom Zurück-Button zurück zur ersten Sicht.

    Hinweis: Diese Art der Verknüpfung eines Zurück-Buttons wird normalerweise mit einem Navigations-Controller realisiert. Diese Art der Verknüpfung ist untypisch für echte Apps und nur für solche Prototypen sinnvoll.

  9. Deaktivieren Sie die Animation für beide Übergänge mit der Option Storyboard Segue » Animates, da der standardmäßig verwendete modale Übergang (Hereinfahren von unten) für einen Prototypen merkwürdig wirkt:

    Segue: Animation deaktivieren

Tutorial 4: Änderungen am Projekt committen

Xcode unterstützt die Versionierung von Xcode-Projekten mit dem Git-Versionskontrollsystem. 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 beim Anlegen des Projektes erstellte lokale Git-Repository zu übernehmen. Geben Sie als Commit-Nachricht "3. Assets importiert und Prototyp erstellt" 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....

Weiterführende Informationen

Btn book fed239f0c0 Buch „iOS 11-Apps entwickeln mit Swift & Xcode 9“
Btn training bbbdf557d2 Nächste iOS-Schulung: 25. Februar - 01. März 2019, Stuttgart
Btn about 5378472193 Über mich · Kontakt