הכפתורים הם האינדיקטור החזותי העיקרי לפעולות של המשתמש.
עקרונות
מכוונת לפעולה: הכפתורים צריכים להבהיר שהם מפעילים פעולה.
משוב ברור: המראה של הלחצן צריך להשתנות באופן ברור במצבי אינטראקציה שונים (ריחוף, לחיצה, מיקוד) כדי לספק משוב מיידי.
עקביות: כל הלחצנים צריכים להיות בעלי שפה ויזואלית משותפת כדי שיהיה קל לזהות אותם.
גמישות: רכיב הלחצן צריך להתאים לווריאציות נפוצות, כמו הוספת סמלים וגדלים שונים, בלי לפגוע בעקביות.
שימוש ומיקום
כדאי למקם את הכפתור קרוב לתוכן הרלוונטי. אפשר למקם אותם לבד או עם רכיבים אחרים, כמו כרטיסים ורשימות.
מה מומלץ לעשות
מה אסור לעשות
מה מומלץ לעשות
מה אסור לעשות
כפתורים עם סמלים
כדי להפחית את צפיפות התוכן, אפשר להשתמש בלחצני סמלים. מומלץ להשתמש בלחצני סמלים כשהסמל ממחיש בבירור פעולה, אחרת כדאי לכלול תווית לחצן.
מה מומלץ לעשות
מה אסור לעשות
Toggable
לפעולות עם מצבים בוליאניים, כמו סימון כמועדף, יש גרסת החלפה לכל סוג לחצן. החלפת הסמלים בין מצבי המתג מאפשרת לראות את האינטראקציה במבט חטוף ולהגיב אליה.
מה מומלץ לעשות
מה אסור לעשות
אנטומיה
לחצנים מורכבים מתווית ומסמל אופציונלי שמופיע לפני או אחרי התווית.
לחצני סמלים מורכבים רק מסמל שקל לזיהוי.
לשניהם יש וריאנט שאפשר להפעיל או להשבית.
ברירת מחדל
1. מנוחה
2. במיקוד
3. הלחיצה
4. מושבתת
5. השבתה והתמקדות
גדול
1. מנוחה
2. במיקוד
3. הלחיצה
4. מושבתת
5. השבתה והתמקדות
סמל
1. מנוחה
2. במיקוד
3. הלחיצה
4. מושבתת
5. השבתה והתמקדות
סמל
1. מנוחה
2. במיקוד
3. הלחיצה
4. מושבתת
5. השבתה והתמקדות
התאמה אישית
הלחצנים מכילים סגנון ברירת מחדל וסגנון גדול. גודל גדול יכול לעזור להדגיש את החשיבות.
אפשר להשתמש בסמלים כדי להדגיש את הכפתור, להבהיר אותו ולזהות אותו בקלות רבה יותר. הסמלים יכולים להיות במיקום מוביל או נגרר.
ברירת מחדל
| מאפיינים | התאמה אישית | ברירות מחדל |
|---|---|---|
| צורה | כן | גדול, עיגול |
| מרווח פנימי | כן | 16 dp, 8 dp |
| ממתקים | כן | ברירת מחדל, 2dp, #606460 |
| טקסט | כן | גוף קטן |
| סמל מוביל | כן | 32 dp |
| סמל בסוף | כן | 32 dp |
| גודל | כן | גובה מינימלי של 48 dp |
| עומק | כן | 0 |
| Gap | כן | בין התווית לסמל: קטן במיוחד |
גדול
| מאפיינים | התאמה אישית | ברירות מחדל |
|---|---|---|
| צורה | כן | גדול, עיגול |
| מרווח פנימי | כן | 16 dp, 16 dp |
| ממתקים | כן | 2 dp, #606460 |
| טקסט | כן | גוף קטן |
| סמל מוביל | כן | 32 dp |
| סמל בסוף | כן | 32 dp |
| גודל | כן | גובה מינימלי של 72 נקודות לאינץ' |
| עומק | כן | 0 |
| Gap | כן | בין התווית לסמל: קטן במיוחד |
סמל
| מאפיינים | התאמה אישית | ברירות מחדל |
|---|---|---|
| צורה | כן | גדול, עיגול |
| מרווח פנימי | כן | קטן, קטן |
| ממתקים | כן | ברירת מחדל |
| סמל | כן | ברירת מחדל = 32dp, On Surface |
| גודל | כן | גובה מינימלי של 48 dp |
| עומק | כן | 0 |
Toggable
| מאפיינים | התאמה אישית | ברירות מחדל |
|---|---|---|
| נבחר | כן | בוליאני |
| פינות ברירת מחדל | כן | 16 dp, 8 dp |
| הפינות שנבחרו | כן | פוקוס ברירת מחדל |
| הצבע שנבחר של הפלטפורמה | כן | קווי מתאר |
| כל שאר הנכסים | כן | זהה לכפתורים |
סמל שאפשר להפעיל או להשבית
| מאפיינים | התאמה אישית | ברירות מחדל |
|---|---|---|
| נבחר | כן | בוליאני |
| פינות ברירת מחדל | כן | 100 dp |
| הפינות שנבחרו | כן | 20dp |
| הצבע שנבחר של הפלטפורמה | כן | קווי מתאר |
| כל שאר הנכסים | כן | זהה לכפתורים |