קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
ב-Material 3 Expressive ל-Wear OS, ההיררכיה החזותית נוצרת על ידי הקצאת ערכים שונים של גוון, צבע וטון לתפקידים השונים של הצבעים, וכך אפשר להבדיל ביעילות בין צבעים מודגשים בולטים לבין צבעים ניטרליים של משטחים. המערכת כוללת תפקידים של צבעים עיקריים, משניים ושלישיים, שמאפשרים לכם לא רק לשפר את האפשרויות של הביטוי העצמי, אלא גם לשלוט בצורה פרטנית יותר בהיררכיה החזותית באמצעות אפשרויות צבע ייחודיות. השימוש המכוון בצבעים מבטיח מראה עקבי ועשיר בממשק המשתמש של השעון, גם כשמשתמשים בנושאים.
דוגמה לפריסות, לרכיבים ולממשקי משתמש שונים בנושאים שונים, אבל עם ניגודיות צבעים מספקת.
שילוב צבעים והוספת שכבות
כדי לשמור על נגישות חזותית, כדאי להשתמש בצבעים רק באסימוני הצבע של הזוגות המיועדים. שילוב לא נכון של צבעים עלול לפגוע בניגודיות הנדרשת לנגישות חזותית, במיוחד כשהצבעים מותאמים באמצעות צבע דינמי.
שילוב צבעים ויצירת שכבות בצורה נכונה
כדי להבטיח גישה נוחה ותצוגה חזותית תקינה, חשוב לוודא שממפים את האסימון הנכון למיקום הנכון. מיפוי צבע לא תקין עלול להוביל לתמונות חזותיות לא רצויות ולפגוע בנגישות.
check_circle
מה צריך לעשות
התאמה נכונה של תפקידים של צבעים בשכבות כדי להבטיח רכיבים חזותיים ונגישות תקינים.
בדוגמה הזו, לחצנים עם (2)
on-primary ב-(1) primary או (4) on-primary-container
ב-(3) primary-container נותרים קריאים כשרמת הניגודיות משתנה,
ומקבלים דירוג AAA עם יחס ניגודיות של 7:1 או יותר.
cancel
מה אסור לעשות
מיפויים לא נכונים של צבעים עלולים להוביל ליצירת רכיבים חזותיים לא מתוכננים ולפגוע בנגישות.
בדוגמה הזו, לחצנים עם (2)
primary-container ב-(1) primary או (4) primary-dim ב-(3) primary-container הופכים לבלתי קריאים כי רמות הניגודיות משתנות ולא עומדות ביחס הניגודיות המינימלי של 7:1 לטקסט רגיל. רמות הניגוד האלה חלות על תפקידים ראשיים, משניים ושלישוניים.
שילובי צבעים מומלצים
Primary + Primary Dim
משתמשים ב-Primary לפעולות הראשיות וב-Primary-Dim לפריטים משלימים. כך יוצרים עומק תוך שמירה על בולטות של הפעולה הראשית.
Primary-Dim + Tertiary
משתמשים ב-Primary-Dim כדי להדגיש רכיבים חשובים, וב-Tertiary כדי לספק משוב בולט, כמו תגובות להקשות.
Primary + Secondary-Container
כדאי להשתמש ב-Secondary-Container לתוכן פחות בולט, ואילו ב-Primary לרכיבים מרכזיים כדי לוודא שהם בולטים ומושכים תשומת לב.
Primary + Primary-Container
משתמשים ב-Primary לפעולות הראשיות, וב-Primary-Container לפריטים משניים או משלימים. כך יוצרים עומק תוך שמירה על בולטות של הפעולה הראשית.
Primary-Dim + Tertiary-Dim
משתמשים במאפיין Primary-Dim כדי להדגיש רכיבים חשובים, ובמאפיין Tertiary-Dim כדי לספק משוב בולט, כמו עמידה ביעד.
קונטיינר שלישי + קונטיינר ראשי + קונטיינר משני
כשלא ברור מהי הפעולה הראשית, צריך להשתמש בשילוב של 'שלישי' ו'ראשי' לפעולות ראשיות, וב'משני-מאגר' לפעולות משלימות.
Secondary + Primary-Container
משתמשים ב-Primary-Dim וב-Secondary כשרוצים להציג שתי אפשרויות או שני מאגרים שחשובים באותה מידה, אבל עדיין יש ביניהם ניגודיות.
Primary + Tertiary + Primary-Container
כשלא ברור מהי הפעולה הראשית, צריך להשתמש בשילוב של 'שלישי' ו'ראשי' לפעולות ראשיות, וב'ראשי-מאגר' לפעולות משלימות.
Primary + Tertiary-Dim
משתמשים באפשרות 'ראשי' לפעולות הראשיות ובאפשרות 'מאפיין ראשי' לפריטים משלימים. כך תוכלו ליצור עומק ולעזור לפעולה הראשית לבלוט.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-27 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 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"]]
