Programmierer und Entwickler sind in der Regel keine Designer - dies wird allgemein als wahr angesehen. Entwickler konzentrieren sich in der Regel darauf, eine App zum Laufen zu bringen - Designer konzentrieren sich darauf, die App ästhetisch ansprechend zu gestalten . Aber warum können Entwickler nicht dasselbe tun?

Damals, als animierte Splash-Landing-Pages und ausgefallene Layouts noch keine Seltenheit waren, war es sinnvoll, einen professionellen Designer einzustellen. Aber der Trend ist heute minimal - oder zumindest stark vereinfacht.

Lassen Sie mich ein anekdotisches Beispiel geben - vor einiger Zeit hat mich jemand gebeten, einen Begrüßungsbildschirm für seine PC-Software zu erstellen. Also habe ich alles getan - auf Skizzenpapier gezeichnet, in PhotoShop importiert, viele ausgefallene Neonlinien und Effekte erstellt. Es hätte auch ein Desktop-Hintergrund sein können, anstatt ein Startbildschirm. Der Punkt ist, dass ich dieses wirklich ausgefallene und kunstvolle Design für sie geschaffen habe.

Wie Sie wahrscheinlich erraten können, hat es ihnen nicht gefallen. Das Design, zu dem sie gehörten, war buchstäblich ein kleines Logo aus ein paar überlappenden farbigen Kreisen und der Name der Software darunter. Zum Beispiel 2 Minuten in PhotoShop. Und weisst du was? Ich musste irgendwie zustimmen, dass es besser war als meins.

Der Punkt, den ich mache, ist: Ich denke, Programmierer geraten in die Falle, den gleichen Fehler zu machen, den ich gemacht habe. Wir neigen dazu, an Benutzeroberflächen und Begrüßungsbildschirme zu denken, die wirklich ausgefallene, auffällige Dinge sein müssen, die die App auszeichnen . Aber das müssen sie nicht - ehrlich gesagt sollten sie es nicht sein. Wir sollten die Denkweise eines Programmierers auf ästhetisches Design anwenden - einfach, funktional, funktioniert.

In diesem Artikel werden einige sehr einfache Möglichkeiten zum Erstellen einer eleganten Android-App-Benutzeroberfläche / -UX vorgestellt, auch wenn Sie über kaum Designerfahrung verfügen.

Wenn Sie nicht wirklich etwas anderes wollen, bleiben Sie beim Materialdesign

Ihre App muss nicht „ einzigartig“ sein und sich „ von den anderen abheben“, damit sie beliebt ist und gut aussieht. Dies ist das Ziel von Google Material Design - ein Standard für App-Benutzeroberflächen in der gesamten Branche, und sie haben gute Arbeit geleistet. Es gibt eine Menge beliebter Apps, die sich an Material Design halten - einige der größten Namen in Android-Apps, wie SwiftKey, Nova Launcher, Textra SMS und YouTube, um nur einige zu nennen.

Der Schwerpunkt von Material Design liegt auf einem kartenbasierten Layout mit einer einfarbigen Palette. Google hat mit Top-Designern aus der Branche zusammengearbeitet, eine Menge Elemente aus minimalistischen Designpraktiken entnommen und das Ganze dann kostenlos veröffentlicht - das ist ein ziemlich guter Deal, da Website- und App-Designkurse Hunderte von Dollar für E-Books, Videos, usw.

Der Einstieg in Material Design ist unglaublich einfach und es gibt eine Handvoll Werkzeuge, die es noch einfacher machen. Nachfolgend finden Sie eine Auflistung:

• Material Theme Editor (macOS + Skizze)
• Plug-in für Materialdesign-Farbpalette (PhotoShop / Illustrator)
• Material Design UI-Kit PSD (PhotoShop)
• Android Material Design UI Kit ( Skizze)
• Material UI Theme Generator

Und wenn Sie Anregungen für die Erstellung einfacher, eleganter Materialdesign-Themen benötigen, lesen Sie die folgenden Listenblogs:

• MaterialDesignBlog - 15 Tolle Beispiele für Materialdesign, die richtig gemacht wurden
• MockPlus - 12 beste Beispiele für Materialdesign-Websites, um Inspiration zu gewinnen
• AndroidAuthority - 10 besten Material Design Apps für Android

Farbverläufe sind viel einfacher als Sie denken

