Farbe auf der Brille

Bei der Farbe werden Display, Umgebung und Kognition berücksichtigt. Für die Farben auf der Brille wird eine sehr feine Palette verwendet, um das Verhalten von additiven Displays zu unterstützen und den visuellen Komfort zu optimieren. Farben auf Brillen sollten sparsam eingesetzt werden, um mit der realen Welt zu harmonieren, wichtige Aktionen anzuzeigen, Bilder darzustellen oder semantische Bedeutung zu vermitteln.

Schwarz ist auf einem optisch durchsichtigen Display transparent. Berücksichtigen Sie dies beim Design, da dunklere Farben matt oder transparent wirken. Dies kann aber auch genutzt werden, um Tiefe zu erzeugen.

Farbschema

Das Farbschema der Brille (Sammlung von Farb-Tokens oder Rollen zum Festlegen der Farbe Ihrer App) besteht aus drei Akzentrollen, vier Oberflächenrollen (oder neutralen Rollen) und den entsprechenden On-Color-Rollen. Die Farbrollen ähneln den Rollen im mobilen Schema und sollten auf dieselbe Weise verwendet werden.

Designelemente sollten am unteren Rand des Frames verankert werden.

Akzentfarben können für eine Farbe als begrenzte Hervorhebung verwendet werden.

Das sollten Sie tun

Verwenden Sie für den Großteil Ihrer Textinhalte weißen Text. Die Schriftfarbe kann für hervorgehobenen Text verwendet werden.

Das sollten Sie nicht tun

Verwenden Sie farbigen Text für alle Inhalte.

Farbe anpassen

Bei der Anpassung der Farben für die Brille ist es wichtig, dass die Sicht nur minimal eingeschränkt wird und die Farben mit der realen Welt harmonieren. Achten Sie darauf, dass die Lesbarkeit bei unterschiedlichen Lichtverhältnissen gewährleistet ist. Kalibrieren Sie die Farben sorgfältig, um Helligkeit und Sättigung so auszugleichen, dass sie sofort erkennbar sind.

Die primäre Farbe kann an Ihre Marken- oder primäre Interaktionsfarbe angepasst werden. Berücksichtigen Sie den Kontrast, die Sättigung und den Stromverbrauch der ausgewählten Farbe.

Designelemente sollten am unteren Rand des Frames verankert werden.

Optimierte Marken- und semantische Farben

Farben, die Marken, Aktionen oder Systembenachrichtigungen repräsentieren, müssen:

Helligkeit ausreichend für gute Lesbarkeit
Die Farbe ist gesättigt genug, um als Farbe wahrgenommen zu werden.

Weitere Informationen zum Glimmer-Design für Jetpack Compose

Stromverbrauch

Einige Farben verbrauchen mehr Strom und erzeugen mehr Wärme als andere. Grün verbraucht am wenigsten Strom, Blau am meisten, wenn man Farben mit gleichem Farbton vergleicht, wie rechts zu sehen ist. Minimieren Sie die Anzahl der Pixel, die Sie beleuchten. Je heller das Display ist, desto heißer wird es. Fülle den Bildschirm nicht mit reinem Weiß, da dies zu einer thermischen Drosselung führen kann.

Das sollten Sie tun

Berücksichtigen Sie den Kontrast zwischen allen Hintergründen, die Ihre Nutzer sehen werden.

Das sollten Sie nicht tun

UI-Elemente haben zu wenig Kontrast auf verschiedenen Hintergründen. Dies kann zu einer Überanstrengung der Augen und einer schlechten Lesbarkeit führen.

Damit der Kontrast auf jedem Hintergrund ausreicht, muss der Unterschied zwischen den Vorder- und Hintergrundfarben mindestens 70 (7:1) betragen. Sie können das ausprobieren, indem Sie Ihre Designs auf den Mischmodus „Aufhellen“ einstellen.

Das sollten Sie tun

Verwenden Sie entsättigte Farben.

Das sollten Sie nicht tun

Verwenden Sie übersättigte Farben. Sie werden möglicherweise nicht richtig angezeigt und beeinträchtigen die Lesbarkeit.

Benutzerdefinierte Oberflächen sollten vermieden werden.

Dunkle Containerfarben

Container müssen sich in der Regel auf die Anzeige von Inhalten konzentrieren, die sich darin befinden, ohne abzulenken:

Oberflächen müssen für den höchsten Kontrast schwarz sein
Die Umrisse sollten sichtbar, aber dezent sein.

Das sollten Sie tun

Verwenden Sie dunkle Oberflächen und helle Inhalte.

Das sollten Sie nicht tun

Verwenden Sie helle oder ausgefüllte Flächen.

Die Umrissgestaltung kann angepasst werden, um Branding oder eine ausdrucksstarke Benutzeroberfläche hinzuzufügen.

Das sollten Sie tun

Verwenden Sie die Standardfarben. Diese wurden für die Darstellung auf einer Brille optimiert.

Das sollten Sie nicht tun

Mehrere Umrissfarben verwenden

Warnung

Achten Sie darauf, benutzerdefinierte Farben zwischen Fokus- und Standardstatus-Umrisslinien abzustimmen.

Designelemente sollten am unteren Rand des Frames verankert werden. Anpassen des Fokusumrisses mit Blau: Die Hervorhebung des Fokusstatus besteht aus zwei Umrissen. Die Farbe wird auf Ebene 2 angewendet, um den Fokusstatus zu tönen.