Diese Seite wurde von der Cloud Translation API übersetzt.

Farbe

Die Grundlage der Farbstrategie von Android Automotive OS ist die Idee, „von Schwarz aus zu arbeiten“. Die Verwendung von Schwarz als Basis für die Farben der Benutzeroberfläche sorgt für ein konsistenteres Benutzererlebnis ohne drastische Unterschiede zwischen Tag- und Nachtmodus.

Die Verwendung von Schwarz als Basis gewährleistet zudem eine bessere Abstimmung mit der Hardware, da dunkle Materialien häufig im Fahrzeuginnenraum und auf Armaturenbrettern zum Einsatz kommen.

Kurzanleitung (TL;DR)

Stellen Sie Ihre Farbauswahl von Schwarz aus so zusammen, dass sie sowohl das Fahren bei Tag als auch bei Nacht unterstützt.
Halten Sie ein Kontrastverhältnis von mindestens 4,5:1 zwischen Hintergrund und Symbolen oder Text ein.

Farbe sparsam und gezielt einsetzen.
Höhenangabe in Graustufen
Nutzen Sie Transparenz und Deckkraft, um den visuellen Fokus zu lenken.

Farbpaletten und Farbverläufe

Das dunkle Design der Android Automotive OS-Oberfläche basiert auf einer Graustufenpalette. Idealerweise sollten alle zusätzlichen Farben eine reduzierte Intensität aufweisen, wie beispielsweise die dunklen Varianten der Farben in den Material Design-Paletten.

Dieser Abschnitt enthält Informationen zu Farbpalette und Deckkraft sowie Diagramme mit Graustufenwerten für die Höhenstufen der einzelnen Komponenten.

Materialdesign

Farbverwendung und Farbpaletten

Graustufenpalette des Android Automotive OS

Die Graustufenpalette des Android Automotive OS wird für Elemente wie Text und Symbole verwendet und ist auf die besonderen Anforderungen der Fahrumgebung zugeschnitten.

Diese Farbpalette muss vielfältig genug sein, um:

Alle verschiedenen Anwendungsfälle der Benutzeroberfläche im dunklen Design abdecken.
Bieten Sie genügend Spielraum, um Hierarchien durch tonale Unterschiede zu definieren.

Graustufen-Farbpalette — Diese Graustufenpalette ist die Hauptfarbpalette für Android Automotive OS und unterstützt das dunkle Design der Benutzeroberfläche.

Tonwertunterschiede erzeugen selbst auf tiefschwarzem Hintergrund, wo Schatten nicht wahrnehmbar sind, eine Illusion von Tiefe. Um ausreichend Tonwertunterschiede zu erzielen, enthält die Graustufenpalette von Android Automotive OS auch mittlere Grautöne. Die Grautöne des Material Designs ab Grau 900 nähern sich helleren Farben zu schnell an; ein zwei Stufen hellerer Farbton wäre Grau 700, der für den Automobilbereich zu hell ist.

Komponentenhöhendiagramm — Diese Grafik zeigt die Höhenlagen, auf denen die verschiedenen Komponenten liegen. Jeder Höhenlage ist ein Grauwert zugeordnet.

Graustufen-Höhenstufen im Tag- und Nachtmodus — Diese Grafik zeigt die Grauwerte, die verschiedenen Höhenstufen im Tag- und Nachtmodus zugeordnet sind.

Akzentfarbe

Neben der Graustufenpalette, die den Kern der Benutzeroberfläche von Android Automotive OS bildet, können auch andere Farben sparsam eingesetzt werden, beispielsweise um den Fokus zu lenken.

Android Automotive OS verfügt aktuell über eine offizielle Akzentfarbe, einen Blauton, der in der Supportbibliothek als „Autoakzent“ bezeichnet wird. Um Sättigung und Leuchtkraft zu erhöhen, weicht dieses Blau leicht vom Standard-Google-Blau ab. Dadurch wirken die Farben auf dunklen Oberflächen harmonischer.

Die blaue „Auto-Akzentfarbe“ im Android Automotive OS ist gesättigter als das Standard-Google-Blau und wurde so konzipiert, dass sie sowohl bei Tag- als auch bei Nachtfahrten gut mit der dunklen Benutzeroberfläche harmoniert.

Deckkraft-Wert-Diagramme

Transparenz erzeugt ein Gefühl von Tiefe und verstärkt das räumliche Modell von Material Design. Um Transparenz effektiv einzusetzen, wählen Sie je nach Anwendungsfall dunkle oder weiße Deckkraftwerte.

Dunkle Deckkraftwerte

Der häufigste Anwendungsfall für dunkle Deckkraftwerte ist die Erstellung von Scrims (Überlagerungen).

Weißdeckkraftwerte

Diese Werte werden hauptsächlich für Text verwendet. Sie kommen besonders gut zur Geltung, wenn der Hintergrund farbig ist. Einfarbiges Grau auf dunklem, farbigem Hintergrund wirkt zu matt.