Als Alternative zum Materialdesign sind Farbverläufe einfach, trendy und auffällig. Und Sie denken vielleicht, dass Designer viel Zeit damit verbringen, in allen Farben zu malen oder den ultimativen Farbverlauf zu entwerfen. Sie würden sich irren - in PhotoShop ist dies in 10 Sekunden erledigt.

10 Sekunden in der PhotoShop-Benutzeroberfläche mit Farbverlauf.

Ich werde Sie sogar durch dieses Thema führen, um Ihnen zu zeigen, wie einfach es ist.

Erstellen Sie ein neues PS-Projekt für Mobile ( 1080 x 1920 px @ 72 ppi funktioniert einwandfrei)

UIGradients.com - Große Sammlung vorgefertigter Farbverläufe.

Gehen Sie zu UIGradients.com und finden Sie etwas, das Ihnen gefällt.

Kopieren Sie die Farbhex-Werte von UIGradients

Kopieren Sie die Verlaufsfarben von oberhalb der Vorschau.

PhotoShop-Verlaufsauswahl.

Klicken Sie mit der rechten Maustaste auf eine leere Ebene in PS und wählen Sie Mischoptionen> Verlaufsüberlagerung.

Klicken Sie im Dropdown-Menü direkt auf die Verlaufsmuster-Vorschau - klicken Sie nicht auf die Dropdown-Schaltfläche. Wenn Sie direkt auf den Farbverlauf klicken, wird der Farbeditor geöffnet.

Hex-Werte von UIGradient in das PS-Verlaufswerkzeug eingeben.

Fügen Sie nun einfach die hexadezimalen Farbwerte von UIGradient in den PS-Verlaufseditor ein.

Passen Sie sie nach Bedarf an. Sie haben jetzt einen professionellen Hintergrund mit Farbverlauf für Ihre Android-App.

Weitere Verlaufswerkzeuge, die es wert sind, überprüft zu werden:

• WebGradients.com
• Android Shapes Generator ( zum Erzeugen von Formen via XML, mit Option für Farbverlauf)

Verwenden Sie SVGs anstelle von JPG / PNG

Anstatt PNGs oder JPGs für Ihre grafischen Elemente (Schaltflächen, Logos usw.) zu verwenden, sollten Sie stattdessen SVGs ( Scalable Vector Graphics) verwenden. Dies liegt daran, dass die Größe von SVGs ohne Qualitätsverlust geändert werden kann. Wenn Sie beispielsweise eine JPG auf einen höheren Wert skalieren, verliert sie an Qualität und wird verschwommen / pixelig. Ein SVG nicht. Die Leute versuchen, riesige PNG-Dateien zu verwenden, die auf Android-Bildschirme verkleinert werden. Stattdessen können Sie kleinere SVGs verwenden, die ohne Qualitätsverlust vergrößert werden.

Darüber hinaus können SVG-Dateien bis zu 60% bis 80% kleiner als PNG-Dateien sein . Dies bedeutet, dass Ihre App oder mobile Website für den Benutzer schneller geladen wird und unabhängig von der Bildschirmauflösung gut aussieht.

Schließen Sie einen dunklen Modus mit Theme.AppCompat.DayNight ein

Sie müssen nicht zwei separate Designs erstellen, um ein Design im Dunkel- / Nachtmodus in Ihre App aufzunehmen. Es ist so ziemlich in die AppCompat-Bibliothek integriert, dass Sie es nur aktivieren und die Werte bearbeiten müssen.

Siehe Appuals Handbuch „So implementieren Sie einen dunklen Modus in Ihre Android-App“.

Verwenden Sie eine Vorlage oder ein mobiles UI-Kit

Wenn Ihre App keine ausgefallene, angepasste Benutzeroberfläche erfordert, ist die Verwendung einer Vorlage oder eines Kits absolut in Ordnung. Vorlagen und Kits können als Inspirationsrichtlinie verwendet werden, oder Sie können die Vorlage / das Kit einfach so verwenden, wie sie ist, und Ihre eigenen Schaltflächen und Elemente hinzufügen.

Einige großartige Ressourcen für Android-UI-Vorlagen und -Kits:

• SpeckyBoy - 50 kostenlose Handy-UI-Kits für iOS & Android
• SketchAppSources - Ressourcen für die Android-Benutzeroberfläche ( Skizze)
• Freebiesbug - PSD-UI-Kits ( PhotoShop)