Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Materiał 3 Expressive na Wear OS tworzy hierarchię wizualną przez przypisywanie różnych wartości odcienia, chromatyczności i tonu do ról kolorów, skutecznie odróżniając wyraziste kolory akcentów od neutralnych kolorów powierzchni. Uwzględnienie przez system ról akcentu głównego, dodatkowego i dodatkowego nie tylko zwiększa możliwości wyrazu, ale też zapewnia większą kontrolę nad hierarchią wizualną dzięki możliwości wyboru różnych kolorów. Celowe użycie kolorów zapewnia spójność i spójność interfejsu Watch, nawet w przypadku motywów.
Przykłady różnych układów, komponentów i interfejsów w różnych motywach, które zachowują odpowiedni kontrast kolorów.
Łączenie i nakładanie kolorów
Aby zachować czytelność wizualną, stosuj kolory tylko w przypadku par tokenów kolorów. Nieprawidłowe łączenie kolorów może spowodować utratę kontrastu niezbędnego do zapewnienia ułatwień dostępu, zwłaszcza gdy kolory są dostosowywane za pomocą dynamicznego koloru.
prawidłowo łączyć i nakładać kolory;
Aby zapewnić odpowiednią jakość wizualizacji i dostępność, mapuj odpowiedni token na odpowiednią pozycję. Nieprawidłowe mapowanie kolorów może powodować niezamierzone efekty wizualne i utrudniać dostępność.
check_circle
Tak
Prawidłowo łączyć i umieszczać kolory, aby zapewnić odpowiednią jakość wizualizacji i dostępność.
W tym przykładzie przyciski (2)
na kolorze podstawowym na (1) kolorze podstawowym lub (4) na kolorze podstawowym w kontenerze (3) na kolorze podstawowym pozostają czytelne, gdy zmienia się poziom kontrastu.
Przyciski te mają ocenę AAA i współczynnik kontrastu co najmniej 7:1.
cancel
Nie
Nieprawidłowe mapowania kolorów mogą prowadzić do niezamierzonych wizualizacji i utrudniać dostępność.
W tym przykładzie przyciski z (2)
primary-container na (1) primary lub (4) primary-dim na
(3) primary-container stają się niewyraźne, ponieważ poziomy kontrastu się zmieniają i
nie spełniają minimalnego współczynnika kontrastu 7:1 dla normalnego tekstu. Te poziomy kontrastu dotyczą ról głównej, dodatkowej i trzeciorzędnej.
Zalecane pary kolorów
Podstawowy + wymiar podstawowy
Użyj parametru Primary (Główny) w przypadku działań głównych, a Parametr Primary-Dim (Główny-Wymiar) w przypadku elementów uzupełniających. Daje to wrażenie głębi, a jednocześnie sprawia, że działanie główne jest wyraźnie widoczne.
Primary-Dim + Tertiary
Użyj koloru Primary-Dim, aby wyróżnić ważne elementy, oraz koloru Tertiary, aby wyróżnić informacje zwrotne, takie jak reakcje na dotknięcie.
Główny i dodatkowy kontener
Użyj kontenera Secondary-Container, aby umieścić w nim mniej widoczne treści. Użyj kontenera Primary, aby wyróżnić kluczowe elementy i przyciągnąć uwagę użytkowników.
Podstawowy i podstawowy kontener
Użyj opcji Główne do działań głównych, a opcji Główne – kontener do działań dodatkowych lub uzupełniających. Daje to wrażenie głębi, a jednocześnie sprawia, że działanie podstawowe jest bardziej widoczne.
Primary-Dim + Tertiary-Dim
Użyj koloru Primary-Dim, aby wyróżnić ważne elementy, oraz koloru Tertiary-Dim, aby wyświetlić wyróżniające się informacje, np. o osiągnięciu celu.
Trzeciorzędny + podstawowy + kontener drugorzędny
Jeśli nie jest jasne, jakie jest główne działanie, użyj kombinacji działań trzeciorzędnych i głównych w przypadku działań głównych oraz działań dodatkowych w przypadku działań uzupełniających.
Dodatkowy + kontener główny
Użyj opcji Podstawowy-Ciemny i Dodatkowy, gdy chcesz wyświetlić 2 równie ważne opcje lub kontenery, ale zachować między nimi kontrast.
Podstawowy + trzeciorzędowy + kontener podstawowy
Jeśli nie wiadomo, co jest działaniem głównym, użyj kombinacji działań trzeciorzędnych i głównych w przypadku działań głównych oraz działań głównych w kontenerze w przypadku działań uzupełniających.
Podstawowy + wymiar trzeciorzędowy
Użyj parametru Główny do działań głównych, a Parametr główny do elementów uzupełniających. Daje to wrażenie głębi, a jednocześnie pomaga wyróżnić działanie podstawowe.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2025-07-27 UTC."],[],[],null,["# Apply color\n\nMaterial 3 Expressive for Wear OS establishes visual hierarchy by assigning\ndifferent hue, chroma, and tone values to its color roles, effectively\ndistinguishing bold accent colors from neutral surface colors. The system's\ninclusion of primary, secondary, and tertiary accent roles not only enhances\nexpressive possibilities but also offers more granular control over visual\nhierarchy through distinct color choices. This intentional use of color ensures\na consistent and cohesive feel within the Watch UI, even with theming.\nExample of different layouts, components and UIs in various themes, but\nstill maintaining adequate color contrast.\n\nPair and layer colors\n---------------------\n\nTo maintain visual accessibility, apply colors only in the intended pairs color\ntokens. Combining colors improperly may break contrast necessary for visual\naccessibility, particularly when colors are adjusted through dynamic color.\n\n### Pair and layer colors correctly\n\nIn order to ensure proper visuals and accessibility, make sure you are mapping\nthe correct token to its correct position. An improper color mapping can lead to\nunintended visuals and break accessibility. \ncheck_circle\n\n### Do\n\n**Pair and layer color roles correctly to ensure proper\nvisuals and accessibility.**\n\nIn this example, buttons with (2)\n**on-primary** on (1) **primary** or (4) **on-primary** -container\non (3) **primary-container** stay legible as the contrast level changes\nand have an AAA rating with a contrast ratio of 7:1 or more. \ncancel\n\n### Don't\n\n**Improper color mappings can lead to unintended visuals\nand break accessibility.**\n\nIn this example, buttons with (2)\n**primary-container** on (1) **primary** or (4) **primary-dim** on\n(3) **primary-container** become illegible as contrast levels shift and\ndon't follow the 7:1 contrast ratio minimum for normal text. These contrast\nlevels apply to primary, secondary and tertiary roles.\n\n### Recommended color pairings\n\n\n**Primary + Primary Dim**\n\nUse Primary for main actions, and Primary-Dim for complementary items. This\ncreates depth while ensuring the primary action stands out. \n\n**Primary-Dim + Tertiary**\n\nUse Primary-Dim to highlight important elements and Tertiary to provide standout\nfeedback, such as tap responses. \n\n**Primary + Secondary-Container**\n\nUse Secondary-Container for less prominent content, while Primary is applied to\nkey elements to ensure they stand out and grab attention.\n\n\u003cbr /\u003e\n\n\n**Primary + Primary-Container**\n\nUse Primary for main actions, and Primary-Container for complementary or\nsecondary items. This creates depth while ensuring the primary action stands\nout. \n\n**Primary-Dim + Tertiary-Dim**\n\nUse Primary-Dim to highlight important elements and Tertiary-Dim to provide\nstandout feedback, such as a goal being met. \n\n**Tertiary + Primary + Secondary-Container**\n\nWhen it's not clear what the main action is, use a combination of Tertiary and\nPrimary for a main actions and Secondary-Container for a complementary actions.\n\n\u003cbr /\u003e\n\n\n**Secondary + Primary-Container**\n\nUse Primary-Dim and Secondary when you want to show two equally as important\noptions or containers, but still have contrast between the two. \n\n**Primary + Tertiary + Primary-Container**\n\nWhen it's not clear what the main action is, use a combination of Tertiary and\nPrimary for a main actions and Primary-Container for a complementary actions. \n\n**Primary + Tertiary-Dim**\n\nUse Primary for main actions and Primary Dim for complementary items. This\ncreates depth while helping the primary action to stand out.\n\n\u003cbr /\u003e"]]
