Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Farbe auf der Brille

Farben berücksichtigen Display, Umgebung und Wahrnehmung. Bei Farben auf der Brille wird eine hoch entwickelte Palette verwendet, um das Verhalten von additiven Displays zu unterstützen und den visuellen Komfort zu optimieren. Farben sollten auf der Brille sparsam eingesetzt werden, um mit der realen Welt zu harmonieren, wichtige Aktionen anzugeben, Bilder anzuzeigen oder eine semantische Bedeutung zu vermitteln.

Schwarz ist auf einem optisch transparenten Display transparent. Das solltest du beim Design berücksichtigen, da dunklere Farben stumpf oder transparent erscheinen. Das kann aber auch genutzt werden, um Tiefe zu erzeugen.

Farbschema

Das Farbschema der Brille (eine Sammlung von Farb-Tokens oder -Rollen zum Festlegen der Farbe deiner App) besteht aus drei Akzentrollen, sechs Oberflächenrollen (oder neutralen Rollen) und ihren On-Color-Entsprechungen. Die Farbrollen ähneln den Rollen des mobilen Schemas und sollten auf dieselbe Weise verwendet werden.

Designelemente sollten am unteren Rand des Frames verankert sein.

Akzentfarben können für On-Color-Elemente verwendet werden, um eine begrenzte Hervorhebung zu erzielen.

Das solltest du tun

Verwende für die meisten Textinhalte weißen Text. Die Schriftfarbe kann für hervorgehobenen Text verwendet werden.

Das solltest du nicht tun

Verwende für alle Inhalte farbigen Text.

Farbe anpassen

Beim Anpassen der Farben für die Brille sind eine minimale visuelle Beeinträchtigung und die Harmonisierung mit der realen Welt entscheidend. Priorisiere die Lesbarkeit bei unterschiedlichen Lichtverhältnissen. Passe die Farben sorgfältig an, um Helligkeit und Sättigung auszugleichen, damit sie sofort erkennbar sind.

Die Primärfarbe kann so angepasst werden, dass sie die Farbe deiner Marke oder die Farbe der primären Interaktion verwendet. Berücksichtige den Kontrast, die Sättigung und den Stromverbrauch der ausgewählten Farbe.

Designelemente sollten am unteren Rand des Frames verankert sein.

Optimierte Marken- und semantische Farben

Farben, die Marke, Aktionen oder Systembenachrichtigungen darstellen, müssen:

hell genug sein, um lesbar zu sein
gesättigt genug sein, um als Farbe erkennbar zu sein
einen Unterschied von mindestens 66% zwischen Vordergrund und Hintergrund im HCT-Farbraum aufweisen

Weitere Informationen zum Jetpack Compose Glimmer-Design.

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. Minimiere die Anzahl der Pixel, die du beleuchtest. Je heller der Bildschirm, desto heißer wird das Display. Fülle den Bildschirm nicht mit reinem Weiß, da dies zu einer thermischen Drosselung führen kann.

Das solltest du tun

Berücksichtige den Kontrast zwischen allen Hintergründen, die deine Nutzer sehen.

Das solltest du nicht tun

Verwende zu wenig Kontrast für UI-Elemente auf verschiedenen Hintergründen. Das kann zu Überanstrengung der Augen und schlechter Lesbarkeit führen.

Damit der Kontrast auf jedem Hintergrund ausreicht, muss der Unterschied im Farbton zwischen Vordergrund- und Hintergrundfarbe 70 (7:1) betragen. Du kannst das testen, indem du deine Designs auf den Bildschirm-Überblendungsmodus einstellst.

Das solltest du tun

Verwende entsättigte Farben.

Das solltest du nicht tun

Verwende zu gesä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 in der Regel Inhalte anzeigen, ohne abzulenken:

Oberflächen müssen schwarz sein, um den höchsten Kontrast zu erzielen.
Oberflächen sollten im fokussierten Zustand nicht heller als 34% Farbton sein, um die Lesbarkeit von Vordergrundelementen zu gewährleisten.
Umrisse sollten sichtbar, aber dezent sein.

Das solltest du tun

Verwende dunkle Oberflächen und helle Inhalte.

Das solltest du nicht tun

Verwende helle oder gefüllte Oberflächen.

Das solltest du tun

Sorge für Kontrast zwischen Oberfläche und Text. Ein Unterschied von etwa 66 Farbtönen ist empfehlenswert.

Das solltest du nicht tun

Der Kontrast zwischen Oberfläche und Text sollte nicht zu gering sein.

Das solltest du tun

Sorge dafür, dass sich Oberfläche und Oberflächenvarianten ausreichend im Farbton unterscheiden, um die erforderliche visuelle Hierarchie zu schaffen.

Das solltest du nicht tun

Der Farbton von Oberfläche und Oberflächenvariante sollte sich nicht zu stark ähneln (Unterschied von etwa 20).

Umrisse können angepasst werden, um Branding oder eine ausdrucksstarke UI hinzuzufügen.

Das solltest du tun

Verwende die Standardfarben. Sie wurden für das Display der Brille optimiert.

Das solltest du nicht tun

Verwende mehrere Umrissfarben.

Warnung

Achte darauf, dass die benutzerdefinierten Farben zwischen den Umrissen für den Fokus- und den Standardstatus harmonieren.

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