עיצוב מקצה לקצה

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

חטיפות דסקית

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

ציור התוכן מאחורי סרגלי המערכת

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

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

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

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

שיקולים לגבי שורת הסטטוס

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

תוכן בגלילה

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

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

• אם רלוונטי, אפשר להסתמך על ההגנה האוטומטית של Material 3 TopAppBar כשגוללים.
• אפשר ליצור קומפוזיציה של מעבר צבעים בהתאמה אישית או להשתמש ב-GradientProtection עבור Views. מידע נוסף על הפעולה הזו בכתיבת אימייל זמין במאמר בנושא הגנה על סרגל המערכת.

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

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

אל תשתמשו בכמה אמצעי הגנה בשורת הסטטוס, למשל על ידי שימוש בהגנה המובנית של Material 3 TopAppBar וגם בהגנה בהתאמה אישית.

שיקולים לגבי סרגל הניווט

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

תוכן בגלילה

סרגלי אפליקציות בתחתית המסך צריכים להתכווץ בזמן הגלילה.

מגרעות במסך

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

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

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

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

הנחיות אחרות

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