סרגלי מידע של Android

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

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

איור 1: תמונות מאחורי סרגי המידע

חטיפות דסקית

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

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

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

    איור 2: תנועות מובנות במערכת. מומלץ לא למקם מטרות הקשה מתחת לאזורים האלה

איך מציירים את התוכן מאחורי שורות המערכת

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

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

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

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

שורת סטטוס

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

איור 3: אזור שורת הסטטוס מודגש מעל סרגל האפליקציות העליון

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

איור 4: סמלי שורת הסטטוס בעיצוב בהיר ועיצוב כהה.

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

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

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

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

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

איור 7: סמל ההתראה בשורת הסטטוס

הגדרת הסגנון של שורת הסטטוס

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

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

הצגת פריטים חתוכים ושורת הסטטוס

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

איך תומכים בחלקים חתוכים במסך

איור 8: דוגמאות לחריצים במסך

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

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

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

ניווט באמצעות תנועות

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

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

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

מידע נוסף על הטמעת ניווט באמצעות תנועות

איור 9: סרגל הניווט של תנועות

ניווט ב-3 לחצנים

בניווט ב-3 לחצנים יש שלושה לחצנים: לחצן חזרה, לחצן מסך הבית ולחצן סקירה כללית.

איור 10: סרגל ניווט עם שלושה לחצנים

וריאציות אחרות של סרגל הניווט

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

איור 11: סרגל ניווט עם שני לחצנים

הגדרת סגנון ניווט

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

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

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

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

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

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

    איור 13: התאמה דינמית של צבע, שבה סרחי המערכת משנים את הצבע בהתאם לתוכן שמאחוריהם

מקלדת וניווט

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

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

מצב אימרסיבי

איור 15: מצב Immersive עם חוויית צפייה במסך מלא במכשיר נייד בפורמט לרוחב

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