יחד, שורת הסטטוס וסרגל הניווט נקראים סרגלי המערכת. הם מציגים מידע חשוב כמו רמת הטעינה של הסוללה, השעה התראות ולאפשר אינטראקציה ישירה עם המכשיר מכל מקום.
חשוב מאוד להביא בחשבון את מידת הבולטוּת של עמודות המערכת, בין אם לעיצוב ממשק משתמש לאינטראקציות עם מערכת ההפעלה של Android, שיטות קלט היכולות של המכשיר. כדי לוודא שסרגלי המערכת נמצאים בחלק העליון של רוב השכבות אנחנו מתייחסים אליהם.
חטיפות דסקית
הוספת סרגלי מערכת לעיצובים כדי להביא בחשבון את האזורים הבטוחים בממשק המשתמש, אינטראקציות, שיטות קלט, גזירים במסך ויכולות אחרות של המכשיר. חשוב להשאיר את עמודות המערכת בשכבה העליונה כדי לוודא שהן יובאו בחשבון.
שקוף את סרגלי המערכת ופורסים את האפליקציה במסך מלא, להמשיך את ממשק המשתמש מתחת לעמודות כדי לספק חוויה מלאה מקצה לקצה.
להימנע מהוספת תנועות הקשה או מגרירה של יעדים מתחת לערכות תנועות. האלה התנגשות עם ניווט מקצה לקצה ועם ניווט באמצעות תנועות.
איור 2: תנועות מובנות במערכת. נמנעים מהקשה מטורגטים באזורים האלה
שרטוט התוכן מאחורי פסי המערכת
התכונה 'קצה-לקצה' מאפשרת ל-Android לשרטט את ממשק המשתמש מתחת לסרגלי המערכת עבור חוויה סוחפת יותר. אנחנו ממליצים להשתמש מקצה לקצה כי סרגל ניווט שקוף הוא בקשה נפוצה של משתמשים. (קראו איך תמיכה קצה לקצה).
האפליקציה יכולה לטפל בחפיפה בתוכן על ידי תגובה להתקנות. תוספות תיאור כמה צריך להוסיף לשטח התוכן של האפליקציה כדי למנוע חפיפה עם בממשק המשתמש של Android OS, כמו סרגל הניווט או שורת הסטטוס, או תכונות של המכשיר הפיזי, כמו גזירים במסך.
חשוב לשים לב לסוגים הבאים של ערכות inset כשמתכננים את השימוש מקצה לקצה במקרים:
- רכיבי inset של סרגלי מערכת חלים על ממשק משתמש שניתן להקיש עליו וגם לא נסתרות באופן חזותי על ידי סרגלי המערכת.
- ערכות inset של תנועות במערכת חלות על אזורי ניווט באמצעות תנועות שבהם המערכת משתמשת שמקבלים עדיפות על פני האפליקציה שלכם.
שורת סטטוס
ב-Android, שורת הסטטוס מכילה סמלי התראות וסמלי מערכת. משתמש יוצר אינטראקציה עם שורת הסטטוס על ידי משיכה למטה כדי לגשת להתראה צל.
שורת הסטטוס עשויה להיראות אחרת בהתאם להקשר, לשעה ביום, העדפות או עיצובים שהוגדרו על ידי המשתמש ופרמטרים אחרים. אפשר גם להגדיר סגנון שורת הסטטוס, כמו בדוגמאות הבאות.
עכשיו צריך לוודא שתוכן האפליקציה מתפרש על פני כל המסך, מקצה לקצה נדרש. להשתמש בפסי מערכת שקופים עם תוכן מקצה לקצה, כפי שמוצג בדוגמה הבאה.
כאשר מתקבלת התראה, בדרך כלל מופיע סמל בשורת הסטטוס. הזה מאותת למשתמש שיש משהו לראות בחלונית ההזזה להתראות. זה יכול להיות סמל האפליקציה או הסמל שמייצגים את הערוץ. צפייה עיצוב התראות.
הגדרת הסגנון של שורת הסטטוס
עיצוב הרקע של שורת הסטטוס כחלק מעיצוב האפליקציה, עם צבע בהתאמה אישית או סגנון, לצד הגדרה של שקיפות ושקיפות.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
אם מגדירים את צבע הרקע באופן ידני, אפשר לבחור סגנון של סטטוס תוכן בר בצורה בהירה או כהה להשגת ניגודיות אופטימלית.
הצגת גזירים ושורת סטטוס
מגרעת במסך הוא אזור במכשירים מסוימים שנמתח לתוך המסך על מנת לספק מרווח לחיישנים הקדמיים. זה יכול להשפיע על המראה של שורות סטטוס. המגרעות במסך עשויות להשתנות בהתאם ליצרן.
סרגל הניווט
ב-Android המשתמשים יכולים לשלוט בניווט באמצעות הפקדים 'הקודם', 'דף הבית' ו'סקירה כללית':
- חזרה לתצוגה הקודמת.
- דף הבית עובר מהאפליקציה למסך הבית של המכשיר.
- בסקירה הכללית רואים שהאפליקציות פתוחות ונפתחו לאחרונה.
המשתמשים יכולים לבחור הגדרות שונות של סרגל הניווט, כולל תנועות ניווט (מומלץ) וניווט בשלושה לחצנים.
ניווט באמצעות תנועות
הושק ב-Android 10 (רמת API 29), מומלץ להשתמש בניווט באמצעות תנועות סוג הניווט, למרות שאי אפשר לשנות את העדפת המשתמש. תנועה הניווט לא משתמש בלחצנים 'חזרה', 'דף הבית' ו'סקירה כללית', אלא מציג נקודת אחיזה אחת לתנועה נוחה. המשתמשים יוצרים אינטראקציה על ידי החלקה משמאל או הקצה הימני של המסך כדי לחזור אחורה וקדימה ולמעלה מתחתית המסך כדי להמשיך בית. החלקה למעלה לחיצה ארוכה פותחת את הסקירה הכללית.
ניווט באמצעות תנועות הוא דפוס ניווט שניתן להתאמה, שמאפשר לעצב במכשירים ניידים ובמסכים גדולים יותר. כדי לספק את חוויית המשתמש הטובה ביותר, חשוב להביא בחשבון ניווט באמצעות תנועות לפי:
- תמיכה בתוכן מקצה לקצה.
- יש להימנע מהוספת אינטראקציות או משטחי מגע בתוך רכיבי ניווט באמצעות תנועות.
מידע על הטמעת ניווט באמצעות תנועות
ניווט בשלושה לחצנים
ניווט בשלושה לחצנים מספק שלושה לחצנים לחזרה למסך הקודם, למסך הבית ולסקירה כללית.
וריאציות אחרות של סרגל הניווט
בהתאם לגרסת Android ולמכשיר, יכול להיות שהגדרות אחרות של סרגל הניווט יהיו להיות זמינים למשתמשים. לדוגמה, ניווט באמצעות שני לחצנים מאפשר לחצנים למסך הבית ולחזרה.
הגדרת סגנון ניווט
בדוגמה הבאה תוכלו לראות איך מטמיעים סגנון ניווט.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
מערכת Android מטפלת בכל ההגנה החזותית של ממשק המשתמש בתנועה במצב הניווט או במצבי הלחצנים.
מצב ניווט באמצעות תנועות: המערכת מחילה התאמה דינמית של צבעים. שהצבע של סרגלי המערכת משתנה בהתאם לתוכן מאחוריהם. בדוגמה הבאה, הכינוי בסרגל הניווט משתנה לצבע כהה אם הוא ממוקם מעל תוכן בהיר, ולהפך.
איור 12: התאמה דינמית של צבעים מצבי לחצנים: המערכת מחילה מיסוך שקוף מאחורי המערכת עמודות (לרמת API 29 ומעלה) או סרגל מערכת שקוף (לרמת API) 28 ומטה).
איור 13: התאמה דינמית של צבע, שבה עמודות המערכת לשנות את הצבע על סמך התוכן מאחוריהם
מקלדת וניווט
כל סוג ניווט מגיב בהתאם למקלדת שמופיעה במסך
ולאפשר למשתמש לבצע פעולות כגון סגירה או אפילו שינוי
סוג המקלדת. כדי להבטיח מעבר חלק של המקלדת, כדי להבטיח מעבר חלק
מעבר שמסנכרן את המעבר של האפליקציה עם החלקת המקלדת
למעלה ולמטה מתחתית המסך, משתמשים
WindowInsetsAnimationCompat
מצב אימרסיבי
למשל, אפשר להסתיר את סרגלי המערכת אם רוצים לעבור למסך מלא כשהמשתמש צופה בסרט. למשתמש עדיין צריכה להיות אפשרות להקיש כדי לחשוף את עמודות המערכת ואת ממשק המשתמש כדי לנווט או לקיים אינטראקציה עם פקדי המערכת. אפשר לקרוא מידע נוסף על עיצוב למצבי מסך מלא או הסתרת פסי המערכת למצב של צפייה היקפית.