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

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

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

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

חטיפות דסקית

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

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

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

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

שורת סטטוס

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

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

סמלי שורת סטטוס

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

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

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

איור 4. סמל ההתראה בשורת הסטטוס.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

איור 7. סרגל הניווט עם פס הניווט.

ניווט דינמי

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

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

מידע נוסף זמין במאמר בנושא יצירת ניווט אדפטיבי.

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

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

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

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

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

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

תמיד מומלץ להשתמש בפס הניווט השקוף של ניווט באמצעות תנועות.

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

מצבי כפתור

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

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

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

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

מקלדת וניווט

איור 10. מקלדת וירטואלית עם סרגלי ניווט.

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

פריסות

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

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

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

מידע נוסף מופיע במאמר בנושא פריסות קנוניות.

מגרעות במסך

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

איור 11. דוגמאות לחיתוכי מסך.

מצב עשיר

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

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