Das Wear Material 3 Expressive-Farbsystem verwendet drei Akzentschichten (primär, sekundär, tertiär) für wichtige Komponenten und zwei neutrale Oberflächenschichten. Jede Rolle bietet eine Reihe von Werten mit einem einheitlichen Kontrast, was ausdrucksstarke, aber barrierefreie Farbkombinationen für eine einheitliche Darstellung bei jedem Thema ermöglicht.
Was sind Farbrollen?
Farbrollen sind wie die „Zahlen“ in einem Malen-nach-Zahlen-Canvas. Sie sind das Bindeglied zwischen den Elementen der Benutzeroberfläche und bestimmen, welche Farbe wo hingehört.
- Farbrollen werden Materialkomponenten zugeordnet:Sie verwenden diese Farbrollen unabhängig davon, ob Sie das statische Baseline-Schema oder dynamische Farben verwenden. Wenn Ihr Produkt benutzerdefinierte Komponenten enthält, müssen diese diesen Farbrollen korrekt zugeordnet werden.
- Farbrollen unterstützen die Barrierefreiheit:Das Farbsystem basiert auf barrierefreieren Farbkombinationen. Diese Farbpaare bieten einen Farbkontrast von mindestens 3:1.
- Farbrollen werden tokenisiert:Rollen werden im Design und im Code durch Tokens implementiert. Ein Design-Token repräsentiert eine kleine, wiederverwendbare Designentscheidung, die Teil des visuellen Stils eines Designsystems ist.
Wichtige Begriffe
Hier sind die wichtigsten Begriffe, die in den Namen von Farbrollen vorkommen:
- Fläche:Eine Rolle, die für Hintergründe und große, weniger hervorgehobene Bereiche des Bildschirms verwendet wird.
- Primär, Sekundär, Tertiär:Rollen für Akzentfarben, mit denen Vordergrundelemente hervorgehoben oder weniger betont werden.
- Container:Rollen, die als Füllungsfarbe für Vordergrundelemente wie Schaltflächen verwendet werden. Sie sollten nicht für Text oder Symbole verwendet werden.
- An:Rollen, die mit diesem Begriff beginnen, geben eine Farbe für Text oder Symbole an, die über der übergeordneten Farbe liegt. „On primary“ wird beispielsweise für Text und Symbole auf der primären Füllfarbe verwendet.
- Variante:Rollen, die auf diesen Begriff enden, sind eine weniger betonte Alternative zu ihrem nicht variantenbezogenen Paar. Die Konturvariante ist beispielsweise eine weniger betonte Version der Konturfarbe.
Hauptrollen
Primäre Rollen werden für wichtige Komponenten in der gesamten Benutzeroberfläche verwendet, z. B. für Schaltflächen mit Randabstand, gut sichtbare Schaltflächen, aktive Status und Symbole in den tonalen Schaltflächenstilen.
Primär
- Primär
- On-Primary
Verwenden Sie die Rolle „Primär“ für die wichtigsten Aktionen in der Benutzeroberfläche, z. B. primäre Schaltflächen oder Calls-to-Action. Diese Farbe sollte auffallen und sofort erkennbar sein, um die Nutzer zu wichtigen Interaktionen zu leiten.
Primary-Dim
- Primary-Dim
- On-Primary
Dimmen wird in der Regel für Elemente verwendet, die sich visuell von der primären Aktion abheben müssen, aber nicht sofort die Aufmerksamkeit oder Interaktion der Nutzer erfordern.
Primary-Container
- Primary-Container
- On-Primary-Container
Wenden Sie „Primärer Container“ auf Hintergrundelemente wie Karten oder Modalfenster an, um Abschnitte oder ausgewählte Status hervorzuheben. Sie hilft, die Aufmerksamkeit auf wichtige Inhalte oder laufende Aktivitäten auf der Benutzeroberfläche zu lenken.
Sekundäre Rollen
Sekundäre Rollen werden für wichtige Komponenten in der gesamten Benutzeroberfläche verwendet, die nicht so wichtig wie die primäre Rolle sind, aber dennoch hervorstechen müssen. Primäre und sekundäre Schriftarten können in Layouts zusammen verwendet werden, um Unterschiede zu schaffen und den Fokus zu setzen.
Sekundär
- Zweiter Track
- On-Secondary
Verwenden Sie die Rolle „Sekundär“, um Aktionen in Bereichen mit einer dichten Benutzeroberfläche zu unterstützen, z. B. sekundäre Schaltflächen oder ergänzende Aktionen. Sie sorgt für Sichtbarkeit, ohne die primären Elemente in komplexen Layouts zu überschatten.
Secondary-Dim
- Sekundäre-Dim
- Zweiter Track
Die Rolle „Secondary-Dim“ bietet einen gedämpften Kontrast für passive Elemente in dichten Bereichen. Sie ergänzt die Sekundärfarbe und verleiht dem Design subtile Tiefe. So bleibt die Benutzeroberfläche übersichtlich und Nutzer können sich leichter zurechtfinden.
Secondary-Container
- Sekundärer Container
- On-Secondary-Container
Verwenden Sie Sekundärcontainer, um sekundäre Elemente in dichten Layouts zu organisieren. Sie schaffen Struktur und Trennung, damit sekundäre Inhalte sich abheben, aber nicht dominant sind.
Tertiäre Rollen
Tertiäre Rollen werden für kontrastierende Akzente verwendet, um Primär- und Sekundärfarben auszubalancieren oder die Aufmerksamkeit auf ein Element wie ein Eingabefeld zu lenken. Tertiäre Rollen können auch angeben, wann sich Inhalte ändern oder hervorgehoben werden sollen, z. B. wenn ein Ziel erreicht wird.
Tertiär
- Dritter Track
- On-Tertiary
Die Rolle „Terziär“ wird verwendet, um die Aufmerksamkeit auf wichtige Elemente zu lenken. Tertiäre Rollen sind besonders effektiv für Komponenten, die sich abheben sollen, z. B. Logos, Sticker oder spezielle Aktionselemente.
Tertiary-Dim
- Tertiär-Dim
- Dritter Track
Verwenden Sie die Rolle „Drittrangig abdunkeln“ für Schaltflächen oder Aktionen, die sich auf drittrangige Aktionen beziehen, aber nicht sofort den Fokus erfordern.
Tertiärer Container
- Tertiärer Container
- On-Tertiary-Container
Verwenden Sie tertiäre Container für Hintergründe, in denen sekundäre Inhalte gruppiert werden, z. B. Sammlungen von Logos oder Stickern. Es betont tertiäre Elemente und behält gleichzeitig Balance und Struktur in der Benutzeroberfläche bei.
Semantische Rollen
Rot (Fehler) wird für kritische Probleme wie Fehler, Löschen und alles im Zusammenhang mit einem Notfall verwendet. Sie soll sofort die Aufmerksamkeit auf Probleme oder Warnungen lenken, damit Nutzer schnell Bereiche erkennen können, in denen Korrekturmaßnahmen erforderlich sind. Der Farbton von „Fehlerrot“ sollte einen ausreichenden Kontrast zu Hintergründen haben, um die Standards für Barrierefreiheit zu erfüllen. So ist er gut sichtbar und von anderen Statusfarben wie Warnungen oder Erfolgsmeldungen zu unterscheiden.
Fehler
- Fehler
- On-Error
Ein semantisches, aber leicht thematisch getöntes Rot, das Aktionen wie „Entfernen“, „Löschen“, „Schließen“ oder „Schließen“ angibt, z. B. „Wischen, um zu enthüllen“. Als Containeralternative hinzugefügt, die etwas weniger alarmierend und dringlich ist als die Farbe für Fehler.
Error-Dim
- Error-Dim
- On-Error
Ein semantisches, aber leicht thematisch getöntes Rot, das auf Fehler mit hoher Priorität oder Notfallaktionen hinweist, z. B. Sicherheitswarnungen, fehlgeschlagene Dialogfeld-Overlays oder Stopp-Schaltflächen.
Fehlercontainer
- Fehler-Container
- On-Error-Container
Weniger auffällige Containerfarbe für Komponenten, die den Fehlerstatus verwenden. Kann auch einen aktiven Fehlerstatus anzeigen, der weniger interaktiv ist als ein gefüllter Status, z. B. eine aktive Schaltfläche oder Karte für die Notfallfreigabe oder ein fehlgeschlagener Overlay-Dialog.
Oberflächencontainer und Höhen
Oberflächencontainer sind entscheidend für die Definition von Tiefe und Höhe innerhalb der Benutzeroberfläche. Sie sorgen durch Farbe für Struktur und Hierarchie und helfen, Komponenten anhand ihrer Wichtigkeit und Interaktion zu unterscheiden.
Surface-Container-Low
- Surface-Container-Low
- Auf der Oberfläche
- Variante auf der Oberfläche
Ideal für einen erweiterten Container, der sich unter dem Surface-Container befinden muss, z. B. eine erweiterte Karte in der Benachrichtigung. Kann auch für nicht interaktive Karten verwendet werden, bei denen Inhalte von Begrenzungen profitieren.
Surface-Container
- Surface-Container
- Auf der Oberfläche
- Variante auf der Oberfläche
Die Standardcontainerfarbe für die meisten Elemente. Er bietet eine neutrale, mäßige Erhebung und eignet sich daher für allgemeine UI-Komponenten.
Surface-Container-High
- Surface-Container-High
- Auf der Oberfläche
- Variante auf der Oberfläche
Ideal für Komponenten mit hoher Betonung, die auf oder in Kombination mit Surface-Containern platziert werden müssen. Diese Farbe hilft, wichtige Bereiche in der Benutzeroberfläche hervorzuheben und eine Hierarchie zu schaffen.