הנחיות עיצוב של הגדרות אנדרואיד

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

עקרונות עיצוב

תן סקירה טובה

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

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

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

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

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

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

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

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

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

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

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

כותרות צריכות:

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

יש להימנע מכותרות:

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

סוגי דפים

רשימת הגדרות

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

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

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

תצוגת רשימה

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

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

מסך ישות

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

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

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

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

הגדרת מאסטר

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

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

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

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

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

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

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

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

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

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

רכיבים

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

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

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

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

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

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

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

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

כותרת ישות

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

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

החלק הסמל והכותרת (App1) יגלול מתחת לכותרת (מידע על האפליקציה).

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

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

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

דוגמאות:

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

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

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

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

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

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

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

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

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

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

קיבוץ ומחלקים

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

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

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

החלף

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

איור 24. החלף עם סמל, כותרת ותת-טקסט

החלף עם כותרת וסאבטקסט

איור 25. החלף עם כותרת וסאבטקסט

החלף עם כותרת בלבד

כותרות יכולות להיות מלוות בסמל בצד שמאל.

איור 26. מתג עם כותרת בלבד

פריט רשימה + מתג

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

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

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

המחוון

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

איור 28. המחוון

כפתור על המסך

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

איור 29. לחצנים אפורים עבור "הסר התקנה" ו"הפסקה כוח"

איור 30. כפתור כחול עבור "הפעל עכשיו"

גילוי מתקדם (מתקדם)

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

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

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

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

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

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

תיבת סימון

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

ניתן להשתמש בתיבות סימון:

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

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

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

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

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

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

דפוסים

נתונים

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

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

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

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

חינוך משתמש

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

איור 38. הגדרה באמצעות אנימציה וטקסט תחתון

טפסים

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

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

איור 39. טופס עם דיאלוג רגיל

תוצאות חיפוש

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

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