הנחיות לגבי עיצוב ההגדרות ב-Android

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

עקרונות התכנון והעיצוב

איך לספק סקירה כללית טובה

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

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

ארגון פריטים באופן אינטואיטיבי

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

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

למצוא את ההגדרות בקלות

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

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

איורים 3 ו-4. 'צליל ברירת מחדל להתראות' מופיע במסך 'התראה' ו'צליל'

יש להשתמש בשם ובסטטוס ברורים

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

בשמות מבצעים צריך:

  • צריך להזין קודם את הטקסט החשוב ביותר של התווית.
  • נסחו מחדש מילים שליליות כמו "dont" או "לעולם לא" למונחים ניטרליים כמו "block".
  • מומלץ להשתמש בתוויות לא אישיות כמו 'התראות' במקום 'אני רוצה לקבל התראה'. חריג: אם ההפניה למשתמש נחוצה להבנת ההגדרה, עדיף להשתמש באדם השני ("את/ה") ולא באדם הראשון ("אני").

בשמות מבצעים צריך להימנע:

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

סוגי דפים

רשימת ההגדרות

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

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

איור 5. דוגמה לרשימת ההגדרות

תצוגת רשימה

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

איור 6. דוגמה לתצוגת רשימה

מסך ישות

מסך הישות משמש להצגת הגדרות של פריט ייחודי כמו אפליקציה, חשבון, מכשיר, רשת Wi-Fi וכו'.

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

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

איור 8. דוגמה למסך ישות שנעשה בו שימוש באחסון

הגדרה ראשית

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

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

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

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

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

מסך בחירת לחצן בחירה

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

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

איור 11. אין להשתמש בלחצני בחירה ברשימת ההגדרות

איור 12. כך תשתמשו בלחצני הבחירה בצורה נכונה בהגדרות

רכיבים

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

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

איור 13. סרגל כלים עם פעולות חיפוש ועזרה

בסרגלי כלים עם פעולה אחת: הצגת הפעולה לפני החיפוש.

איור 14. סרגל הכלים עם פעולה אחת לפני פעולות החיפוש והעזרה

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

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

איור 15. סרגל כלים עם אפשרויות נוספות לפעולות

כותרת הישות

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

איור 16. כותרת הישות

החלק של הסמל והכותרת (אפליקציה1) נגלל מתחת לכותרת (פרטי האפליקציה).

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

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

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

לדוגמה:

איור 18. קישור לתפריט עם סמל, כותרת ותת-טקסט

איור 19. קישור לתפריט עם כותרת וטקסט

איור 20. קישור לתפריט עם כותרת בלבד

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

שאר היעדים להקשה צריכים להיות בצבע העיצוב.

איור 21. דוגמה לתפריט יעד עם שתי הקשות

קישור לתפריט עם סמל, כותרת, טקסט משנה ונתונים סטטיסטיים/מספר/התראה

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

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

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

קיבוץ ומפרידים

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

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

איור 23. ההגדרות מקובצות עם חוצצים

החלפה

החלפה באמצעות סמל, כותרת ותת-טקסט

איור 24. החלפה באמצעות סמל, כותרת ותת-טקסט

החלפה עם כותרת ותת-טקסט

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

החלפה עם שם בלבד

לצד השמות מופיע סמל בצד ימין.

איור 26. החלפה עם שם בלבד

מתג פלוס פריט ברשימה

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

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

איור 27. פריט ברשימה ומתג

פס ההזזה

הסמל הוא אופציונלי בפס ההזזה.

איור 28. פס ההזזה

לחצן במסך

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

איור 29. לחצנים אפורים לפעולות 'הסרה' ו'סגירה ידנית'

איור 30. הלחצן הכחול של האפשרות 'להפעלה עכשיו'

גילוי נאות הדרגתי (מתקדם)

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

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

איור 31. הגדרות מתקדמות בשימוש במסך 'תצוגה'

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

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

איור 32. תפריט נפתח

תיבת סימון

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

אפשר להשתמש בתיבות סימון:

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

איור 33. תיבות סימון משמשות להפחתת מספר המתגים במסך זה

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

איור 34. הקישור שנעשה בו שימוש בהגדרות

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

איור 35. טקסט לכותרת התחתונה

תבניות

נתונים

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

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

איור 36. דוגמה שמציגה את האחסון

איור 37. דוגמה שמציגה את 'רשת'

הדרכה למשתמשים

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

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

טפסים

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

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

איור 39. טופס עם תיבת דו-שיח רגילה

תוצאות חיפוש

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

איור 40. תוצאת חיפוש