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.
Diese 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 Lehm oder diese Liste der Bestbewertete Webdesign-Unternehmen im Jahr 2019.
Reaktionsschnelles Rasterlayout
Um das reaktionsschnelle Rasterlayout zu verstehen, muss man verstehen, wie Pixeldichte und die 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:
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 häufigsten 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, 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 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 diese fließen natürlicher mit Ihrer Benutzeroberfläche / Benutzeroberfläche.
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: 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'Stichworte Android Entwicklung 4 Minuten gelesen
