So entwerfen Sie eine Android App-Benutzeroberfläche, die nicht nervt

Programmierer und Entwickler sind im Allgemeinen keine Designer – dies wird allgemein als wahr anerkannt. Entwickler konzentrieren sich in der Regel auf die Erstellung einer App Arbeit – Designer konzentrieren sich auf die Erstellung der App ästhetisch ansprechend. Aber warum können Entwickler nicht dasselbe tun?

Früher, als animierte Splash-Landing-Pages und ausgefallene Layouts eine Sache waren, war es sicher sinnvoll, einen professionellen Designer einzustellen. Aber der Trend ist heute minimal – oder zumindest stark vereinfacht.

Lassen Sie mich Ihnen 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 gegeben – es auf Skizzenpapier gezeichnet, in PhotoShop importiert und viele ausgefallene Neonlinien und Effekte erstellt. Es könnte eher ein Desktop-Hintergrund als ein Begrüßungsbildschirm gewesen sein. Der Punkt ist, dass ich dieses wirklich ausgefallene und aufwändige Design für sie geschaffen habe.

Wie Sie wahrscheinlich erraten können, hat es ihnen nicht gefallen. Das Design, zu dem sie gingen, war buchstäblich ein kleines Logo aus einigen überlappenden farbigen Kreisen und der Name der Software darunter. Wie ein 2-minütiger PhotoShop-Job. Und weisst du was? Ich musste irgendwie zustimmen, dass es besser war als meins.

Der Punkt, den ich mache, ist folgender: Ich denke, Programmierer geraten in diese Falle, den gleichen Fehler zu machen, den ich gemacht habe. Wir neigen dazu, an Benutzeroberflächen und Begrüßungsbildschirme zu denken, die diese wirklich ausgefallenen, auffälligen Dinge sein müssen, die die App ausmachen auffallen. Aber sie müssen es nicht sein – ehrlich gesagt sollten sie es nicht sein. Wir sollten eine nehmen Programmierer Denkweise und wenden Sie es auf ästhetisches Design an – einfach, funktional, funktioniert.

In diesem Artikel werden einige sehr einfache Möglichkeiten zum Erstellen einer eleganten Android APP UI / UX vorgestellt, auch wenn Sie fast keine Erfahrung mit dem Entwerfen haben.

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

Ihre App muss nicht sein “einzigartig” und “heben Sie sich von den anderen ab “ damit es beliebt ist und gut aussieht. Das ist Googles Material Design Das Ziel ist es, einen Standard für App-Benutzeroberflächen in der gesamten Branche zu erreichen, 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, 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 der Branche zusammengearbeitet, viele Elemente aus minimalistischen Designpraktiken gezeichnet und das Ganze dann kostenlos veröffentlicht – das ist ein ziemlich guter Deal, da Kurse für Website- und App-Design Hunderte von Dollar für E-Books, Videos usw. etc.

Der Einstieg in Material Design ist unglaublich einfach und es gibt eine Handvoll Tools, die es noch einfacher machen. Wir werden dies unten auflisten:

Wenn Sie Inspiration für die Erstellung einfacher, eleganter Materialdesign-Themen benötigen, lesen Sie diese Listenblogs:

Farbverläufe sind viel einfacher als Sie denken

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

10 Sekunden in der PhotoShop-Verlaufsoberfläche.

Ich werde Sie sogar durch das 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 gut)

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

Gehe zu UIGradients.com und finde etwas, das du magst.

Kopieren Sie die Farbhex-Werte von UIGradients

Kopieren Sie die Verlaufsfarben über der Vorschau.

PhotoShop-Verlaufsauswahl.

Klicken Sie mit der rechten Maustaste auf eine leere Ebene in PS und gehen Sie zu Mischoptionen> Verlaufsüberlagerung.

Klicken Sie im Dropdown-Menü direkt auf die Verlaufsmustervorschau – klicken Sie nicht auf die Dropdown-Schaltfläche. Durch direktes Klicken auf den Verlauf wird der Farbeditor geöffnet.

Geben Sie Hex-Werte von UIGradient in das PS-Verlaufswerkzeug ein.

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

Nach Bedarf anpassen. Sie haben jetzt einen professionellen Verlaufshintergrund für Ihre Android-App.

Andere Verlaufswerkzeuge, die einen Besuch wert sind:

Verwenden Sie SVGs anstelle von JPG / PNG

Anstatt PNGs oder JPGs für Ihre grafischen Elemente (Schaltflächen, Logos usw.) zu verwenden, sollten Sie wirklich SVGs verwenden (Skalierbare Vektorgrafiken) stattdessen. Dies liegt daran, dass die Größe von SVGs ohne Qualitätsverlust geändert werden kann. Wenn Sie beispielsweise ein JPG auf einen höheren Wert hochskalieren, verliert es an Qualität und wird unscharf / pixelig. Ein SVG nicht. Die Leute versuchen, riesige PNG-Dateien zu verwenden verkleinert für Android-Bildschirme – wenn Sie stattdessen kleinere SVGs verwenden können hochskaliert ohne Qualitätsverlust.

Darüber hinaus können SVGs bis zu 60% bis 80% kleiner als PNG. 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 Themen entwerfen, um ein Dunkel- / Nachtmodus-Thema in Ihre App aufzunehmen. Es ist so ziemlich in die AppCompat-Bibliothek integriert, Sie müssen es nur aktivieren und die Werte bearbeiten.

Weitere Informationen finden Sie im Appual-Handbuch „Implementieren eines dunklen Modus in Ihrer Android-App“.

Verwenden Sie eine Vorlage oder ein Mobile UI Kit

Wenn Ihre App keine ausgefallene, angepasste Benutzeroberfläche erfordert, ist die Verwendung einer Vorlage oder eines Kits absolut nichts Falsches. Vorlagen und Kits können als inspirierende Richtlinie verwendet werden, oder Sie können die Vorlage / das Kit buchstäblich so verwenden, wie sie ist, und Ihre eigenen Schaltflächen und Inhalte hinzufügen.

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

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *