Bei Material 3 Expressive für Wear OS wird eine visuelle Hierarchie durch Zuweisen verschiedener Farbton-, Farbsättigungs- und Farbtonwerte zu den Farbrollen festgelegt, um ausdrucksstarke Akzentfarben effektiv von neutralen Oberflächenfarben zu unterscheiden. Die Einbeziehung von primären, sekundären und tertiären Akzentrollen im System erweitert nicht nur die Ausdrucksmöglichkeiten, sondern bietet auch eine detailliertere Kontrolle über die visuelle Hierarchie durch unterschiedliche Farbauswahl. Diese bewusst gewählte Farbgebung sorgt für ein einheitliches und harmonisches Erscheinungsbild der Smartwatch-Benutzeroberfläche, auch bei der Verwendung von Designs.
Beispiel für verschiedene Layouts, Komponenten und UIs in verschiedenen Designs, die aber einen ausreichenden Farbkontrast aufweisen.
Farben kombinieren und überlagern
Verwenden Sie Farben nur in den vorgesehenen Farb-Token-Paaren, um die visuelle Barrierefreiheit zu erhalten. Eine falsche Farbkombination kann den für die visuelle Barrierefreiheit erforderlichen Kontrast beeinträchtigen, insbesondere wenn Farben durch dynamische Farbgebung angepasst werden.
Farben richtig kombinieren und überlagern
Damit die visuelle Darstellung und Barrierefreiheit ordnungsgemäß sind, müssen Sie das richtige Token der richtigen Position zuordnen. Eine falsche Farbzuordnung kann zu unerwünschten visuellen Elementen führen und die Barrierefreiheit beeinträchtigen.
Dos
Farbrollen richtig kombinieren und überlagern, um für eine gute visuelle Darstellung und Barrierefreiheit zu sorgen
In diesem Beispiel bleiben Schaltflächen mit (2) on-primary auf (1) primary oder (4) on-primary-Container auf (3) primary-container bei sich änderndem Kontrastniveau lesbar und haben eine AAA-Bewertung mit einem Kontrastverhältnis von mindestens 7:1.
Don'ts
Falsche Farbzuordnungen können zu unbeabsichtigten visuellen Elementen führen und die Barrierefreiheit beeinträchtigen.
In diesem Beispiel sind Schaltflächen mit (2) primary-container auf (1) primary oder (4) primary-dim auf (3) primary-container nicht mehr lesbar, da sich die Kontraststufen ändern und nicht dem Mindestkontrastverhältnis von 7:1 für normalen Text entsprechen. Diese Kontraststufen gelten für primäre, sekundäre und tertiäre Rollen.
Empfohlene Farbkombinationen
Primär + Primäre Dimension
Verwenden Sie „Primär“ für Hauptaktionen und „Primär-Dim“ für ergänzende Elemente. Dadurch entsteht Tiefe und die primäre Aktion sticht hervor.
Primäre Dimension + Tertiäre Dimension
Verwenden Sie „Primär-Dim“ zum Hervorheben wichtiger Elemente und „Teritär“, um Feedback hervorzuheben, z. B. Tippaktionen.
Primärer + sekundärer Container
Verwenden Sie Secondary-Container für weniger wichtige Inhalte. Primary wird auf wichtige Elemente angewendet, damit sie auffallen und die Aufmerksamkeit auf sich ziehen.
Primär + Primär-Container
Verwenden Sie „Primär“ für Hauptaktionen und „Primär-Container“ für ergänzende oder sekundäre Elemente. Dadurch entsteht Tiefe und die primäre Aktion sticht hervor.
Primär-Dim + Tertiär-Dim
Verwenden Sie „Primäre Dimension“, um wichtige Elemente hervorzuheben, und „Tertiäre Dimension“, um aussagekräftiges Feedback zu geben, z. B. wenn ein Zielvorhaben erreicht wurde.
Tertiärer + primärer + sekundärer Container
Wenn nicht klar ist, was die Hauptaktion ist, verwenden Sie eine Kombination aus tertiären und primären Containern für Hauptaktionen und sekundäre Container für ergänzende Aktionen.
Sekundärer + primärer Container
Verwenden Sie „Primär-Dim“ und „Sekundär“, wenn Sie zwei gleich wichtige Optionen oder Container anzeigen möchten, aber trotzdem einen Kontrast zwischen ihnen haben möchten.
Primär- + Tertiär- + Primärcontainer
Wenn nicht klar ist, was die Hauptaktion ist, verwenden Sie eine Kombination aus „Terziär“ und „Primär“ für die Hauptaktion und einen „Primär-Container“ für ergänzende Aktionen.
Primäre + Tertiäre Dimension
Verwenden Sie „Primär“ für Hauptaktionen und „Primäre Dimension“ für ergänzende Elemente. Dadurch entsteht Tiefe und die primäre Aktion kommt besser zur Geltung.