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

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

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

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

חטיפות דסקית

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

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

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

שורת סטטוס

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

איור 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.

פריסות

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

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

מגרעות במסך

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

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

מצב עשיר

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

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