So implementieren Sie ein Pixel-perfektes iOS-UI-Design

Wahrscheinlich haben Sie den Ausdruck „pixelperfektes Design“ unzählige Male gehört, ohne auch nur darüber nachzudenken, was er bedeutet oder bedeuten sollte . In den letzten Monaten haben Sie möglicherweise vom Niedergang des pixelgenauen Designkonzepts gehört, aber es gibt ein kleines Problem mit diesen Behauptungen, insbesondere wenn es um das Design der iOS-Benutzeroberfläche geht.

Die Definition von pixelperfektem Design ist nämlich nicht in Stein gemeißelt wie die meisten iOS-UI-Richtlinien. Die Leute interpretieren es auf unterschiedliche Weise, daher das Problem – die Pixel-Perfektion mag für einige passe erscheinen, aber andere werden das Prinzip noch jahrelang anwenden, wenn auch unter einem anderen Namen. Es ist hauptsächlich ein Nomenklaturproblem.

Was ist pixelgenaues UI-Design?

Da es keine klare Definition von Pixelperfektion gibt, verstehe ich das pixelperfekte Designkonzept so, dass alles getan wird, um Schärfe und Wiedergabetreue zu maximieren. Sobald das Design implementiert ist, sieht es auf jedem iPhone-Display identisch aus, ohne Artefakte oder Probleme jeglicher Art.

Das Erstellen einer pixelgenauen Benutzeroberfläche für iOS-Apps bedeutet, dass Sie ein Design mit Blick auf Pixel erstellen und genau dasselbe Design auf dem Bildschirm implementieren, bis hin zu jedem Pixel des referenzierten Designs, während Sie gleichzeitig sicherstellen, dass es reaktionsschnell an andere Geräte angepasst wird.

Aber warum pixelperfektes Design?

UI-Designer tun ihr Bestes, um Schnittstellen zu erstellen, die leicht wahrzunehmen und mit denen man interagieren kann. Es ist die Berufspflicht des Entwicklers, die Arbeit des Designers zu respektieren und die Schnittstelle genau so zu implementieren, wie sie geliefert wurde.

Bei nicht pixelgenauen Apps werden Benutzer wahrscheinlich keine wesentlichen Probleme haben, die sie daran hindern, die App zu verwenden und zu genießen, aber pixelgenaue Apps sehen definitiv schärfer, sauberer und konsistenter aus.

Aufgrund des stark wettbewerbsorientierten Charakters des Apple App Store ist jeder noch so kleine Feinschliff willkommen, der das Gesamterscheinungsbild und die Benutzererfahrung verbessert. Es kann dazu beitragen, Ihre App von anderen abzuheben und sie sichtbarer und damit profitabler zu machen.

Dieser kurze Designleitfaden für die iOS-Benutzeroberfläche führt Sie aus der Perspektive eines Designers und Entwicklers durch den Prozess von der grundlegenden Designphase bis zur Implementierung.

Erstellen eines iOS-UI-Designs

Lass uns anfangen. Pixelperfekte Anwendungen beginnen offensichtlich mit pixelperfekten Designs, und wir alle wissen, woher diese heutzutage kommen.

Wesentliche Design-Tools für iOS-Schnittstellen

Ich denke, ich liege richtig, wenn ich sage, dass Sketch zum De-facto-Standard für Web- und mobile UI/UX-Designer geworden ist. Während Adobe XD eine aufstrebende Alternative ist, bleibt es in Bezug auf die Popularität hinter Sketch zurück.

Als nächstes wählen wir die Größe der Zeichenfläche. Heutzutage haben wir iOS-Geräte mit unterschiedlichen Bildschirmgrößen und Seitenverhältnissen und wir müssen eine Größe auswählen, um unser Design zu erstellen. Dank Auto Layout passt es sich nahtlos an andere Displaygrößen an. Bei Bedarf können Sie verschiedene Layout-Varianten für verschiedene Größenklassen erstellen.

Die einzige wirkliche Frage hier ist: Wie sollte der Designer Informationen zur Anpassung von Designs für verschiedene Displays mit dem Entwickler teilen?

Glücklicherweise ist es nicht nötig, die Spezifikationen für jede einzelne aufzuschreiben, da das Auto-Layout-Plug-in für Sketch sich darum kümmert. Der Designer muss lediglich das gewünschte Auto-Layout einstellen, mit einem Klick in verschiedene Bildschirmgrößen exportieren, und der Entwickler versteht, wie man Layout-Einschränkungen setzt und dafür sorgt, dass alles gut aussieht, egal ob auf einem iPhone X oder dem guten alten iPhone 5.

Hinweis: Seit Version 44 hat das Sketch-Team die Steuerelemente zur Größenänderung erheblich verbessert, sodass Benutzer mehr Macht und Kontrolle darüber erhalten, wie sich die Ebenen verhalten sollen, wenn die Größe ihrer übergeordneten Ebene geändert wird.

Einrichten Ihres Designs

