Diese Seite wurde von der Cloud Translation API übersetzt.

Farbe auf der Brille

Bei der Farbe werden Display, Umgebung und Kognition berücksichtigt. Die Farben auf der Brille basieren auf einer sehr feinen Palette, um das Verhalten von additiven Displays zu unterstützen und den visuellen Komfort zu optimieren. Farben sollten auf Brillen sparsam eingesetzt werden, um mit der realen Welt zu harmonieren, wichtige Aktionen zu kennzeichnen, Bilder anzuzeigen 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 des mobilen Schemas 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. Außerdem muss die Lesbarkeit bei unterschiedlichen Lichtverhältnissen gewährleistet sein. Dazu gehört die sorgfältige Abstimmung der Farben, um Helligkeit und Sättigung in Einklang zu bringen. So wird dafür gesorgt, dass die Farben gut lesbar sind, aber gleichzeitig genügend Sättigung beibehalten, um sofort erkennbar zu sein. 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
Satt genug, um als Farbe erkennbar zu sein

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 (siehe rechts). Minimieren Sie die Anzahl der Pixel, die Sie beleuchten. Je heller das Display ist, desto heißer wird es. Füllen Sie 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 ausreichend ist, muss der Unterschied im Farbton zwischen Vorder- und Hintergrundfarben mindestens 70 (7:1) betragen. Sie können das testen, indem Sie Ihre Designs auf den Bildschirm-Farbüberblendungsmodus 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 in ihnen befinden, ohne abzulenken:

Oberflächen müssen für den höchsten Kontrast schwarz sein
Umrisslinien 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. Fokusumriss mit Blau anpassen: Die Fokusstatus-Hervorhebung besteht aus zwei Umrissen. Die Farbe wird auf Ebene 2 angewendet, um den Fokusstatus zu tönen.