פריסה מגדירה את המבנה החזותי של הממשק של המשתמש עם האפליקציה, למשל בפעילות. ב-Android יש מגוון ספריות, נקודות התחלה קנוניקליות ושיטות להצגת תוכן ולהגדרת המיקום שלו.
חטיפות דסקית
אזורים בטוחים במכשירי Honor, כולל חלקים בממשק המשתמש כמו חתכים במסך, רכיבים מוטמעים מקצה לקצה, צגי קצוות, מקלדות תוכנה וסרגלי מערכת.
מה כדאי לעשות: לספק פריסה גמישה שמאפשרת למשתמשים לבצע אינטראקציה עם המקלדת.
סרטון 1: יצירת פריסה גמישה שמאפשרת למשתמשים לקיים אינטראקציה
כדאי להציב אינטראקציות חיוניות, כמו ניווט ראשי, באזור במסך שקל להגיע אליו.
איור 1: לחצני פעולה צפים (FAB) מספקים נקודת אינטראקציה בולטת ונגישה כדאי להשתמש ברכיבי תוכן מצורפים כדי לקבץ תוכן קשור ולהנחות את המשתמש בתוכן ובפעולות.
איור 2: כרטיסים שמשתמשים במגבלה מפורשת כדי לקבץ תוכן עם פעולות קשורות יש לשמור על עקביות בין תוכן דומה לבין רכיבי ממשק המשתמש.
לא כדאי: לשנות את המרווחים בין רכיבים דומים באופן לא עקבי, כי זה עלול להקשות על הקריאה ולגרום לכך שהעיצובים ייראו לא מסודרים.
מומלץ: להגדיר ריווח עקבי בין רכיבים דומים.
איור 3: אין לשבש את הקריאוּת אל תיצמדו לפורמט לאורך או לפריסה אידיאלית: כדאי להביא בחשבון יחסים שונים של גובה-רוחב, קטגוריות גדלים ורזולוציות שונות שהמשתמשים עשויים להיתקל בהן.
אל תציפו את המשתמש בפעולות רבות מדי בכל צפייה.
כשאתם יוצרים פריסות בהתאמה אישית, ציינו איך התוכן צריך להופיע בפריסה באמצעות מונחים של התאמה, אילוצים או כוח משיכה. יש לציין איך התמונות צריכות להגיב לקונטיינר שלהן כדי להופיע כמו שצריך.
החלקים של מסך אפליקציה טיפוסי ב-Android
רוב האפליקציות ל-Android מורכבות מאזורים שנקראים סרחי המערכת, אזור הניווט והגוף.
סרגי מידע
בשורת הסטטוס ובסרגל הניווט, שנקראים יחד 'סרגלי המערכת', מוצג מידע חשוב כמו רמת הטעינה של הסוללה, השעה והתראות, והם מאפשרים אינטראקציה ישירה עם המכשיר מכל מקום. מידע נוסף על סרגלי המערכת
אזור הניווט
הניווט מייצג את האפשרויות השונות שמאפשרות למשתמש לנווט באפליקציה, לגשת לפעולות חשובות או לעבור בפלטפורמת Android.
אזור בגוף
אזור הגוף מכיל את תוכן המסך. תוכן הגוף מורכב מקבוצות נוספות ומפרמטרים של פריסה. הוא חייב להמשיך מתחת לאזורי סרגל הניווט וסרגל המערכת.
מגדירים את WindowCompat.setDecorFitsSystemWindows(window, false) להוספת תמונות שגולשות מקצה לקצה.
כדי לקבוע את ההרכב ואת דפוסי הניווט המתאימים לפריסה, חשוב להבין איך המשתמשים מקיימים אינטראקציה עם התוכן ואיך הם מנווטים בארכיטקטורת המידע של האפליקציה. הבנת הנתונים האלה יכולה לעזור לכם ליצור ממשק משתמש שמאפשר למשתמשים לבצע פעולות, וכך להתמקד יותר במשתמשים בתהליך העיצוב.
מבנה ותכנים
יצירת זרימה וסגנון גמיש באמצעות מבנה ותכנים מובְנים.
מבנה בסיסי: שימוש בשוליים ובעמודות כמגדלי שמירה חזותיים
כדי ליצור מבנה יציב עם אמצעי הגנה עקביים, מוסיפים שוליים ועמודות לפריסות.
שוליים מספקים רווח בקצוות השמאלי והימני של המסך והתוכן. הערך הסטנדרטי של שוליים בגודל קומפקטי הוא 16dp, אבל השוליים צריכים להתאים למסכים גדולים יותר. תוכן הגוף והפעולות של האפליקציה חייבים להישאר בתוך השוליים האלה ולהתאים להם.
בשלב הזה אפשר גם לוודא שיש אזורים בטוחים או שוליים בתוך התמונה. קטעי הטקסט של סרגל המידע מונעים מפעולות חשובות להופיע מתחת לסרגלי המידע. פרטים נוספים זמינים במאמר איך מציירים את התוכן מאחורי שורת הסטטוס.
אפשר להשתמש בעמודות כדי ליצור מבנה רשת גמיש שמאפשר התאמה עקבית, ולחלק את התוכן באזור הגוף כדי ליצור הגדרה אנכית של הפריסה. התוכן מופיע באזורים במסך שמכילים עמודות. העמודות האלה מוסיפות מבנה לפריסת האתר, ומספקות מבנה נוח לסדר את הרכיבים.
משתמשים במרשת עמודות כדי ליישר את התוכן עם מרשת בסיסית, אבל לשמור על גמישות בגודל. אפשר לשנות את גודל העמודות ואת מספר העמודות לפי הצורך בהתאם לגודל המסך בנקודות מסוימות, וכך להתאים את התצוגה של התכנים למגוון גורמים שונים. כדאי להימנע מפריסה מפורטת מדי של עמודות. לכך מיועדת רשת הבסיס: לספק יחידות רווח עקביות.
חשוב להיזהר כשמגדירים רשת נלווית של שורות, כי היא עלולה להגביל את התאמת התוכן להגדרות האנכיות והרוחביות השונות. בדרך כלל, הגדרת כללי ריווח תספק את העקביות החזותית הנדרשת.
שימוש במסגרות כדי לקבץ רכיבים באופן חזותי
ארגון מתייחס לשימוש ברווחים לבנים ובאלמנטים גלויים יחד כדי ליצור קיבוץ חזותי. מאגר הוא צורה שמייצגת אזור סגור. בפריסה אחת, אפשר לקבץ יחד רכיבים שיש להם תוכן או פונקציונליות דומים, ולהפריד אותם מרכיבים אחרים באמצעות שטח פתוח, טיפוגרפיה ומחיצות.
אפשר לקבץ פריטים דומים יחד באמצעות רווחים לבנים או חלוקה גלויה כדי לעזור למשתמש לנווט בתוכן.
בארגון סמוי נעשה שימוש בשטחים לבנים כדי לקבץ תוכן באופן חזותי וליצור גבולות של מאגרים, ואילו בארגון מפורש נעשה שימוש באובייקטים כמו קווים מפרידים וכרטיסים כדי לקבץ תוכן יחד.
באיור הבא מוצגת דוגמה לשימוש במכסה מרומזת כדי להכיל את הכותרת ואת העותק הראשי. רשת העמודות משמשת ליישור וליצירת קיבוצים. נתוני השיא נכללים בכרטיסים באופן מפורש. שימוש בסמלי אייקונים ובהיררכיית טיפוסים כדי ליצור הפרדה חזותית טובה יותר.
מיקום התוכן
ב-Android יש כמה דרכים לטיפול ברכיבי תוכן בקונטיינרים המתאימים שלהם, שיכולות לעזור למקם אותם בצורה הולמת, כולל כוח משיכה, רווחים ושינוי קנה מידה.
Gravity הוא תקן למיקום אובייקט בתוך מאגר גדול יותר, לתרחישים ספציפיים לדוגמה. באיור הבא מוצגות דוגמאות למיקום של אובייקטים בתחילת הדף ובמרכז (1), בחלק העליון ובמרכז (2), בפינה הימנית התחתונה (3) ובסוף הדף ובצד ימין (1).
התאמה לעומס (scaling)
שינוי קנה המידה חיוני כדי להתאים את המודעות לתוכן דינמי, לכיוון המכשיר ולגדלי המסכים. אפשר לשמור על גודל קבוע של רכיבים או לשנות את הגודל שלהם.
חשוב לשים לב לאופן שבו התמונות מוצגות בתוך הקונטיינרים שלהן עם שינוי קנה המידה והמיקום, כדי לוודא שהן ייראו כמו שאתם רוצים, למרות ההקשר של המכשיר. אחרת, יכול להיות שהחלק העיקרי של התמונה יוצג חתוך, התמונות יהיו קטנות או גדולות מדי לפריסת המסך או יהיו להן השפעות לא רצויות אחרות.
תוכן שלא צוין בו הערה עלול להיראות אחרת ממה שציפיתם או רציתם.
תוכן מוצמד
למרכיבים רבים יש אינטראקציות מובנות, גלילה ומיקום באמצעות תבניות או תבניות עזר. אפשר לשנות רכיבים מסוימים כך שיישארו קבועים במקום להגיב לגלילה, למשל לחצני פעולה צפים (FAB) שמכילים פעולות קריטיות.
יישור
אפשר להשתמש ב-AlignmentLine כדי ליצור קווים מותאמים אישית של יישור, שאפשר להשתמש בהם בפריסות הורה כדי ליישר ולמקם את הפריטים הצאצאים.
לא כדאי: לשנות את המרווחים בין רכיבים דומים באופן לא עקבי, כי זה עלול להפריע לקריאה ולהפוך את העיצובים למוזרים.
מומלץ: להגדיר ריווח עקבי בין אלמנטים דומים.
פריסת הרכיבים
רכיבי Material 3 כוללים הגדרות ומצבים משלהם לאינטראקציה ולתוכן.
Compose מספק פריסות נוחות לשילוב רכיבי Material Components בתבניות מסך נפוצות. רכיבים מורכבים כמו Scaffold מספקים משבצות לרכיבים שונים ולרכיבי מסך אחרים. מידע נוסף על רכיבים ועל פריסה של Material Design
פריסות ודפוסי ניווט
אם האפליקציה מכילה כמה יעדים שהמשתמשים יכולים לעבור ביניהם, מומלץ להשתמש בשילובים של פריסה וניווט שנפוצים באפליקציות אחרות. משתמשים רבים כבר מכירים את המודלים המנטליים של השילובים האלה, ולכן האפליקציה שלכם תהיה אינטואיטיבית יותר עבורם.
שילובים של פריסה וניווט
סרגל הניווט והמגירה של הניווט במצב מודלי משמשים כתבניות הניווט הראשיות לתצוגות של פריסות הורה וליעדים הראשיים של הניווט.
בסרגל הניווט אפשר להציג שלושה עד חמישה יעדים לניווט באותה רמת היררכיה. הרכיב הזה מתורגם לסרגל הניווט במסכים גדולים.
למרות שאפשר להוסיף למגירה של הניווט יותר מחמישה יעדים לניווט, התבנית הזו לא אידיאלית כמו סרגל הניווט, כי צריך להגיע לסרגל העליון במסכים קומפקטיים.
הכרטיסיות של Material 3 וסרגל האפליקציות התחתון הם דפוסי ניווט משניים שאפשר להשתמש בהם כדי להשלים את הניווט הראשי או להופיע בתצוגות של ילדים.
פעולות בפריסה
לספק אמצעי בקרה כדי לאפשר למשתמשים לבצע פעולות. דפוסים נפוצים כוללים פעולות בסרגל העליון, לחצן פעולה צף (FAB) ותפריטים.
לפעולות בעלות חשיבות עליונה, FAB מספק למשתמשים לחצן גדול ובולט. מומלץ לציין רק פעולה אחת בכל פעם ברמה הזו. לחצן FAB יכול להופיע במספר גדלים ובצורה מורחבת, שכוללת תווית. משתמשים ב-Scaffold כדי להצמיד לחצן מגע גדול, וכך לוודא שהוא תמיד גלוי, גם כשגוללים.
אפשר למקם פעולות משניות בסרגל העליון, או בדף אם הן מקובצות ליד תוכן קשור.
מומלץ להוסיף פעולות נוספות שלא נדרשות באופן מיידי או בתדירות גבוהה לתפריט הנפתח.
פריסות קנוניות
כדאי להשתמש בפריסות קנוניקליות כנקודת מוצא. הן קומפוזיציות מוכנות לשימוש שעוזרות לפריסות להתאים לתרחישי שימוש נפוצים ולגדלי מסך נפוצים. הפריסות האלה הן אסתטיות ופונקציונליות, והן מבוססות על ההנחיות של Material 3.
מסגרת Android כוללת רכיבים מיוחדים שמאפשרים הטמעה פשוטה ואמינה של הפריסות באמצעות ממשקי ה-API של Jetpack Compose או של Views.
פריסת רשימה ופירוט
פריסה של רשימת פרטים מאפשרת למשתמשים לעיין ברשימות של פריטים עם מידע תיאורי, הסבר או מידע נוסף אחר – פרטי הפריט. במסכים בגודל קומפקטי, מוצגות רק תצוגת הרשימה או תצוגת הפרטים. רשימות הן פריסת האפליקציות הנפוצה ביותר, והן מציגות אוסף של תוכן בפריסה שמבוססת על שורות. התצוגה של רשימת פרטים מתאימה לאפליקציות הודעות, למנהלי אנשי קשר, למעיינים בקבצים או לכל אפליקציה שבה אפשר לארגן את התוכן כרשימה של פריטים שמציגים מידע נוסף.
התוכן יכול להיות סטטי או דינמי.
- תוכן דינמי הוא תוכן שהאפליקציה מציגה בזמן אמת, והוא אידיאלי להצגת תוכן שנוצר על ידי משתמשים או כדי לשקף את ההעדפות או הפעולות של המשתמש. לדוגמה, נניח שיש אפליקציית תמונות עם רשימה שניתן לגלול בה של תמונות שנוצרו על ידי משתמשים, והיא ייחודית לכל משתמש ומשתנה ככל שהמשתמש מעלה תמונות נוספות. התמונות האלה הן תוכן דינמי.
- תוכן סטטי מייצג תוכן מקודד, שאפשר לשנות רק על ידי ביצוע שינויים ישירות בקוד של האפליקציה. דוגמאות לתוכן סטטי הן תמונות וטקסט שכל משתמש יכול לראות.
בקובץ Figma Now in Android יש כמה דוגמאות לפריסות. בדוגמה הבאה מוצגת אוסף תוכן דו-מימדי.
רשימת המשימות ב-Material 3 – הנחיות נוספות לעיצוב של רכיבים ומפרטים של רשימות.
פריסת הפיד
בפריסת פיד, רכיבי תוכן מקבילים מסודרים ברשת שניתן להגדיר, כדי לאפשר צפייה מהירה ונוחה בכמות גדולה של תוכן. (ראו הנחיות לשימוש בכרטיסים באוסף ב-Material 3). אפשר להגדיר פידים בתצוגת רשימה או רשת במסכים קומפקטיים, בדרך כלל בכרטיסים או בפריטי מידע. התוכן יכול להיות דינמי, כלומר הוא 'מוזן' ממקור חיצוני דינמי כמו API.
פריסה של רשת מורכבת משורות ועמודות, שנוצרות על ידי עקרונות מובְנים או מפורשים של מיקום. (מידע נוסף זמין בקטע אבטחה מרחבית בדף הזה). אפשר להחיל פריסה של רשת באופן קפדני יותר או להשתמש בפריסה מדורגת כדי לשנות את המיקום של השורות והעמודות. צריך להשתמש במרווחים ובלוגיקה עקביים בשני המודלים כדי למנוע בלבול בקרב המשתמשים. הנחיות לעיצוב פידים ב-Material 3
אפשר להטמיע פריסת פיד בחלונית הכתיבה באמצעות רשימות או רשתות 'לאט', או בתצוגות באמצעות RecyclerView או CardView.
תמיכה בפריסה של חלונית
יכול להיות שתוכלו להציג את התוכן בנייד רק אם תוסיפו לו תוכן תומך או פקדים. הם בדרך כלל מופיעים בתור גיליונות או תיבות דו-שיח, והם יכולים לעזור לכם להתמקד בתצוגה הראשית ולמנוע ממנה להיות עמוסה מדי. הנחיות ל-M3 לשימוש בפריסת קנון של חלונית תמיכה
מידע נוסף על הנחיות M3 לגבי גיליונות תחתונים
פריסות יחסיות
קלט, תוכן או פעולות אחרות יכולים להופיע ביחס זה לזה או להיות מוגבלים לקונטיינר הורה. אפשר ליצור פריסות בהתאמה אישית, אבל חשוב להקפיד על עקביות בקיבוץ, בעמודות ובמרווחים.
אפשר גם להשתמש בשילוב של סוגי פריסות. לדוגמה, אפשר להתאים קרוסלה או גלילה אופקית לכרטיסים אנכיים. לחלופין, אפשר להציג תרשים מותאם אישית עם נתונים של רשימה אנכית.
אפשר להציג תוכן בשורות או בעמודות שגלולות באמצעות שורות ועמודות 'עצלות'.
מידע נוסף על העקרונות הבסיסיים של פריסה ב-Compose ועל הרכיבים שמרכיבים את הרכיב הניתן לקישור.
האימות הוא פריסה יחסית נפוצה, כפי שמוצג באיור הבא.
פריסה במסך מלא היא פריסה נפוצה נוספת, שמשמשת במצב צפייה immersive.
אם אתם עובדים עם תצוגות במקום עם Compose, תוכלו להשתמש ב-ConstraintLayout כדי למקם את התצוגות בהתאם ליחסים בין תצוגות אחיות לבין הפריסה של ההורה, וכך ליצור פריסות גדולות ומורכבות.
ConstraintLayout מאפשרת לבצע build באופן מלא באמצעות גרירה ושחרור במקום לערוך את ה-XML באמצעות עורך הפריסה. מידע נוסף על פיתוח ממשק משתמש באמצעות עורך הפריסה
התאמה של פריסות
עיצוב מותאם הוא תהליך של תכנון פריסות שמתאימות למכשירים ולנקודות עצירה ספציפיות. בדרך כלל אנחנו מביאים בחשבון את רוחב המכשיר כדי לקבוע איפה צריך לשנות או להתאים את הפריסה. גם באינטרנט וגם ב-Android נעשה שימוש במושגי עיצוב רספונסיבי, כמו רשתות גמישות ותמונות, כדי ליצור פריסות שמתאימות טוב יותר להקשר שלהן.
להנחיות עיצוב בנושא התאמת פריסות למסכים מורחבים, אפשר לעיין במדריך למפתחים בנושא תמיכה במסכים בגדלים שונים ב-Compose ובדף Applying Layout ב-M3. אפשר גם להיכנס לגלריית הדפים הקנוניים למסכים גדולים של Android כדי לקבל השראה ולהטמיע פריסות למסכים גדולים.
לא כל אפליקציה צריכה להיות זמינה בכל גודל מסך, אבל כך המשתמשים יכולים ליהנות מיותר חופש בנוגע לארגונומיה, לנוחות השימוש ובאיכות האפליקציה.
- אתם יכולים לעצב מסכים מרכזיים (שמציגים את המושגים המרכזיים של האפליקציה) עם גודל הכיתה כנקודה לניתוק, כדי לשמש כקווים מנחים.
- לחלופין, תוכלו לתכנן תוכן כך שיגיב לשינויים בגודל המסך. לשם כך, צריך לציין איך התוכן צריך להיות מוגבל, מורחב או מותאם מחדש.
מידע נוסף על פריסות זמין בדף Material Design 3 (M3) Understanding layout.
רכיבי WebView
תצוגת Webview היא תצוגה שבה מוצגים דפי אינטרנט בתוך האפליקציה. ברוב המקרים, מומלץ להשתמש בדפדפן אינטרנט רגיל, כמו Chrome, כדי להעביר תוכן למשתמש. למידע נוסף על דפדפני אינטרנט, אפשר לעיין במדריך בנושא הפעלת דפדפן באמצעות כוונה.