צבעים של תפקידים ואסימונים

ראשי

1. ראשי
2. במסגרת העיסוק העיקרי

משתמשים בתפקיד Primary לפעולות הכי חשובות בממשק המשתמש, כמו לחצנים ראשיים או קריאות לפעולה. הצבע הזה צריך להיות בולט וקל לזיהוי כדי להנחות את המשתמשים לאינטראקציות מרכזיות.

Primary-Dim

1. ראשי – עמום
2. במסגרת העיסוק העיקרי

תפקידים מוחלשים משמשים בדרך כלל לרכיבים שצריכים להיות שונים מבחינה חזותית מהפעולה הראשית, אבל לא דורשים תשומת לב או אינטראקציה מיידית מצד המשתמש.

Primary-Container

1. Primary-Container
2. On-Primary-Container

אפשר להשתמש ב-Primary Container לרכיבי רקע כמו כרטיסים או חלונות קופצים כדי להדגיש קטעים או מצבים נבחרים. היא עוזרת למשוך את תשומת הלב לתוכן חשוב או לפעילויות שמתבצעות בממשק המשתמש.

משני

1. משני
2. On-Secondary

משתמשים בתפקיד המשני כדי לתמוך בפעולות באזורים עם ממשק משתמש צפוף, כמו לחצנים משניים או פעולות משלימות. הוא שומר על הנראות בלי להסתיר רכיבים עיקריים בפריסות מורכבות.

Secondary-Dim

1. מאפיין משני
2. משני

התפקיד Secondary-Dim מציע ניגודיות מושתקת לאלמנטים פסיביים באזורים צפופים. הוא משלים את הצבע המשני ומוסיף עומק עדין, שומר על הממשק נקי ועוזר למשתמשים להתמצא בו.

Secondary-Container

1. Secondary-Container
2. On-Secondary-Container

כדאי להשתמש ב-Secondary-Container כדי לארגן רכיבים משניים בפריסות צפופות. הוא יוצר מבנה והפרדה, כדי להבטיח שיהיה אפשר להבחין בתוכן המשני אבל שהוא לא יהיה דומיננטי.

שלישוני

1. שלישי
2. On-Tertiary

התפקיד המשני משמש להדגשת רכיבים חשובים. תפקידים משניים יעילים במיוחד לרכיבים שצריכים לבלוט, כמו תגים, סטיקרים או אלמנטים מיוחדים של פעולות.

Tertiary-Dim

1. Tertiary-Dim
2. שלישי

משתמשים בתפקיד Tertiary Dim (משני מוחלש) עבור לחצנים או פעולות שקשורים לפעולות משניות, אבל לא דורשים מיקוד מיידי.

Tertiary-Container

1. Tertiary-Container
2. On-Tertiary-Container

משתמשים ב-Tertiary-Container לרקעים שמקבצים תוכן שקשור ל-Tertiary, כמו אוספים של תגים או סטיקרים. הוא מדגיש אלמנטים משניים תוך שמירה על איזון ומבנה בממשק המשתמש.

שגיאה

1. שגיאה
2. On-Error

אדום סמנטי, אבל עם גוון קל של נושא, שמציין פעולות של הסרה, מחיקה, סגירה או ביטול, כמו החלקה לחשיפה. נוספה כחלופה למאגר, עם רמת דחיפות ודאגה נמוכה יותר מאשר צבע השגיאה המעומעם.

Error-Dim

1. Error-Dim
2. On-Error

אדום סמנטי, אבל עם גוון קל של הנושא, שמציין שגיאות בעדיפות גבוהה או פעולות חירום, כמו התרעות בטיחות, שכבות-על של דיאלוג שנכשלו או לחצני עצירה.

Error-Container

1. Error-Container
2. On-Error-Container

צבע פחות בולט של מאגר, לרכיבים שמשתמשים במצב השגיאה. יכול להיות גם מצב שגיאה פעיל שמרגיש פחות אינטראקטיבי ממצב מלא, כמו לחצן או כרטיס פעילים לשיתוף מידע במקרה חירום, או תיבת דו-שיח של שכבת-על שנכשלה.

Surface-Container-Low

1. Surface-Container-Low
2. בפלטפורמה
3. On-Surface-Variant

מתאים מאוד למאגר מורחב שצריך להיות מתחת ל-Surface-Container, כמו כרטיס מורחב בהתראה. אפשר להשתמש בה גם בכרטיסים לא אינטראקטיביים, שבהם התוכן עדיין נהנה מהכללה.

Surface-Container

1. Surface-Container
2. בפלטפורמה
3. On-Surface-Variant

צבע ברירת המחדל של הקונטיינר עבור רוב האלמנטים. הוא מספק גובה ניטרלי ומתון, ולכן מתאים לרכיבי ממשק משתמש כלליים.

Surface-Container-High

1. Surface-Container-High
2. בפלטפורמה
3. On-Surface-Variant

מתאים במיוחד לרכיבים שצריך להדגיש ושצריכים להיות מעל Surface-Container או בשילוב איתו. הצבע הזה עוזר למקד את תשומת הלב בהיררכיה של אזורים חשובים בממשק המשתמש.