Optimale Anpassung deines Designs für das iPhone X

Das iPhone X hat das App-Design grundlegend verändert. Mit seinem einzigartigen Format und den neuen Benutzeroberflächenelementen müssen Designer mehr Flexibilität und Kreativität zeigen, um eindrucksvolle Apps zu gestalten. In dieser Anleitung wird Schritt für Schritt erläutert, wie du Sketch nutzen kannst, um dein Design an die Anforderungen des iPhone X anzupassen.

Wichtigste Erkenntnisse

• Die Bildschirmhöhe beim iPhone X beträgt 812 Pixel, was Platz für neue UI-Elemente schafft.
• Die Navigation und Tab Bar sind höher und erfordern Anpassungen im Layout.
• Es ist wichtig, die Safe Area zu beachten, um sicherzustellen, dass keine Inhalte in den abgerundeten Bereich des Displays fallen.
• Der Home Indicator ist ein neues Interface-Element, das beim Entwurf berücksichtigt werden muss.

Schritt-für-Schritt-Anleitung

Beginne mit der Erstellung eines neuen iPhone X Designs in Sketch. Drücke A, um ein neues Element hinzuzufügen, und klicke dann auf das iPhone X-Design.

Die Breite bleibt bei 375 Pixel, während die Höhe auf 812 Pixel eingestellt ist. Dies verschafft dir mehr Platz für die Gestaltung deiner Benutzeroberfläche. Berücksichtige, dass die abgerundeten Ecken des Bildschirms wichtig für das Layout sind.

Kopiere den Home Controller und passe das Design an. Es ist ratsam, nicht die Standard-Bibliotheken zu verwenden, sondern die spezifische iPhone X Library für eine präzisere Anpassung. Gehe zu den Einstellungen in Sketch und aktiviere die iOS 11 Library, falls diese nicht bereits vorhanden ist.

Füge eine Standard-Navigationsleiste hinzu, um das Interface konsistent zu gestalten. Stelle sicher, dass die Höhe der Navigation Bar 88 Pixel beträgt im Vergleich zu den 44 Pixel des iPhone 8.

Suche nach der Status Bar in der iOS 11-Bibliothek und füge diese ebenfalls hinzu. Sie sollte an der oberen Kante des Bildschirms eingeordnet werden.

Für die Tab Bar gilt dasselbe: Wähle eine Version mit drei Tabs aus der iOS 11-Bibliothek und stelle sicher, dass sie 83 Pixel hoch ist, damit sie gut in das Layout passt.

Achte darauf, dass beim Design keine Elemente in den abgerundeten Bereich hineinragen. In der Programmierung nennt man das Safe Area Layout Guide – das ist der Raum, den du für eine sichere Ansicht brauchst.

Füge den Home Indicator als essenziellen Bestandteil deines Designs hinzu. Dieser sollte in der Mitte der unteren Kante platziert werden.

Nachdem du die grundlegenden Elemente hinzugefügt hast, kannst du den gesamten Abschnitt kopieren und an die gewünschte Stelle einfügen. Denke daran, die Abstände nach dem Kopieren anzupassen.

Wiederhole diesen Prozess für den Chat Controller. Erstelle eine Kopie des Designs und benenne es entsprechend um.

Ersetze die Icons für die Tabs und passe die Darstellung an. Hierbei ist es wichtig, die richtige Symbolik und die Texte sorgfältig zu wählen.

Beachte die Abstände, insbesondere zwischen den Chat-Bubbles und der Tab Bar. Halte einen Abstand von 16 Pixeln ein, um sicherzustellen, dass die Elemente gut miteinander harmonieren.

Diese Schritte zeigen, wie schnell du dein Design an das neue Format anpassen kannst. Bei Unklarheiten ist es jedoch kein Problem, das Design einfach weiter zu verfeinern.

In der nächsten Lektion wirst du lernen, wie du mit zusätzlichen Effekten im Profilbereich arbeitest, einschließlich der Verwendung von Blur-Effekten.

Zusammenfassung – Effektives iPhone X Design in Sketch

Das Anpassen deiner Designs an das iPhone X eröffnet neue Möglichkeiten. Mit dem richtigen Verständnis der neuen Bildschirmformate und UI-Elemente kannst du beeindruckende Benutzeroberflächen erstellen.