Beispiele für die Verwendung von Deckkraft in Scrims und Texthierarchien finden Sie unter Leitfaden und Beispiele .

Kontrast

Um die grundlegenden Sicherheitsrichtlinien des Android Automotive OS zu erfüllen, sollte das Kontrastverhältnis zwischen Hintergrund und Symbolen bzw. Text mindestens 4,5:1 betragen. Einzelheiten zur Anwendung von Kontrastverhältnissen auf spezifische Benutzeroberflächenelemente im Automobilbereich finden Sie unter „Inhalte gut lesbar gestalten“ .

Kontrast nicht — Der Kontrast darf nicht unter 4,5:1 fallen, da dies die Fahrersicherheit beeinträchtigt.

Anleitung und Beispiele

Die dunkle Benutzeroberfläche von Android Automotive OS ist klar und schlicht gestaltet und verwendet nur wenige Farben. Neben der Auswahl geeigneter Farben, Töne und Deckkraftwerte für UI-Elemente (siehe Paletten und Farbverläufe ) ist es wichtig, dass jede Farbe und jeder Farbverlauf einen Zweck erfüllt.

Dieser Abschnitt bietet Anleitungen und Beispiele für die Anwendung von Transparenz, Deckkraft und Farbe zur Erreichung verschiedener Ziele. Zu diesen Zielen gehören:

Verdeckende Hintergründe
Konsistenz wahren
Eine visuelle Hierarchie schaffen, die den Fokus des Nutzers auf die wichtigsten Aktionen lenkt.
Unterscheidung von Entitäten in einer Liste

Hintergründe mit Gaze verdecken

Vollbild-Overlays werden verwendet, um Hintergründe hinter störenden Elementen wie Dialogen, die eine Benutzeraktion erfordern, abzudecken. Teilweise Overlays dienen dazu, die Aufmerksamkeit auf den Übergang von Elementen wie Benachrichtigungen zu lenken.

Vollständiges Scrim im Tagesmodus — Vollständiger Scrim (hinter der Dialogkarte) im Tagesmodus

Vollständiges Scrim im Nachtmodus — Vollständiger Scrim (hinter der Dialogkarte) im Nachtmodus

Teilweise Tarnung im Tagesmodus — Teilweise Tarnung (hinter der Benachrichtigung) im Tagesmodus

Teilweise Tarnung im Nachtmodus — Teilweise Tarnung (hinter der Benachrichtigung) im Nachtmodus

Beibehaltung der Farbkonsistenz

Farben sind ein wirkungsvolles Mittel zur Stärkung von Erinnerungen und zur Wiedererkennung. Nutzen Sie sie, um ein einheitliches Nutzererlebnis über alle Bildschirme hinweg zu schaffen.

Visuelle Farberkennung — Sorgen Sie für visuelle Kontinuität, indem Sie für ein Element in verschiedenen Ansichten dieselbe Farbe verwenden, wie beispielsweise die grüne Farbe, die hier für die Abbiegehinweise verwendet wird.

Visuelle Farbkontinuität — Verwenden Sie Farben, um zusammengehörige Elemente und Funktionen visuell zu verbinden, wie beispielsweise die hier gezeigten roten CTAs zum Auflegen.

Permanente App-Akzentfarbe — Verwenden Sie die dominierende Farbe des Albumcovers oder die zugewiesene App-Farbe für verwandte Elemente als dauerhafte visuelle Orientierungshilfe. Hier ist der Kreis um die Pausetaste mit Spotify-Grün hervorgehoben.

Beschränkung der Farbverwendung — Verwenden Sie keine unterschiedlichen Farben, um wiederholte Elemente auf einem Bildschirm willkürlich zu unterscheiden. Seien Sie vorsichtig mit Farben, wenn sie keinen Mehrwert bieten – wie im Fall dieser farbigen Umrandungen der Übersichtskarten, die die Farbe des App-Symbols wiedergeben.

Etablierung einer visuellen Hierarchie

Verwenden Sie die Deckkraftwerte für Weiß, um eine einheitliche und klare visuelle Hierarchie zu schaffen. Die Deckkraftwerte von 88, 72 und 56 bieten genau den richtigen Kontrast, um die Anforderungen an Barrierefreiheit zu erfüllen und gleichzeitig eine angenehme Leseumgebung auf dunklem Hintergrund zu gewährleisten. Verwenden Sie für den Nachtmodus eine Deckkraft von 96 % für alle Weißtöne.

Beispiel für Deckkraft und Kontrast zur Aufrechterhaltung der visuellen Hierarchie — Verwenden Sie unterschiedliche Deckkraft- und Kontrastwerte, um eine visuelle Hierarchie aufrechtzuerhalten.

Einschränkung der Deckkraft und des Kontrasts — Übertreiben Sie es nicht mit der maximalen Deckkraft oder dem maximalen Kontrast, indem Sie diese Werte nicht auf zu viele Elemente anwenden. Ein Kontrast in den Deckkraftwerten ist notwendig, um primäre und sekundäre Informationen zu unterscheiden.

Farbe Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.