מבנה ותכנים של תוכן

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

1. מבנה בסיסי: רשת פריסה להנחיית התוכן

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

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

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

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

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

רשת מודולרית מתאימה לתוכן ולפריסה חשובים באותה מידה אבל מאוד מובנים, כמו גלריית תמונות.

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

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

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

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

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

מידע נוסף על מאגרי פריסה, כמו רכיבי החלפה בין דפים ופריסה רציפה.

כתב יד ובנייה הם סוגים אחרים של רשתות פריסה.

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

2. החלת הגבלה

שימוש בתיחום כדי לקבץ חזותית רכיבים.

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

‫Android משתמש בשורות, בעמודות ובתיבות כאבני בניין, כך שאפשר לעצב את ההכלה בצורה דומה. כדי להקל על ההתמצאות בתוכן, כדאי לקבץ פריטים דומים באמצעות רווח לבן או חלוקה ברורה.

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

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

3. מיקום תוכן

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

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

כפי שמוצג באיור הבא, פריסת אימות יכולה להשתמש בפריסת רשת דו-ממדית.

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

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

אפשר להציג תוכן בשורות או בעמודות שניתנות לגלילה באמצעות lazy rows ו-lazy columns.

יישור

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

אפשר להשתמש ב-AlignmentLine כדי ליצור קווי יישור מותאמים אישית, שפריסות ראשיות יכולות להשתמש בהם כדי ליישר ולמקם את רכיבי הבן שלהן.

4. שינוי קנה המידה וחיתוך של התוכן

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

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

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

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

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

תוכן מוצמד

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

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

רכיבים בפריסה

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

‫Compose מספק פריסות נוחות לשילוב רכיבי Material בתבניות מסך נפוצות. רכיבי Composables כמו Scaffold מספקים משבצות לרכיבים שונים ולרכיבים אחרים במסך. מידע נוסף על רכיבי Material ופריסה