קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
מערכת הצבעים של Wear Material 3 Expressive כוללת שלושה שכבות של צבעים מודגשים (ראשי, משני ושלישי) לרכיבים מרכזיים ושני שכבות של צבעים ניטרליים לשטחים. כל תפקיד מציע מגוון ערכים עם ניגודיות עקבית, שמאפשרים שילובי צבעים דרמטיים אך נגישים, וחוויה אחידה בכל נושא.
דוגמה לערכת צבעים עם תפקידים.
מהם תפקידים בצבע?
תפקידים של צבעים הם כמו 'המספרים' בבד לצביעה לפי מספרים. הם הרקמה המחברת בין רכיבי ממשק המשתמש לבין הצבעים שצריך להשתמש בהם.
הקצאת תפקידים לצבעים לרכיבי Material: תוכלו להשתמש בתפקידי הצבעים האלה גם אם אתם משתמשים בערכת ברירת המחדל הסטטית וגם אם אתם משתמשים בצבעים דינמיים. אם המוצר מכיל רכיבים בהתאמה אישית, צריך למפות אותם בצורה נכונה לקבוצת התפקידים הזו לפי צבעים.
תפקידים של צבעים תומכים בנגישות: מערכת הצבעים מבוססת על שילובי צבעים נגישים יותר. זוגות הצבעים האלה מספקים יחס ניגודיות מינימלי של 3:1.
הצבעים של התפקידים מומרים לאסימונים: התפקידים מוטמעים בתכנון ובקוד באמצעות אסימונים. אסימון עיצוב מייצג החלטה עיצובית קטנה שאפשר לעשות בה שימוש חוזר, והיא חלק מהסגנון החזותי של מערכת העיצוב.
מונחים חיוניים
אלה מונחים מרכזיים שיופיעו בשמות של תפקידים צבעוניים:
פני השטח: תפקיד שמשתמשים בו לרקעים ולאזורים גדולים במסך עם דגש נמוך.
צבע ראשי, צבע משני, צבע שלישי: תפקידים של צבע משני המשמשים להדגשת אלמנטים בחזית או להפחתת הדגשת אלמנטים בחזית.
מאגר: תפקידים המשמשים כצבע מילוי לרכיבים בחזית, כמו לחצנים. אין להשתמש בהם לטקסט או לסמלים.
מופעל: תפקידים שמתחילים במונח הזה מציינים צבע לטקסט או לסמלים מעל הצבע של ההורה המשויך. לדוגמה, האפשרות 'על צבע ראשי' משמשת לטקסט ולסמלים על צבע המילוי הראשי.
וריאנט: תפקידים שמסתיימים במונח הזה הם חלופה פחות בולטת לזוג התפקידים שאין לו סיומת 'וריאנט'. לדוגמה, וריאנט של קו מתאר הוא גרסה פחות בולטת של צבע הקו המתאר.
תפקידים ראשיים
התפקידים הראשיים משמשים לרכיבים מרכזיים בממשק המשתמש, כמו לחצני Edge Hugging, לחצנים בולטים, מצבים פעילים וסמלים בסגנונות הלחצנים הטונליים.
ראשי
ראשי
On-Primary
כדאי להשתמש בתפקיד 'ראשי' לפעולות החשובות ביותר בממשק המשתמש, כמו לחצנים ראשיים או קריאות לפעולה. הצבע הזה צריך לבלוט ולהיות מזוהה באופן מיידי כדי להנחות את המשתמש לאינטראקציות מרכזיות.
Primary-Dim
Primary-Dim
On-Primary
בדרך כלל משתמשים בתפקידים עם האפלה כדי להבדיל חזותית בין רכיבים לבין הפעולה הראשית, אבל לא דורשים תשומת לב מיידית או אינטראקציה מיידית מצד המשתמש.
Primary-Container
Primary-Container
On-Primary-Container
אפשר להשתמש ב-Primary Container לרכיבי רקע כמו כרטיסים או חלונות מודולריים כדי להדגיש קטעים או מצבים נבחרים. הוא עוזר למשוך תשומת לב לתוכן חשוב או לפעילויות מתמשכות בממשק המשתמש.
תפקידים משניים
תפקידים משניים משמשים לרכיבים מרכזיים בממשק המשתמש, שהם לא חשובים כמו התפקיד הראשי, אבל עדיין צריכים לבלוט. אפשר להשתמש בצבעים ראשיים ומשניים יחד בפריסות כדי ליצור הבחנה ומיקוד.
משני
Secondary
On-Secondary
משתמשים בתפקיד משני כדי לתמוך בפעולות באזורים עם ממשק משתמש צפוף, כמו לחצנים משניים או פעולות משלימות. הוא שומר על החשיפה בלי להסתיר רכיבים ראשיים בפריסות מורכבות.
Secondary-Dim
Secondary-Dim
Secondary
התפקיד Secondary-Dim מציע ניגודיות מושכת פחות לאלמנטים פסיביים באזורים צפופים. הוא משלים את הצבע המשני ומוסיף עומק עדין, כך שאפשר לשמור על ממשק משתמש נקי ולעזור למשתמשים לנווט.
Secondary-Container
Secondary-Container
On-Secondary-Container
אפשר להשתמש ב-Secondary-Container כדי לארגן רכיבים משניים בפריסות צפופות. הוא יוצר מבנה והפרדה, ומבטיח שהתוכן המשני יהיה ברור אבל לא דומיננטי.
תפקידים שלישיים
תפקידים שלישיים משמשים ליצירת ניגודיות כדי לאזן בין צבעים ראשיים לצבעים משניים, או כדי למשוך תשומת לב רבה יותר לרכיב מסוים, כמו שדה קלט.
תפקידים משניים יכולים גם לעזור לציין מתי התוכן משתנה או צריך לבלוט, למשל כשמגיעים ליעד.
שלישי
Tertiary
On-Tertiary
התפקיד המשני משמש כדי למשוך תשומת לב לרכיבים עיקריים. תפקידים משניים יעילים במיוחד לרכיבים שצריכים לבלוט, כמו תגים, סטיקרים או רכיבי פעולה מיוחדים.
Tertiary-Dim
Tertiary-Dim
Tertiary
כדאי להשתמש בתפקיד 'הכהיה שלישית' עבור לחצנים או פעולות שקשורים לפעולות שלישניות, אבל לא דורשים מיקוד מיידי.
Tertiary-Container
Tertiary-Container
On-Tertiary-Container
כדאי להשתמש ב-Tertiary-Container לרקעים שמקבצים תוכן שקשור לשלישי, כמו אוספים של תגים או סטיקרים. הוא מדגיש אלמנטים שלישיים תוך שמירה על איזון ומבנה בממשק המשתמש.
תפקידים סמנטיים
'שגיאה-אדום' משמש לציון בעיות קריטיות כמו שגיאה, מחיקה וכל דבר שקשור למצב חירום. הוא נועד למשוך תשומת לב מיידית לבעיות או לאזהרות, כדי שהמשתמשים יוכלו לזהות במהירות אזורים שצריך לבצע בהם פעולות תיקון.
הטון של 'אדום שגיאה' צריך לשמור על ניגודיות מספקת לעומת הרקעים כדי לעמוד בתקני הנגישות, וכדי לוודא שהוא גלוי בבירור ואפשר להבדיל אותו מצבעי סטטוס אחרים, כמו אזהרות או הודעות הצלחה.
שגיאה
שגיאה
On-Error
אדום סמנטי, אבל עם גוון קל של העיצוב, שמציין פעולות של הסרה, מחיקה, סגירה או דחייה, כמו החלקה כדי לחשוף. נוספה כחלופה לקונטיינר, עם צבע פחות מדאיג ודחוף מאשר הצבע העמום של השגיאה.
Error-Dim
Error-Dim
On-Error
אדום סמנטי, אבל עם גוון קל של העיצוב, שמציין שגיאות בעדיפות גבוהה או פעולות חירום, כמו התרעות בטיחות, שכבות-על של תיבת דו-שיח שנכשלו או לחצני עצירה.
Error-Container
Error-Container
On-Error-Container
צבע מאגר פחות בולט, לרכיבים שמשתמשים במצב שגיאה. יכול גם להצביע על מצב שגיאה פעיל שנראה פחות אינטראקטיבי ממצב מלא, כמו לחצן או כרטיס שיתוף חירום פעילים, או בתיבת דו-שיח שכבר לא מוצגת.
מאגרי מידע ומיקום של פני השטח
מאגרי שטח הם כלי חשוב להגדרת עומק והגבהה בממשק המשתמש. הם מספקים מבנה והיררכיה באמצעות צבע, ומאפשרים להבדיל בין רכיבים על סמך החשיבות והאינטראקציה שלהם.
Surface-Container-Low
Surface-Container-Low
על המשטח
On-Surface-Variant
מתאים מאוד למאגר מורחב שצריך להיות מתחת ל-Surface-Container, כמו כרטיס מורחב בהתראה. אפשר להשתמש בה גם בכרטיסים לא אינטראקטיביים, שבהם התוכן עדיין נהנה מהיתרונות של הכלי.
Surface-Container
Surface-Container
על המשטח
On-Surface-Variant
צבע ברירת המחדל של הקונטיינר לרוב הרכיבים. הוא מספק גובה ניטרלי וממוצע, ולכן מתאים לרכיבים כלליים של ממשק המשתמש.
Surface-Container-High
Surface-Container-High
על המשטח
On-Surface-Variant
אידיאלי לרכיבים בעלי דגש גבוה שצריכים להיות מעל Surface-Container או בשילוב איתו. הצבע הזה עוזר להדגיש ולסדר לפי היררכיה אזורים קריטיים בממשק המשתמש.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. 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,["# Color roles and tokens\n\nThe Wear Material 3 Expressive color system employs three accent layers\n(primary, secondary, tertiary) for key components and two neutral surface\nlayers. Each role offers a range of values with consistent contrast, enabling\nexpressive yet accessible color combinations for a unified experience across any\ntheme.\nAn example of a color theme with roles.\n\nWhat are color roles?\n---------------------\n\nColor roles are like the \"numbers\" in a paint-by-number canvas. They're the\nconnective tissue between elements of the UI and what color goes where.\n\n- **Color roles are mapped to Material components:** You'll use these color roles whether you're using the static baseline scheme or dynamic color. If your product contains custom components, they'll need to be properly mapped to this set of color roles.\n- **Color roles support accessibility:** The color system is built on more accessible color pairings. These color pairs provide a minimum of 3:1 color contrast.\n- **Color roles are tokenized:** Roles are implemented in design and code through tokens. A design token represents a small, reusable design decision that's part of a design system's visual style.\n\nEssential terms\n---------------\n\nHere are key terms you'll see in the names of color roles:\n\n- **Surface:** A role used for backgrounds and large, low-emphasis areas of the screen.\n- **Primary, Secondary, Tertiary:** Accent color roles used to emphasize or de-emphasize foreground elements.\n- **Container:** Roles used as a fill color for foreground elements like buttons. They shouldn't be used for text or icons.\n- **On:** Roles starting with this term indicate a color for text or icons on top of its paired parent color. For example, on primary is used for text and icons against the primary fill color.\n- **Variant:** Roles ending with this term offer a lower-emphasis alternative to its non-variant pair. For example, outline variant is a less emphasized version of the outline color.\n\nPrimary roles\n-------------\n\n\nPrimary roles are used for key components across the UI, such as the Edge\nHugging buttons, prominent buttons, active states, and icons on the tonal button\nstyles. \n\n\u003cbr /\u003e\n\n\n**Primary**\n\n1. Primary\n2. On-Primary\n\nUse the Primary role for the most important actions in the UI, like primary\nbuttons or calls to action. This color should stand out and be instantly\nrecognizable to guide the user toward key interactions. \n\n**Primary-Dim**\n\n1. Primary-Dim\n2. On-Primary\n\nDim roles are typically used for elements that need to be visually distinct from\nthe primary action but don't require immediate user attention or interaction. \n\n**Primary-Container**\n\n1. Primary-Container\n2. On-Primary-Container\n\nApply Primary Container for background elements like cards or modals to\nhighlight sections or selected states. It helps draw attention to important\ncontent or ongoing activities within the UI.\n\n\u003cbr /\u003e\n\nSecondary roles\n---------------\n\n\nSecondary roles are used for key components across the UI, which are not as\nimportant as the primary role, but still need to stand out. Primary and\nsecondary can be used together in layouts to create differentiation and focus. \n\n\u003cbr /\u003e\n\n\n**Secondary**\n\n1. Secondary\n2. On-Secondary\n\nUse the Secondary role for supporting actions in areas with dense UI, such as\nsecondary buttons or complementary actions. It maintains visibility without\novershadowing primary elements in complex layouts. \n\n**Secondary-Dim**\n\n1. Secondary-Dim\n2. Secondary\n\nThe Secondary-Dim role offers a muted contrast for passive elements in dense\nareas. It complements the secondary color while adding subtle depth, keeping the\nUI clean and helping users navigate. \n\n**Secondary-Container**\n\n1. Secondary-Container\n2. On-Secondary-Container\n\nApply Secondary-Container for organizing secondary elements in dense layouts. It\ncreates structure and separation, ensuring secondary content is distinguishable\nbut not dominant.\n\n\u003cbr /\u003e\n\nTertiary roles\n--------------\n\n\nTertiary roles are used for contrasting accents to balance primary and secondary\ncolors or bring heightened attention to an element such as an input field.\nTertiary roles can also help indicate when content changes or should stand out,\nsuch as a goal being reached. \n\n\u003cbr /\u003e\n\n\n**Tertiary**\n\n1. Tertiary\n2. On-Tertiary\n\nThe Tertiary role is used for drawing attention to key elements. Tertiary roles\nare particularly effective for components that need to stand out, such as\nbadges, stickers, or special action elements. \n\n**Tertiary-Dim**\n\n1. Tertiary-Dim\n2. Tertiary\n\nUse the Tertiary Dim role for buttons or actions that are related to tertiary\nactions yet don't require immediate focus. \n\n**Tertiary-Container**\n\n1. Tertiary-Container\n2. On-Tertiary-Container\n\nApply Tertiary-Container for backgrounds that group tertiary-related content,\nlike collections of badges or stickers. It emphasizes tertiary elements while\nmaintaining balance and structure in the UI.\n\n\u003cbr /\u003e\n\nSemantic roles\n--------------\n\n\nError-Red is used to indicate critical issues as error, delete, and anything\nrelated to emergency. It is designed to draw immediate attention to problems or\nwarnings, ensuring users can quickly identify areas that need corrective action.\nThe tone of Error-Red should maintain sufficient contrast against backgrounds to\nmeet accessibility standards, ensuring it is clearly visible and is\ndistinguishable from other status colors like warnings or success messages. \n\n\u003cbr /\u003e\n\n\n**Error**\n\n1. Error\n2. On-Error\n\nA semantic, yet slightly theme-tinted red, which indicates remove, delete, close\nor dismiss actions, such as Swipe to Reveal. Added as a container alternative\nthat is slightly less alarming and urgent than the error-dim color. \n\n**Error-Dim**\n\n1. Error-Dim\n2. On-Error\n\nA semantic, yet slightly theme-tinted red, which indicates high priority errors\nor emergency actions, such as safety alerts, failed dialog overlays or stop\nbuttons. \n\n**Error-Container**\n\n1. Error-Container\n2. On-Error-Container\n\nLess prominent container color, for components using the error state. Can also\nindicate an active error state which feels less interactive than a filled state,\nsuch as an active emergency sharing button or card, or on a failed overlay\ndialog.\n\n\u003cbr /\u003e\n\nSurface containers and elevation\n--------------------------------\n\n\nSurface containers are key in defining depth and elevation within the UI,\nproviding structure and hierarchy through color, helping to differentiate\ncomponents based on their importance and interaction. \n\n\u003cbr /\u003e\n\n\n**Surface-Container-Low**\n\n1. Surface-Container-Low\n2. On-Surface\n3. On-Surface-Variant\n\nGreat for an expanded container that needs to sit below Surface-Container, such\nas an expanded card in the Notification. Can also be used for non-interactive\ncards, where content still benefits from containment. \n\n**Surface-Container**\n\n1. Surface-Container\n2. On-Surface\n3. On-Surface-Variant\n\nThe default container color for most elements. It provides a neutral, moderate\nelevation, making it suitable for general UI components. \n\n**Surface-Container-High**\n\n1. Surface-Container-High\n2. On-Surface\n3. On-Surface-Variant\n\nIdeal for high-emphasis components that need to sit on top of, or in combination\nwith Surface-Container. This color helps bring focus and hierarchy to critical\nareas in the UI.\n\n\u003cbr /\u003e"]]
