So entwerfen Sie UI/UX für die neuesten Android 9- und 10-Updates

Google hat erst im vergangenen September das neueste Android 10 veröffentlicht, und obwohl es nur auf einer kleinen Handvoll der neuesten Premium-Telefone verfügbar ist, wird erwartet, dass viele Telefonhersteller Android 10 in naher Zukunft auf einigen ihrer neuesten Telefone einführen werden Zukunft.

Ähnliche liest: Beste Computer für Grafikdesign

Android 10 brachte eine Handvoll Updates und coole Funktionen, wie z. B. einen systemweiten Dunkelmodus, aber nur sehr wenig im Hinblick auf ein tatsächliches UI-Update. Google hat am Materialdesign festgehalten, weil es so gut funktioniert, sodass diese Anleitung auch für frühere Android-Versionen (Oreo, Pie usw.) gilt.

Zu wissen, wie man UI-Elemente für Material Design richtig entwirft, hilft bei vielen Dingen, von der Entwicklung von Apps, die auf Android-Geräten gut funktionieren, bis hin zur Akzeptanz Ihrer benutzerdefinierten Themen in Themengeschäften wie dem Samsung Theme Store.

Sie können auch diese anderen Themen auf Appuals lesen, die Ihnen viele zusätzliche Informationen zu diesem Thema geben:

Ein Überblick über Materialdesign

Material Design dreht sich um ein paar wichtige Dinge. Farbpalette, ansprechendes Rasterlayout und sich in der Benutzeroberfläche des Android-Systems zurechtzufinden, wenn Sie Themen entwerfen. Für die Entwicklung von Apps müssen Sie sich über alle oben genannten Punkte sowie Dinge wie Android-Laufzeitberechtigungen und -anforderungen im Klaren sein, wenn Ihre App auf die Speicherordner, die Kamera usw. des Benutzers zugreift.

Das Buchseite auf dem offiziellen Android-Entwickler geht viel tiefer auf die Datenschutz- und Berechtigungsänderungen ein, die App-Entwickler für Android 10 beachten sollten. Aber zum größten Teil werden wir uns darauf konzentrieren Thematisierung, nicht die eigentliche App-Entwicklung, für diesen Artikel.

Farbpalette

Für die Materialdesign-Farbpalette bevorzugt Google ein „zweifarbiges“ System mit Varianten:

So zum Beispiel wie auf diesem Foto. Ihre Primärfarbe wäre Lila, Ihre Sekundärfarbe Cyan. Und dann würden Sie für andere Elemente Ihrer Benutzeroberfläche Schattierungsvarianten von Lila und Cyan verwenden, damit alles zusammenpasst.

Das Materialdesign-Editor ist ein sehr nützliches Werkzeug, das Ihnen hilft, Farbvariationen zusammenzustellen. Sie können sich auch von professionellen UI/UX-Designagenturen wie z. B. inspirieren lassen Tonoder diese Liste der Top-bewertete Webdesign-Unternehmen im Jahr 2019.

Responsives Grid-Layout

Responsive Grid-Layouts zu verstehen, bedeutet zu verstehen, wie Pixeldichte und die automatische Bildschirmanpassung funktioniert. Zum größten Teil liegt der durchschnittliche DPI-Wert von Android-Telefonen zwischen 300 und 480 DPI.

In Anbetracht dessen kann ein 300-DPI-Bildschirm normalerweise bis zu 4 Spalten anzeigen:

Wohingegen ein Bildschirm mit 600 dpi bis zu 8 Spalten anzeigt.

Zwischen jeder Säule befinden sich „Rinnen“, im Grunde die Bereiche, die jede Säule trennen. Auf einem Handy mit 360 dp würde jede Rinne also etwa 16 dp betragen.

Bildschirm-DPI verstehen

Beim Entwerfen der Benutzeroberfläche, sei es die Systembenutzeroberfläche oder die Benutzeroberfläche Ihrer App, müssen Sie die unterschiedlichen Pixeldichten der verschiedenen Telefongrößen berücksichtigen. Hier ist eine Tabelle der gängigsten Bildschirmauflösungen und Pixeldichten:

Tabelle der Android-DPI-Bildschirmdichte

Als Faustregel gilt also: Wenn Sie ein „globales“ Design oder eine „globale“ App entwerfen und sich nicht darauf konzentrieren, Designs für ein einzelnes Gerät zu erstellen, sollten Sie mit der niedrigsten Dichte beginnen. Dies liegt daran, dass Sie, wenn Sie Ihr Design mit 1x beginnen, einfach in Pixeln messen müssen und die Werte über DPs hinweg gleich bleiben.

Wenn Sie jedoch für 3,5x entwerfen, müssen Sie alle Werte durch 3,5 teilen, um sie an andere Dichten anzupassen, und dann wird es nur ein Problem, mehrere DP-Werte zu berechnen.

Zusätzliche Tipps für das UI/UX-Design von Android 10

Wenn Sie eine benutzerdefinierte Farbe für Themenkomponenten wie Radios, Schaltflächen, Kontrollkästchen usw. benötigen, sollten Sie dies tun nicht Verwenden Sie Drawables, um die verschiedenen Zustände anzuzeigen (überprüft, angeklickt usw.). Denn wenn Sie Drawables verwenden, verlieren Sie die nativen Material Design-Effekte (wie Welligkeit) die Google in Android 9 und Android 10 umfassend aktualisiert hat.

Wenn Sie mit Material Design arbeiten, enthält Google viele Extras, die Sie nutzen können, und sie fließen natürlicher mit Ihrer UI/UX zusammen.

Hier sind zum Beispiel ein paar Schlüsselwörter für Themenkomponenten mit integrierten Materialdesign-Elementen, und Ihre App oder UI/UX wird immer noch das native Systemverhalten und die UI-Zustände genießen.

Schaltfläche mit benutzerdefinierter Farbe android:backgroundTint=”@color/red” —– Optionsschaltfläche mit benutzerdefinierter Farbe android:buttonTint=”@color/red” —– Bilder & Symbole android:drawableTint=”@color/ red” —– ProgressBar mit benutzerdefinierter Farbe android:progressTint=”@color/red”

Um wie im Kartenansichtsmodus einen einfachen Schatten unter Komponenten anzuzeigen, müssen Sie nur die Höheneigenschaft verwenden.

Android-Kartenansicht mit Schatten

android:elevation=”1dp”

Das Zusammenführen von Tags und übergeordneten Eigenschaften ist äußerst nützlich, um Ihnen eine bessere Kontrolle und verwaltbare XML-Dateien zu geben.

Animierte Layoutänderungen können Ihre UX wirklich verbessern, und fast alle ViewGroup werden dies respektieren. Wann immer es also eine Änderung in der Ansichtshierarchie gibt, wird diese mit einer Animation angezeigt. Mit etwas Know-how kann man auch gestalten benutzerdefinierte Übergangseffekte.

android:animateLayoutChanges=”true”

Similar Posts

Leave a Reply

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