כדאי ליצור זרימה וקצב גמישים באמצעות שיטות של מבנה והכלה לתוכן.
1. מבנה בסיסי
כדי להתחיל ליצור מבנה מוצק עם כללי הגנה עקביים, מוסיפים שוליים ועמודות לפריסות.
שוליים מספקים מרווחים בקצוות השמאלי והימני של המסך והתוכן. ערך השוליים הסטנדרטי לגודל קומפקטי הוא 16dp, אבל השוליים צריכים להתאים את עצמם למסכים גדולים יותר. התוכן והפעולות העיקריים באפליקציה צריכים להישאר בתוך השוליים האלה ולהתאים להם.
בשלב הזה אפשר גם לוודא שיש אזורים בטוחים או שוליים פנימיים. השוליים הפנימיים של סרגל המידע מונעים פעולות חשובות מלהופיע מתחת לסרגלי המידע. פרטים נוספים זמינים במאמר בנושא הצגת התוכן מאחורי סרגלי המערכת.
משתמשים בעמודות כדי ליצור מבנה רשת גמיש ליישור עקבי, וכדי לספק הגדרה אנכית לפריסה על ידי חלוקת התוכן באזור הגוף. התוכן מוצג באזורים במסך שמכילים עמודות. העמודות האלה מספקות מבנה לפריסה, ומאפשרות לסדר את האלמנטים בצורה נוחה.
משתמשים ברשת עמודות כדי ליישר את התוכן עם רשת בסיסית, אבל עדיין לשמור על גודל גמיש. רשת העמודות יכולה להתאים לגורמי צורה שונים על ידי שינוי הגדלים של העמודות ומספר העמודות לפי הצורך בהתאם לגודל המסך בנקודות מסוימות, וגם לאפשר את שינוי הגודל של התוכן. לא מומלץ להשתמש ביותר מדי עמודות ברשת, כי בשביל זה יש רשת בסיסית: כדי לספק יחידות ריווח עקביות.
חשוב להיזהר כשיוצרים רשת נלווית של שורות, כי היא עלולה להגביל את שינוי הגודל של התוכן במאוזן בהתאם לכיוונים ולגורמי הצורה. בדרך כלל, הגדרת כללי ריווח תספק את העקביות החזותית הנדרשת.
מתחילים להוסיף עותק למבנה הפריסה. השוליים מגנים על התוכן מפני הקצוות של המסך. העמודות מספקות מבנה עקבי של ריווח ויישור.
2. החלת הגבלה
משתמשים בתיחום כדי לקבץ חזותית רכיבים.
הכלה היא שימוש משולב ברווחים לבנים ובאלמנטים גלויים כדי ליצור קיבוץ חזותי. קונטיינר הוא צורה שמייצגת אזור סגור. בפריסה אחת, אפשר לקבץ יחד רכיבים עם תוכן או פונקציונליות דומים ולהפריד אותם מרכיבים אחרים באמצעות רווחים, טיפוגרפיה ומפרידים.
אפשר לקבץ פריטים דומים באמצעות רווח לבן או קו חלוקה גלוי כדי לעזור למשתמשים להתמצא בתוכן.
בהכלה מרומזת נעשה שימוש ברווח לבן כדי לקבץ תוכן באופן חזותי וליצור גבולות של מאגר, ואילו בהכלה מפורשת נעשה שימוש באובייקטים כמו קווים מפרידים וכרטיסים כדי לקבץ תוכן.
באיור הבא מוצגת דוגמה לשימוש בהכלה מרומזת כדי להכיל את הכותרת ואת העותק הראשי. רשת העמודות משמשת ליישור וליצירת קיבוצים. הנקודות המרכזיות מופיעות באופן מפורש בכרטיסים. שימוש בסמלים ובהיררכיית סוגים כדי ליצור הפרדה חזותית טובה יותר.
3. מיקום תוכן
ב-Android יש כמה דרכים לטפל ברכיבי תוכן במאגרי המידע שלהם, שיכולות לעזור למקם אותם בצורה מתאימה, כולל כוח משיכה, ריווח ושינוי גודל.
Gravity הוא תקן להצבת אובייקט בתוך מאגר גדול יותר, בתרחישי שימוש ספציפיים. באיור הבא מוצגות דוגמאות למיקום אובייקטים: התחלה ומרכז (1), למעלה ומרכז אופקי (2), למטה בצד ימין (3) וסוף וצד ימין (1).
4. שינוי קנה מידה של תוכן
התאמת הגודל חיונית כדי להתאים את התוכן הדינמי, את כיוון המכשיר ואת גדלי המסך. האלמנטים יכולים להישאר קבועים או לשנות את הגודל שלהם.
חשוב לשים לב לאופן שבו התמונות מוצגות בתוך המאגרים שלהן, עם שינוי גודל ומיקום, כדי לוודא שהן ייראו כמו שרוצים, למרות הקשר המכשיר. אחרת, יכול להיות שהחלק העיקרי בתמונה ייראה חתוך, שהתמונות יהיו קטנות או גדולות מדי ביחס לפריסה, או שיופיעו אפקטים לא רצויים אחרים.
תוכן שלא סומן יכול להופיע בצורה שונה ממה שציפיתם או רציתם.
תוכן מוצמד
להרבה רכיבים יש אינטראקציות מובנות, גלילה ומיקום עם משבצות או מסגרות. אפשר לשנות רכיבים מסוימים כך שיישארו קבועים במקום להגיב לגלילה. לדוגמה, כפתורי פעולה צפים (FAB) שמכילים פעולות חשובות.
יישור
אפשר להשתמש ב-AlignmentLine כדי ליצור קווי יישור בהתאמה אישית, שפריסות ראשיות יכולות להשתמש בהם כדי ליישר ולמקם את רכיבי הבן שלהן.
מה מומלץ לעשות
מה אסור לעשות
פריסת רכיבים
רכיבי Material 3 מספקים הגדרות ומצבים משלהם לאינטראקציה ולתוכן.
Compose מספקת פריסות נוחות לשילוב רכיבי Material בתבניות מסך נפוצות. רכיבי Composables כמו Scaffold מספקים משבצות לרכיבים שונים ולרכיבים אחרים במסך. מידע נוסף על רכיבי Material ופריסה