לחצנים

לחצנים עוזרים למשתמשים ליזום פעולות או זרימה. אפשר לבחור מבין האפשרויות השונות של לחצנים שונים ליצירת הדגשה.

משאבים

סוג	קישור	סטטוס
עיצוב	עיצוב של מקור (Figma)	יש גישה
הטמעה	Jetpack פיתוח נייטיב	יש גישה

המיטב

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

וריאנטים

קיימים שישה סוגי לחצנים:

1. לחצן מלא
2. לחצן מתאר
3. לחצן הסמל
4. הלחצן של סמל המתאר
5. לחצן ארוך
6. לחצן התמונה

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

לחצן מלא וקווי מתאר

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

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

אנטומיה

1. מאגר
2. טקסט תווית
3. סמל (אופציונלי)

מדינות

ייצוג חזותי של סטטוס הרכיב.

1. ברירת מחדל
2. ממוקד
3. לחוץ

מפרט

לחצן של סמל ומתווה

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

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

אנטומיה

1. מאגר
2. סמל

מדינות

1. ברירת מחדל
2. ממוקד
3. לחוץ

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

המפרט

לחצן רחב

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

אנטומיה

1. מאגר
2. סמל מוביל
3. כותרת
4. כותרת משנה

מדינות

1. ברירת מחדל
2. ממוקד
3. לחוץ

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

על המוצר

לחצן התמונה

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

אנטומיה

1. מאגר
2. סמל מוביל
3. כותרת
4. כותרת משנה
5. שכבת תמונה, המורכבת מ:
   1. Scrim (שכבת-על של מצב)
   2. הדרגתי (על סמך צבע פני השטח)
   3. תמונה

מדינות

1. ברירת מחדל
2. ממוקד
3. לחוץ

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

המפרט

שימוש

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

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

1. מאגר
2. סמל
3. טקסט תווית
4. כותרת
5. כותרת משנה
6. תמונה

מאגר

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

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

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

סמל

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

טקסט תווית

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

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

תמונה

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

קבוצות לחצנים

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

מידע על היררכיה

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

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

שמירה על פריסה לינארית

1. פריסת שורות
2. פריסת עמודות

השתמשו בווריאנטים באופן לוגי

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