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

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

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

איור 1: תמונות שמוצגות מאחורי סרגלי המערכת

חטיפות דסקית

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

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

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

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

    איור 3: כניסות של תנועות במערכת. נמנעים מהקשה מטורגטים באזורים האלה

שרטוט התוכן מאחורי פסי המערכת

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

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

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

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

שורת סטטוס

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

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

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

איור 5: שורת הסטטוס בעיצוב בהיר כהה.

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

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


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

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

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

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

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

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

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

הצגת גזירים ושורת סטטוס

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

איך לתמוך בגזירים במסך?

איור 9: דוגמאות למגרעת במסך

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

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

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

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

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

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

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

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

איור 10: סרגל הניווט של נקודת האחיזה לתנועות

ניווט בשלושה לחצנים

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

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

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

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

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

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

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

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

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

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

    איור 13: התאמה דינמית של צבעים
  • מצבי לחצנים: המערכת מחילה מיסוך שקוף מאחורי המערכת עמודות (לרמת API 29 ומעלה) או סרגל מערכת שקוף (לרמת API) 28 ומטה).

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

מקלדת וניווט

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

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

מצב אימרסיבי

איור 16: מצב עשיר של חוויית מסך מלא במכשיר נייד שמיועד לרוחב

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