Tipps zum Entwerfen schlanker Layouts für die iPhone App-Benutzeroberfläche in Photoshop
Grafikdesign für das Web ist seit Jahrhunderten ein beliebter Trend. Und mit der Erfindung von Apples iPhone im Jahr 2007 ist der App Store enorm gewachsen. Jetzt kommen Designer und Entwickler von iOS-Apps zusammen, um einige wirklich fantastische Konzepte in die Realität umzusetzen.
Wenn Sie jedoch nicht gerne Xcode lernen und Objective-C programmieren, ist Photoshop möglicherweise interessanter. Im Folgenden werde ich einige der Tipps anbieten, die ich zum Entwerfen von Killer-iOS-App-Modellen erhalten habe. Und da immer neue Trends auftauchen, definiert die Design-Community die Erstellung von Apps ständig neu. Stellen Sie sich dies eher als Leitfaden für Anfänger beim Entwerfen für Apple-Geräte vor.
Richtige Dokumenteinstellungen
Bevor Sie Elemente auf der Seite berücksichtigen, sollten Sie wissen, wie die iPhone-Grafiken erstellt werden. In der neueren Retina-Anzeige bei iPhone 4 / 4S-Modellen wird der Bildschirm immer noch physisch in derselben Größe gemessen. Die Anzeige in Pixel ist jedoch gegenüber dem Original verdoppelt - was bedeutet, dass wir 640 × 960 bei einer Auflösung von 326 ppi verwenden.
Zusätzlich waren die iPhone 3 / 3GS-Symbole im Allgemeinen 57 × 57 Pixel groß. iPhone 4 und 4S-Bildschirme verwenden standardmäßig 114 × 114 (werden jedoch für ältere Auflösungen skaliert). Zum Glück ist der Icon-Design-Prozess ziemlich weit von der Erstellung eines UI-Layouts entfernt. Aber als Designer tut es nie weh, beide Fähigkeiten aufzubauen.
Wenn Sie diese Einstellungen häufig verwenden, empfehle ich, sie als voreingestellte Dokumentgröße zu speichern. Im neuen Dokumentfenster für Photoshop sehen Sie eine Schaltfläche mit der Bezeichnung "Voreinstellung speichern ...". Geben Sie ihm einfach einen Namen und Sie können diesen jedes Mal aus der Dropdown-Liste auswählen, wenn Sie ein neues Dokument erstellen.
Anstatt die iPhone-UI-Elemente manuell zu erstellen, bietet ein Blog Teehan + Lax einen kostenlosen UI-Kit-Download speziell für Photoshop an. Dazu gehören ein iPhone 4-Rendering, obere Balken, Schaltflächen, Tastaturen und viele andere nützliche Dinge. Nehmen Sie dies auf jeden Fall zuerst und speichern Sie es in einem lokalen Verzeichnis, in dem Sie einfachen Zugriff auf diese Elemente haben.
Passen Sie die Balken und Schaltflächen an
Sowohl der obere als auch der untere Bereich Ihrer App enthalten wahrscheinlich Menüleisten. Die Oberseite wird zum Beschriften der aktuellen Ansicht zusammen mit den Schaltflächen Zurück und Bearbeiten verwendet. Die Unterseite ist im Allgemeinen die Navigation und verwendet am häufigsten Registerkarten, um dies zu erreichen.
Teehan + Lax verwendet hierfür einige wirklich allgemeine Beispiele. Aber sie lassen sich viel einfacher mit Ihren eigenen Farben, Texturen und anderen Augenweiden anpassen. Nehmen wir als Beispiel die Gruppenebenenleiste (Grau-Blau) und ziehen Sie sie in ein neues Dokumentfenster in iPhone-Größe. Klicken Sie dann auf das kleine Dreieck links und öffnen Sie eine weitere Untergruppe mit der Bezeichnung Balkenoberseite . Ganz unten befindet sich eine Hintergrundebene mit einem Überlagerungseffekt für den Verlauf.
Öffnen Sie FX auf dieser Hintergrundebene und doppelklicken Sie auf die Verlaufsüberlagerung. Ich habe die Standardfarben von Apple entfernt und (von links nach rechts) # 3478a7 auf # 5eb0e7 gesetzt. Auch die beiden Tasten müssen ihre Farbverläufe verlieren - für diese habe ich die Werte # 052b50 bis # 044a8e verwendet, um einen satten dunklen Effekt zu erzielen.
Spaß mit Texturen
An diesen kleinen Farbverlaufsänderungen können Sie erkennen, dass das Anpassen Ihrer App eine recht einfache Aufgabe ist. Für ein bisschen Detail können wir eine Textur oder ein Muster über dem Balkenverlaufsbereich hinzufügen. Wir werden für dieses Demo-Beispiel einige schräge Streifen verwenden.
Erstellen Sie zunächst ein neues Dokument mit 7 × 7 Pixeln und transparentem Hintergrund. Stellen Sie dann Ihr Bleistiftwerkzeug auf die kleinste Skala (1 x 1 Pixel) und verbinden Sie es von der oberen rechten Ecke mit der unteren linken Ecke. Ich habe schwarzes HEX # 000000 verwendet, aber es sollte keine Rolle spielen, da Sie die Farbe später jederzeit ändern können. Schauen Sie sich den Screenshot unten an, wenn Sie nicht folgen:
Klicken Sie nun auf Bearbeiten -> Muster definieren ... und geben Sie ihm einen Namen. Klicken Sie dann auf Speichern. Fühlen Sie sich frei, das Fenster jetzt zu schließen (ohne zu speichern), da wir nur das Muster brauchten. Zurück in der oberen Gruppe der Leiste erstellen Sie eine neue Ebene über dem Hintergrund. CMD + Klick oder STRG + Klick auf die Vektormaske, die den gesamten Hintergrundverlaufsbalken auswählt.
Stellen Sie jedoch sicher, dass Sie wieder auf die gerade erstellte neue Ebene klicken, damit sie blau hervorgehoben wird. Wir werden es mit diesem neuen Muster füllen, aber wir möchten nur Streifen über dem Verlauf der oberen Leiste (und unter den Schaltflächen) sehen. Gehen Sie im oberen Menü zu Bearbeiten -> Füllen und wählen Sie "Muster" aus dem Dropdown-Menü. Im Feld unten sollten Sie das zuletzt gepunktete Muster auswählen und auf OK klicken.
Die Linien scheinen zunächst ziemlich starr zu sein. Lassen Sie die Füllung in der Schichtpalette auf einen Wert von ca. 20% fallen. Wir könnten auch den Mischmodus auf Überlagern ändern, damit die Balken mit den Verlaufsfarben fließen. Zoomen Sie zurück auf 100% und sehen Sie sich den fantastischen Effekt an!
Sie können eine weitere süße Textur erstellen, indem Sie ein 3 x 3 Pixel großes Dokument einrichten und ein Pluszeichen einfügen. Ich habe oben ein Beispiel hinzugefügt, wie dies das Aussehen unseres oberen Balkenverlaufs so dramatisch verändert. Sie können auch versuchen, die Farbe von reinem Schwarz zu reinem Weiß #FFFFFF zu ändern.
Registerkartensymbole
Die Navigationsschaltflächen am unteren Rand Ihrer App sind für die allgemeine Benutzererfahrung von entscheidender Bedeutung. Benutzer müssen herausfinden, wo Einstellungen bearbeitet werden müssen, wie Aufgaben ausgeführt werden müssen und was in Ihrer App schnell zu tun ist. Ansonsten werden sie oft frustriert oder gelangweilt und hören auf, es zu versuchen. Lassen Sie uns als weiteren Tipp den Navigationsbereich in der unteren Leiste auffrischen.
Suchen Sie mit derselben iPhone 4-GUI-PSD-Datei die Gruppe „Registerkartenleiste“. Denken Sie daran, dass Sie dies tun können, indem Sie CMD / STRG + in Photoshop auf den Block klicken. Ähnlich wie in der oberen Leiste können wir den Hintergrund-FX-Verlauf für einige passende Stile bearbeiten. Alternativ passt der schwarze Standardverlauf gut zu den meisten Farbschemata.
Für einige Symbole empfehle ich das Retina-Set der Arbeitsgruppe, das in den Größen 24px, 48px und 64px erhältlich ist. Auf jedes der Symbole in der GUI-PSD werden FX-Ebenenstile angewendet - im Grunde genommen ein leichter Schlagschatten und ein Überlagerungsverlauf. Diese kleinen Details ergeben ein großartiges Design. Achten Sie also genau auf Ihre Pixel. Versuchen Sie es mit diesem Farbschema-Designer, wenn Sie Probleme haben.
Sie sollten darüber nachdenken, wie sich Textbeschriftungen auf die Benutzererfahrung auswirken. Wenn Sie der Meinung sind, dass die Registerkartensymbole für sich allein ausreichen, kann der Beschriftungstext nur stören. Es ist jedoch wichtig, dass Sie Ihre Optionen offen halten und mit ein paar verschiedenen Ideen herumspielen. Versuchen Sie, die Meinungen von Freunden und Kollegen einzuholen, um herauszufinden, welche Methode für Ihre App am besten geeignet ist.
Eine andere ziemlich beliebte Technik besteht darin, dass App-Designer eine mittlere Schaltfläche erstellen, die die Registerkartenleiste in 5 Slots aufteilt. Ich habe viele wirklich kreative Anwendungen gesehen, die dieses Design verwenden, um Platz zu sparen und der Navigation etwas Eleganz zu verleihen. Formspring ist ein Beispiel, ich habe den folgenden Bildschirm hinzugefügt.
Hilfreiche Links
- Glyphish Icon Set
- Entwerfen einer iPhone Bank App in Photoshop [Tutorial]
- Entwerfen von iPhone-Anwendungen in Photoshop [PDF]
- Nützliche Sammlung von Tools und Ressourcen für iPhone / iPad App-Entwickler
- Tipps und Ressourcen zur Benutzerfreundlichkeit von iOS für iPhone- und iPad-Apps
- So erstellen Sie Ihre erste iPhone-Anwendung
Fazit
Diese Strategien für die Arbeit mit iOS-Apps und Adobe Photoshop sind nützlich, wenn Sie Ihre Design-Sinne weiterentwickeln. Mobile Anwendungen sind ein ganz anderes Ballspiel als Websites und Logos. Denken Sie während des gesamten Prozesses daran, da Sie ständig neue Techniken lernen werden.
Zusammen mit den oben hinzugefügten Links sollten Sie sich beim Design der App-Oberfläche viel wohler fühlen. Layout-Modelle sind immer schwierig und erfordern Zeit zum Erstellen und Studieren. Aber wenn Sie genug Engagement haben, ist der Mobilfunkmarkt möglicherweise der wohlhabendste Bereich. Wenn Sie weitere Fragen oder Kommentare haben, teilen Sie uns dies bitte im Diskussionsbereich unten mit.