Das klingt großartig, aber wir haben noch nicht die Größe ausgewählt, die wir verwenden werden, um unser Design zu erstellen. Laut den iOS-Statistiken von David Smith verlassen sich 57 % aller iPhone-Nutzer auf 4,7-Zoll-Displays, die mit dem iPhone 6/6s eingeführt und anschließend im iPhone 7 und sogar im kürzlich eingeführten iPhone 8 verwendet wurden.

Ich bin mir sicher, dass Sie inzwischen alle mit den 4,7-Zoll-Displays von Apple vertraut sind, aber falls Sie kein Zahlenmensch sind, sprechen wir über 750 x 1334-Pixel-Displays mit 326 Pixel pro Zoll (PPI). Dies ist ein Standard-Retina-Display und im Code haben wir die Hälfte der Auflösung. Daher schlage ich vor, dass Sie mit 375 x 667 Pixeln beginnen.

Als nächstes müssen wir sicherstellen, dass unser iOS-UI-Design die Schärfe maximiert. Um dieses Ziel zu erreichen, müssen Sie die Pixelanpassung aktivieren :

Hier ist ein Beispiel für ein einfaches Rechteck mit und ohne Pixelanpassung:

Verwenden Sie Rund: Volle Pixel beim Bearbeiten von Vektorobjekten:

Dies sind natürlich nur die Grundlagen, und für einen genaueren Blick auf pixelgenaue iOS-UI-Elemente in Sketch sollten Sie sich das offizielle Tutorial ansehen.

Fühlen Sie sich frei, komplexe Vektoranimationen zu verwenden, da ein Entwickler sie mit der Lottie-Bibliothek problemlos abspielen kann. Sie können Adobe After Effects-Animationen auf einem mobilen Gerät abspielen, ohne dass Skalierungsartefakte auftreten. Stellen Sie dem Entwickler lediglich die JSON-Datei zur Verfügung und das war's.

Verwenden Sie so oft wie möglich das sRGB-Farbprofil. Wenn sRGB auf Displays mit großem Farbraum nicht ausreicht, müssen Sie entweder Farben oder Grafikelemente bereitstellen (ein sRGB und ein weiteres mit eingebettetem Farbprofil). Detaillierte Informationen zu Farbprofilen finden Sie bei Bedarf in den HID-Richtlinien von Apple.

Benutzerdefinierter Code für pixelgenaue Ergebnisse

Toll! Jetzt wissen wir genug, um ein pixelgenaues Design zu erstellen; Wie teilen wir es mit dem Entwickler? Wir müssen natürlich in unsere Werkzeugkiste greifen.

Auswahl der richtigen Werkzeuge

Es gibt unglaublich nützliche Tools, um die Arbeit des Designers mit Entwicklern zu teilen – Zeplin. Verwenden Sie es einfach und der Entwickler hat fast alle notwendigen Informationen, um sicherzustellen, dass Ihr UI-Design funktioniert: grafische Elemente, Schriftarten und Farben, die im Design verwendet werden, Text und vieles mehr. So ziemlich das einzige, was der Designer zu diesem Zeitpunkt bereitstellen muss, sind die Schriftartdateien, falls er Schriftarten verwendet, die nicht in iOS enthalten sind.

Ein weiteres cooles Tool ist PaintCode, das Code aus Vektorgrafiken generieren kann. PaintCode verwendet Ihre SVG-Pfade und Farbdaten, um Swift- oder ObjC-Klassen zu generieren. Mit PaintCode können Sie Ausdrücke, Variablen usw. verwenden, um passive/aktive Zustände Ihrer Schaltflächen, Auf-/Ab-Zustände, dynamischen Text, Animationen aus Variablen und vieles mehr zu erstellen.

Sie müssen sich natürlich auf Xcode und einige Standard-iOS-Entwicklungstools verlassen, aber dazu kommen wir später.

Dies ist äußerst nützlich, wenn Sie nur einen bestimmten Teil eines Design-Assets dynamisch aktualisieren müssen, z. B. die Grundfarbe für einen Verlaufshintergrund auf dem Chat-Symbol ändern. Und als praktischen Bonus verliert Ihre App an Gewicht.

Ok, der Entwickler hat endlich alles, was er braucht, also wie setzen wir pixelgenaues Design perfekt um (verzeihen Sie das Wortspiel)?

Einrichten und Synchronisieren Ihrer Tools

Mit Zeplin sollten Sie fast alles bekommen, was Sie brauchen, vorausgesetzt, der Designer richtet alles richtig ein. Wenn etwas übersehen oder unklar ist, bietet Zeplin eine effektive Kommentarfunktion, mit der Designer und Entwickler potenzielle Probleme schnell erkennen und lösen können. Auch wenn alles richtig gemacht wurde, können die Kommentare für Feedback und kleinere Verbesserungen verwendet werden.

Wie wir alle wissen, laufen die Dinge jedoch nicht immer wie geplant, sodass der Entwickler manchmal eine Farbe auswählen muss, selbst wenn der Designer die in der App verwendete Farbpalette bereitgestellt hat.

