System kolorów ekspresyjnych Wear Material 3 wykorzystuje 3 warstwy akcentów (podstawową, dodatkową i trzeciorzędową) w przypadku kluczowych komponentów oraz 2 neutralne warstwy powierzchni. Każda rola oferuje zakres wartości o spójnym kontraście, co umożliwia tworzenie wyrazistych, ale dostępnych kombinacji kolorów, które zapewniają spójne wrażenia w każdym motywie.
Czym są role kolorów?
Role kolorów są jak „numery” na płótnie do malowania po numerach. Stanowią one łącznik między elementami interfejsu a kolorami.
- Role kolorów są przypisane do komponentów Material: będziesz używać tych ról kolorów niezależnie od tego, czy korzystasz ze statycznego schematu podstawowego, czy z dynamicznych kolorów. Jeśli produkt zawiera niestandardowe komponenty, muszą one być prawidłowo przypisane do tego zestawu ról kolorów.
- Role kolorów wspierają ułatwienia dostępu: system kolorów jest oparty na bardziej dostępnych kombinacjach kolorów. Te pary kolorów zapewniają minimalny kontrast kolorów na poziomie 3:1.
- Role kolorów są tokenizowane: role są wdrażane w projekcie i kodzie za pomocą tokenów. Token projektu to mała, wielokrotnego użytku decyzja projektowa, która jest częścią stylu wizualnego systemu projektowania.
Kluczowe terminy
Oto kluczowe terminy, które pojawiają się w nazwach ról kolorów:
- Powierzchnia: rola używana w przypadku tła i dużych obszarów ekranu o niskim kontraście.
- Podstawowy, dodatkowy, trzeciorzędny: role kolorów akcentujących używane do podkreślania lub pomniejszania elementów pierwszego planu.
- Kontener: role używane jako kolor wypełnienia elementów pierwszego planu, takich jak przyciski. Nie należy ich używać w przypadku tekstu ani ikon.
- Włączone: role zaczynające się od tego terminu wskazują kolor tekstu lub ikon na tle powiązanego koloru nadrzędnego. Na przykład „on primary” jest używany w przypadku tekstu i ikon na tle podstawowego koloru wypełnienia.
- Wariant: role kończące się tym terminem stanowią alternatywę o mniejszym znaczeniu dla ich odpowiedników bez tego terminu. Na przykład wariant obrysu jest mniej wyrazistą wersją koloru obrysu.
Role główne
Podstawowe role są używane w przypadku kluczowych komponentów interfejsu, takich jak przyciski przy krawędzi, wyróżnione przyciski, stany aktywne i ikony w stylach przycisków tonalnych.
Główne
- Podstawowy
- On-Primary
Używaj roli Podstawowa w przypadku najważniejszych działań w interfejsie, takich jak główne przyciski lub wezwania do działania. Ten kolor powinien się wyróżniać i być od razu rozpoznawalny, aby kierować użytkownika do kluczowych interakcji.
Primary-Dim
- Podstawowy-Przyciemniony
- On-Primary
Poziomy przyciemnione są zwykle używane w przypadku elementów, które muszą się wizualnie odróżniać od działania głównego, ale nie wymagają natychmiastowej uwagi ani interakcji użytkownika.
Primary-Container
- Primary-Container
- On-Primary-Container
Użyj koloru Primary Container w przypadku elementów tła, takich jak karty lub okna modalne, aby wyróżnić sekcje lub wybrane stany. Pomaga to zwracać uwagę na ważne treści lub bieżące działania w interfejsie.
Role dodatkowe
Role dodatkowe są używane w przypadku kluczowych komponentów interfejsu, które nie są tak ważne jak rola podstawowa, ale nadal muszą się wyróżniać. Kolory podstawowy i dodatkowy można stosować razem w układach, aby tworzyć zróżnicowanie i skupiać uwagę.
Dodatkowy
- Drugorzędny
- Na ekranie dodatkowym
Używaj roli dodatkowej w przypadku działań pomocniczych w obszarach z gęstym interfejsem, np. przycisków dodatkowych lub działań uzupełniających. Zapewnia widoczność bez przytłaczania głównych elementów w skomplikowanych układach.
Secondary-Dim
- Secondary-Dim
- Drugorzędny
Rola Secondary-Dim zapewnia stonowany kontrast dla pasywnych elementów w obszarach o dużej gęstości. Uzupełnia on kolor dodatkowy, dodając subtelną głębię, dzięki czemu interfejs jest przejrzysty i ułatwia użytkownikom poruszanie się po nim.
Secondary-Container
- Secondary-Container
- On-Secondary-Container
Używaj komponentu Secondary-Container do porządkowania elementów dodatkowych w gęstych układach. Tworzy strukturę i podział, dzięki czemu treści dodatkowe są odróżnialne, ale nie dominują.
Role trzeciorzędne
Kolory dodatkowe są używane jako kontrastujące akcenty, które równoważą kolory podstawowe i dodatkowe lub przyciągają uwagę do elementu, takiego jak pole wprowadzania. Role trzeciorzędne mogą też wskazywać, kiedy treść ulega zmianie lub powinna się wyróżniać, np. gdy osiągnięto cel.
Trzecia ścieżka dźwiękowa
- Trzeciorzędny
- On-Tertiary
Rola trzeciorzędna służy do zwracania uwagi na kluczowe elementy. Role trzeciorzędne są szczególnie przydatne w przypadku komponentów, które muszą się wyróżniać, takich jak plakietki, naklejki czy elementy specjalnych działań.
Tertiary-Dim
- Tertiary-Dim
- Trzeciorzędny
Użyj roli Tertiary Dim w przypadku przycisków lub działań związanych z działaniami trzeciorzędnymi, które nie wymagają natychmiastowej uwagi.
Tertiary-Container
- Tertiary-Container
- On-Tertiary-Container
Używaj koloru Tertiary-Container w przypadku tła, które grupuje treści powiązane z kolorem dodatkowym, np. kolekcje odznak lub naklejek. Podkreśla elementy trzeciorzędne, zachowując równowagę i strukturę interfejsu.
Role semantyczne
Kolor czerwony jest używany do oznaczania krytycznych problemów, takich jak błędy, usunięcia i wszystko, co jest związane z sytuacjami awaryjnymi. Został on zaprojektowany tak, aby natychmiast zwracać uwagę na problemy lub ostrzeżenia, dzięki czemu użytkownicy mogą szybko zidentyfikować obszary, które wymagają korekty. Odcień koloru Error-Red powinien zachowywać wystarczający kontrast z tłem, aby spełniać standardy ułatwień dostępu. Dzięki temu będzie wyraźnie widoczny i odróżnialny od innych kolorów stanu, takich jak ostrzeżenia czy komunikaty o powodzeniu.
Błąd
- Błąd
- On-Error
Semantyczny, ale lekko zabarwiony na czerwono, co oznacza działania związane z usuwaniem, zamykaniem lub odrzucaniem, np. przesuwanie w celu wyświetlenia. Dodany jako alternatywa dla kontenera, która jest nieco mniej alarmująca i pilna niż kolor błędu.
Error-Dim
- Error-Dim
- On-Error
Czerwony o odcieniu tematycznym, który wskazuje błędy o wysokim priorytecie lub działania awaryjne, takie jak alerty bezpieczeństwa, nieudane nakładki okien dialogowych lub przyciski zatrzymania.
Error-Container
- Error-Container
- On-Error-Container
Mniej widoczny kolor kontenera w przypadku komponentów w stanie błędu. Może też wskazywać aktywny stan błędu, który jest mniej interaktywny niż stan wypełniony, np. aktywny przycisk lub karta udostępniania w sytuacji awaryjnej albo okno dialogowe nakładki z informacją o niepowodzeniu.
Kontenery powierzchniowe i wysokość
Kontenery powierzchniowe odgrywają kluczową rolę w określaniu głębi i wysokości w interfejsie, zapewniając strukturę i hierarchię za pomocą koloru, co pomaga odróżniać komponenty na podstawie ich znaczenia i interakcji.
Surface-Container-Low
- Surface-Container-Low
- Na powierzchni
- On-Surface-Variant
Idealny w przypadku rozszerzonego kontenera, który musi znajdować się pod kontenerem Surface-Container, np. rozszerzonej karty w powiadomieniu. Może być też używana w przypadku kart nieinteraktywnych, w których przypadku ograniczenie treści jest korzystne.
Surface-Container
- Surface-Container
- Na powierzchni
- On-Surface-Variant
Domyślny kolor kontenera większości elementów. Zapewnia neutralne, umiarkowane podniesienie, dzięki czemu nadaje się do ogólnych komponentów interfejsu.
Surface-Container-High
- Surface-Container-High
- Na powierzchni
- On-Surface-Variant
Idealny w przypadku komponentów o dużym znaczeniu, które muszą znajdować się na wierzchu lub w połączeniu z komponentem Surface-Container. Ten kolor pomaga skupić uwagę na najważniejszych obszarach interfejsu i określić ich hierarchię.