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

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

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

חטיפות דסקית

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

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

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

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

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

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

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

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

תוכן בגלילה

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

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

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

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

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

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

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

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

מה אסור לעשות

הגנה הדרגתית שבה הרקע של כל חלונית לא תואם

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

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

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

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

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

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

תוכן בגלילה

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

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

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

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

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

מגרעות במסך

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

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

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

מה אסור לעשות

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

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

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

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

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

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

הנחיות אחרות

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