Um dies richtig zu tun, müssen Sie Ihre Tools synchronisieren:

• Stellen Sie Ihr Display-Farbprofil auf sRGB ein: Gehen Sie zu Systemeinstellungen - Displays - Farbe und wählen Sie sRGB IEC61966-2.1 .

• Wählen Sie in Digital Color Meter oder einem anderen Farbwähler-Tool die Anzeige in sRGB .

• Überprüfen Sie, ob das Farbprofil in der Xcode-Farbpalette auf Geräte-RGB eingestellt ist.

Hinweis: Bilder können ein eingebettetes Farbprofil haben. Wenn dies der Fall ist, müssen Sie Ihre Werkzeuge an dieses Profil anpassen, wenn Sie die richtige Farbe aus diesem Bild entnehmen möchten. Glücklicherweise sollte dies eine Ausnahme sein, und Sie sollten solche Fälle nicht zu oft erleben.

Denken Sie in Xcode 9 daran, Vektordaten bei Bedarf beizubehalten. Während dies die App-Größe erhöht, können Sie Ihr Bild auch für jede Anzeigegröße verwenden. Unter iOS 10 und früheren Versionen des mobilen Betriebssystems von Apple werden die Bilder jedoch nicht mit den zusätzlichen Vektordaten hochskaliert .

Stattdessen verwenden ältere Betriebssystemversionen ältere Skalierungsmechanismen und hinterlassen beim Hochskalieren über die Originalgröße hinaus ein verschwommenes Bild. Weitere Informationen zu diesem speziellen Problem finden Sie in der offiziellen Dokumentation von Apple.

Schließlich muss der Entwickler sicherstellen, dass die Größen und Abstände so gut wie möglich mit dem ursprünglichen Design übereinstimmen. Wenn es fragwürdige Informationen in Zeplin gibt, können Sie Entfernungen zwischen verschiedenen iOS-UI-Komponenten mit Variationen der Bildschirmregeln messen. Eines davon ist xScope, ein Bildschirmlineal mit vielen praktischen Funktionen.

Erwecken Sie Ihr iOS-UI-Design zum Leben

Wenn es um die Implementierung des iOS-UI-Designs geht, stehen einige Ansätze zur Auswahl: Storyboard, XIB und benutzerdefinierter Code.

• Storyboard – Visualisiert Bildschirme und die Navigation zwischen ihnen, aber es gibt keine Optionen, um ein Design von einem Controller in einen anderen zu übernehmen.

• XIBs - Visualisiert einen Bildschirm oder einen Teil davon, einfach zu vererben. Vor Xcode 9 gab es keine Option, obere/untere Layouthilfslinien zu verwenden, während wir in Xcode 9 Safe Area verwenden können.

• Code – Bei weitem die flexibelste Option, bietet aber keine sofortige Visualisierung.

Für Storyboards müssen Sie Ihr Design in Flows aufteilen, z. B. LoginFlow.storyboard, SettingsFlow.storyboard oder NewsFeedFlow.storyboard. Auf diese Weise bleiben Ihre Storyboards leicht.

Gruppieren Sie UI-Elemente in Blöcken. Dies vereinfacht die Unterstützung für alle Einschränkungen. Seien Sie nicht faul und ordnen Sie benannte Ansichten, da sie von oben nach unten auf dem Bildschirm erscheinen. Denken Sie daran, dass der untere über dem oberen angezeigt wird. Dies hilft Ihnen, verschiedene Ansichten schneller zu finden.

Siehe das folgende Beispiel für nicht gruppierte und gruppierte Elemente:

Wenn Sie mehrere Objekte haben, die links/rechts ausgerichtet sind, richten Sie sie nicht mit Versatz an der Kante aus. Der bessere Ansatz besteht darin, sich am vorherigen Element auszurichten oder eine spezielle _ffset-Ansicht_ mit einer Breitenbeschränkung zu implementieren. Wenn Sie den Offset irgendwann in der Zukunft ändern müssen, wird dies etwas einfacher.

Um Farben in IB zu verwenden, können Sie eine Palette am unteren Rand von Xcode Color Picker vorbereiten.

Hinweis: Wenn die iOS-Mindestversion Ihrer App 11 ist, können Sie die Option „Benannte Farben“ im Asset-Katalog verwenden.

Einpacken

Das ist es. Jetzt müssen wir nur noch das Ergebnis an das QA-Team senden, prüfen, ob alles in Ordnung ist, und voila! Unsere pixelgenaue App ist fertig.

Das Ziel dieses Artikels war es, ein lineares und einfaches Beispiel für ein pixelgenaues iOS-UI-Design zu liefern, um die besten Ergebnisse in so kurzer Zeit wie möglich zu erzielen. Die Zusammenarbeit zwischen UI-Designern und Entwicklern ist nicht immer so einfach und reibungslos, aber das ist ein Thema für einen anderen Artikel.