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

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

Android 10 brachte eine Handvoll Updates und coole Funktionen, wie zum Beispiel einen systemweiten Dark Mode, aber nur sehr wenig für ein tatsächliches UI-Update. Google hat sich an das Materialdesign gehalten, weil es so gut funktioniert. Daher gilt dieses Handbuch auch für frühere Android-Versionen (Oreo, Pie usw.).

Wenn Sie wissen, wie Sie UI-Elemente für Material Design richtig gestalten, können Sie viele Dinge erledigen, von der Entwicklung von Apps, die auf Android-Geräten eine gute Leistung erbringen, bis hin zur Akzeptanz Ihrer benutzerdefinierten Themen in Themengeschäften wie dem Samsung Theme Store.

Sie können diese anderen Themen auch in Appuals lesen, wodurch Sie viele zusätzliche Informationen zu diesem Thema erhalten:

So fügen Sie ein dunkles Thema in Ihre Android-App ein
So starten Sie die Entwicklung von Android-Apps in Visual Studio 2017
So erstellen Sie ein benutzerdefiniertes ROM aus Android Open Source Project | Pt. 2
Manuelles Theme der Android-System-Benutzeroberfläche (Einige der Schritte sind möglicherweise für Android 9 / Android 10 veraltet, aber die allgemeinen Informationen sind immer noch sehr nützlich.)

Ein Überblick über Material Design

Material Design dreht sich um einige wichtige Dinge. Farbpalette, ansprechendes Rasterlayout und Kenntnis der Benutzeroberfläche des Android-Systems, wenn Sie Themen entwerfen. Für die Entwicklung von Apps müssen Sie alle oben genannten Punkte sowie Dinge wie Android-Laufzeitberechtigungen und -Anforderungen berücksichtigen, wenn Ihre App auf die Speicherordner, die Kamera usw. des Benutzers zugreifen kann.

Diese Seite des offiziellen Android-Entwicklers befasst sich eingehender mit den Datenschutz- und Berechtigungsänderungen, die App-Entwickler für Android 10 beachten sollten. Wir werden uns jedoch größtenteils darauf konzentrieren theming, Keine eigentliche App-Entwicklung für diesen Artikel.

Farbpalette

Für die Material Design-Farbpalette bevorzugt Google ein Zweifarbensystem 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 Farbvarianten von Lila und Cyan verwenden, damit alles miteinander verschmilzt.

Dieser Material Design Editor ist ein sehr nützliches Werkzeug, mit dem Sie Farbvariationen zusammenstellen können. Sie können sich auch von professionellen UI / UX-Designagenturen wie Clay oder dieser Liste der am besten bewerteten Webdesign-Unternehmen im Jahr 2019 inspirieren lassen.

Reaktionsschnelles Rasterlayout

Um das reaktionsschnelle Rasterlayout zu verstehen, müssen Sie verstehen, wie die Pixeldichte und die automatische Bildschirmanpassung funktionieren. Die durchschnittliche DPI eines Android-Telefons liegt größtenteils zwischen 300 und 480 DPI.

In diesem Sinne kann ein 300-DPI-Bildschirm normalerweise bis zu 4 Spalten anzeigen:

Während ein Bildschirm mit 600 dpi bis zu 8 Spalten anzeigt.

Zwischen jeder Spalte befinden sich „Dachrinnen“, im Grunde die Bereiche, die jede Spalte trennen. Auf einem Mobiltelefon mit 360 dp würde jede Rinne etwa 16 dp betragen.

Grundlegendes zur Bildschirm-DPI

Beim Entwerfen der Benutzeroberfläche, unabhängig davon, ob es sich um die Systembenutzeroberfläche oder die Benutzeroberfläche Ihrer App handelt, müssen Sie die unterschiedlichen Pixeldichten unterschiedlicher Telefongrößen berücksichtigen. Hier ist ein Diagramm der gängigsten Bildschirmauflösungen und Pixeldichten:

Als Faustregel gilt: Wenn Sie ein „globales“ Thema oder eine „globale“ App entwerfen und sich nicht darauf konzentrieren, Themen für ein einzelnes Gerät zu erstellen, sollten Sie mit der niedrigsten Dichte beginnen. Dies liegt daran, dass Sie, wenn Sie Ihr Design bei 1x beginnen, lediglich Messungen in Pixel durchführen müssen und die Werte für alle DPs gleich bleiben.

Wenn Sie jedoch für das 3,5-fache entwerfen, müssen Sie alle Werte durch 3,5 teilen, um sie an andere Dichten anzupassen. Bei der Berechnung mehrerer DP-Werte wird dies nur zu einem Problem.

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

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, geklickt usw.). Denn wenn Sie Drawables verwenden, verlieren Sie die nativen Material Design-Effekte (wie Welligkeit) welche Google in Android 9 und Android 10 umfangreich aktualisiert.

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

Hier sind zum Beispiel einige Schlüsselwörter für das Theming von Komponenten mit integrierten Material Design-Elementen, und Ihre App oder UI / UX wird weiterhin das native Systemverhalten und die UI-Zustände genießen.

Schaltfläche mit benutzerdefinierter Farbe android: backgroundTint = "@ color / red" ----- Optionsfeld mit benutzerdefinierter Farbe android: buttonTint = "@ color / red" ----- Bilder & Symbole android: drawableTint = "@ color / rot "----- ProgressBar mit benutzerdefinierter Farbe android: progressTint =" @ color / red "

Um einen einfachen Schatten unter Komponenten wie im Kartenansichtsmodus anzuzeigen, müssen Sie nur die Elevation-Eigenschaft verwenden.

android: height = "1dp"

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

Animierte Layoutänderungen können Ihre UX wirklich verbessern, und fast alle ViewGroup werden dies respektieren. Wenn sich also die Ansichtshierarchie ändert, wird eine Animation angezeigt. Mit etwas Know-how können Sie auch benutzerdefinierte Übergangseffekte entwerfen.

android: animateLayoutChanges = "true"