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

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

ראשי

1. ראשי
2. On-Primary

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

Primary-Dim

1. Primary-Dim
2. On-Primary

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

Primary-Container

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

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

משני

1. Secondary
2. On-Secondary

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

Secondary-Dim

1. Secondary-Dim
2. Secondary

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

Secondary-Container

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

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

שלישי

1. Tertiary
2. On-Tertiary

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

Tertiary-Dim

1. Tertiary-Dim
2. Tertiary

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

Tertiary-Container

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

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

שגיאה

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 או בשילוב איתו. הצבע הזה עוזר להדגיש ולסדר לפי היררכיה אזורים קריטיים בממשק המשתמש.