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

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

איור 1. צד שמאל. אפליקציה שלא מוצגת מקצה לקצה. בסדר. אפליקציה מקצה לקצה.

חטיפות דסקית

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

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

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

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

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

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

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

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

תוכן בגלילה

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

מה מומלץ לעשות

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

מה מומלץ לעשות

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

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

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

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

מה אסור לעשות

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

מה מומלץ לעשות

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

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

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

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

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

תוכן בגלילה

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

מה מומלץ לעשות

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

מה מומלץ לעשות

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

מגרעות במסך

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

מה מומלץ לעשות

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

מה אסור לעשות

ממקמים את ממשק המשתמש החשוב ביותר בקצה המסך.

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

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

מוודאים שקרוסלות אופקיות מוצגות במגרעת במסך.

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

מידע נוסף על תמיכה בחלקים חתוכים במסך ב-Compose

הנחיות אחרות

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