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:

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.

Dies Seite Der offizielle Android-Entwickler geht viel tiefer in die Datenschutz- und Berechtigungsänderungen ein, die App-Entwickler für Android 10 beachten sollten. In diesem Artikel konzentrieren wir uns jedoch größtenteils auf das Thema und nicht auf die eigentliche App-Entwicklung.

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.

Dies 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 inspirieren lassen Lehmoder diese Liste der Bestbewertete Webdesign-Unternehmen im Jahr 2019.

Reaktionsschnelles Rasterlayout

Um das reaktionsschnelle Rasterlayout zu verstehen, muss man verstehen, wie Pixeldichte und automatische Bildschirmanpassung funktioniert. Die durchschnittliche DPI für Android-Telefone liegt größtenteils zwischen 300 und 480 DPI.

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

Auf einem Bildschirm mit 600 dpi werden bis zu 8 Spalten angezeigt.

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 häufigsten Bildschirmauflösungen und Pixeldichten:

Tabelle der Bildschirmdichte von Android DPI

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, und dann wird es zum Problem, mehrere DP-Werte zu berechnen.

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 keine Zeichen verwenden, um die verschiedenen Status anzuzeigen (aktiviert, 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.

Bei der Arbeit mit Material Design enthält Google viele Extras, die Sie nutzen können, und diese fließen natürlicher in Ihre Benutzeroberfläche / Benutzeroberfläche ein.

Im Folgenden finden Sie beispielsweise einige Schlüsselwörter für das Theming von Komponenten mit integrierten Material Design-Elementen. Ihre App oder UI / UX wird weiterhin das native Systemverhalten und die UI-Status 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 Cardview mit Schatten

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 gestalten benutzerdefinierte Übergangseffekte.

android: animateLayoutChanges = “true”

Similar Posts

Leave a Reply

Your email address will not be published.