הכפתורים הם האינדיקטור החזותי העיקרי לפעולות של המשתמש.
עקרונות
מכוונת לפעולה: הכפתורים צריכים להבהיר שהם מפעילים פעולה.
משוב ברור: המראה של הלחצן צריך להשתנות באופן ברור במצבי אינטראקציה שונים (ריחוף, לחיצה, מיקוד) כדי לספק משוב מיידי.
עקביות: כל הלחצנים צריכים להיות בעלי שפה ויזואלית משותפת כדי שיהיה קל לזהות אותם.
גמישות: רכיב הלחצן צריך להתאים לווריאציות נפוצות, כמו הוספת סמלים וגדלים שונים, בלי לפגוע בעקביות.
שימוש ומיקום
כדאי למקם את הכפתור קרוב לתוכן הרלוונטי. אפשר למקם אותם לבד או עם רכיבים אחרים, כמו כרטיסים ורשימות.
מה מומלץ לעשות
מה אסור לעשות
מה מומלץ לעשות
מה אסור לעשות
אנטומיה
ברירת מחדל
1. מופעלת: מצב ברירת המחדל.
2. מעבירים את העכבר מעל
3. ללחוץ עליהם
גדול
1. מופעלת: מצב ברירת המחדל.
2. מעבירים את העכבר מעל
3. ללחוץ עליהם
התאמה אישית
הכפתורים מכילים וריאציה גדולה ווריאציית ברירת מחדל, וגם מצבי ברירת מחדל, מצב מודגש ומצב לחיצה לכל אחת מהן. אפשר להשתמש בסמלים כדי להדגיש את הכפתור, להבהיר אותו ולעזור למשתמשים לזהות אותו. גודל הכפתור יכול לעזור להדגיש את החשיבות.
ברירת מחדל
| מאפיינים | התאמה אישית | ברירות מחדל |
|---|---|---|
| צורה | כן | גדול, עיגול |
| מרווח פנימי | כן | 16 dp, 8 dp |
| ממתקים | כן | 2 dp, #606460 |
| טקסט | כן | גוף קטן |
| סמל מוביל | כן | 40 dp |
| סמל בסוף | כן | 40 dp |
| גודל | כן | גובה מינימלי של 56dp |
| עומק | כן | 0 |
גדול
| מאפיינים | התאמה אישית | ברירות מחדל |
|---|---|---|
| צורה | כן | גדול, עיגול |
| מרווח פנימי | כן | 20 dp, 8 dp |
| ממתקים | כן | 2 dp, #606460 |
| טקסט | כן | גוף קטן |
| סמל מוביל | כן | 56dp |
| סמל בסוף | כן | 56dp |
| גודל | כן | גובה מינימלי של 72 נקודות לאינץ' |
| עומק | כן | 0 |
| פני השטח | לא |