עיצוב מותאם הוא שיטה לעיצוב פריסות שמותאמות לנקודות עצירה ולמכשירים ספציפיים.
כדי ליישם פריסות מותאמות בצורה יעילה:
קודם, צריך להתחשב ברוחב של מחלקת החלון של המכשיר כדי לקבוע את השינויים בפריסה, ואז להתאים את הגובה. תמיכה בגדלים שונים של מסכים.
ב-Android נעשה שימוש במושגים של עיצוב רספונסיבי, בדומה לפיתוח אתרים, באמצעות רשתות ותמונות גמישות ליצירת פריסות שמגיבות ביעילות להקשר שלהן.
מאפשרים לפריסות להגיב למגוון גדלים באמצעות שיטות מותאמות: שינוי מיקום, חשיפה, שינוי הצגה.
לא מומלץ לנעול את האפליקציה לתצוגה לאורך בלבד. הפעולה הזו גורמת להוספת פסים שחורים בצדדים כשמשנים את הגודל של האפליקציה.
מה אסור לעשות
לקבלת הנחיות עיצוב לגבי התאמת פריסות לגדלים מורחבים של מסכים, אפשר לקרוא את המאמר תמיכה בגדלים שונים של מסכים במדריך למפתחים ב-Compose ואת הדף החלת פריסה ב-M3. כדי לקבל השראה וללמוד איך להטמיע פריסות למסכים גדולים, אפשר לעיין גם בגלריה של הפריסות המומלצות למסכים גדולים ב-Android.
חשיבה דינמית
הפריסה האדפטיבית צריכה להיות ברירת המחדל כשמעצבים את האפליקציה. שוק הניידים של Android מתפתח כל הזמן, ולכן אי אפשר להתייחס לניידים רק כאל טלפונים. במקום זאת, צריך לכלול את כל המכשירים, החל מטלפונים, מכשירים מתקפלים, טאבלטים וכל מה שביניהם.
יכול להיות שחלק מהתכונות ומקרים לשימוש לא יתאימו לכל גודל מסך או לכל סוג מכשיר. עיצוב אדפטיבי מאפשר למשתמשים יותר חופש מבחינת ארגונומיה, שימושיות ואיכות האפליקציה.
שיטות ואיכות
אפשר להתחיל בעיצוב של מסכים מרכזיים (שמעבירים את הרעיונות החשובים או את האפליקציה שלכם) עם גדלים של חלונות כנקודות עצירה, כדי שישמשו כהנחיות לשאר האפליקציה. חוויות המשתמש המרכזיות האלה יכולות להדגיש את האיכויות המובחנות של התאמה ושל גורם צורה. אפשר גם לעצב את התוכן כך שיהיה רספונסיבי ברמת הבסיס, על ידי ציון האופן שבו התוכן צריך להיות מוגבל, להתרחב או לעבור סידור מחדש.
בדוגמה הזו, הניווט והתוכן משתנים, מתרחבים ומוקטנים כדי לשפר את הניווט הארגונומי. רשת הפריסה מתרחבת מאוריינטציה אנכית למספר עמודות. הכתובת בסרגל האפליקציות והמסננים משתנים ומתרחבים כדי להתאים לרשת הפריסה.
מה מומלץ לעשות
מה אסור לעשות
מה מומלץ לעשות
מה מומלץ לעשות
מה אסור לעשות
מוודאים שהקלט והלחצנים לא נמתחים.
כדאי לחשוב במונחים של קונטיינרים וחלונות.
משתמשים במושג ההכלה של חלוניות כדי לקבץ תוכן לפריסות דינמיות. לדוגמה, הדוגמה שבה נעשה שימוש היא מסך פרטים, חלונית אחת שאפשר להציג בפריסת רשימה-פרטים.
בגודל קומפקטי, הפריסה צריכה להיות עם חלונית אחת.
ב-Medium אפשר להשתמש בפריסות של חלונית אחת או שתיים.
במסכים גדולים וגדולים במיוחד אפשר להשתמש בפריסות של כמה חלוניות.
משתמשים במאגרי מידע פנימיים ובמאגרי מידע ויזואליים כדי לקבץ רכיבים. החלוניות יכולות להיכנס, להיעלם, להתרחב, להיות מוגבלות או לקפוץ. השימוש בחלוניות מקל על העיצוב בכל המכשירים הניידים.
אמנם חלונות לא חיוניים במסכים גדולים, אבל עדיין כדאי לחשוב על תוכן בקבוצות של קונטיינרים כדי לשמור על גמישות.
מאפשרים לאלמנטים לזוז ולשנות את הסדר שלהם על ידי התמקדות באופן שבו הם מותאמים לרשת. כדאי לשקול שינוי אנכי של אלמנטים ולשלב אותו עם אילוצים ושינויים באופן ההצגה.
כדאי לשים לב להיקף ולכמות התוכן שמוצגים.
רשת קטנה של סרטונים בטלפון הופכת לצפופה מדי בטאבלט. צריך לעדכן את קנה המידה של רכיב ממשק המשתמש על סמך גודל המסך, הצפיפות והקלט.
אפליקציה איכותית צריכה לעמוד בדרישות של רמת המינוי המובחנת באפליקציית הליבה ובהנחיות בנושא איכות במסכים גדולים.
מידע נוסף על פריסות זמין בדף בנושא פריסות ב-Material Design 3 (M3).
כדאי לנצל את היתרונות של גדלים ייחודיים של גורמי צורה.
אל תשכחו גם מסכים קטנים יותר ויחסי גובה-רוחב שונים, כי טלפונים עם Android מגיעים במגוון גדלים, ובטלפונים מתקפלים יכול להיות מסך קטן בכיסוי שבו אפשר להציג את האפליקציה.
בפריסות שמבוססות על פקדים, כמו נגני מדיה, מאפשרים לפקדים להתאים את עצמם ולתוכן להיחשף.
כדי לעזור למשתמשים להסתגל, אפשר להשתמש ברכיב עוגן, כמו לחצן הפעלה גדול, כדי להתאים את התוכן מסביב, והתמונה המרכזית הופכת לרקע במסך הכיסוי.
מעבר לסיווג לפי גודל
למרות שגודל החלון הוא גורם נפוץ בעיצוב רספונסיבי, האפליקציה צריכה להיות מוכנה גם למקרים שבהם המשתמשים מחברים מסכים והתקני קלט, צופים במסכים במרחקים שונים ומשנים את המיקום של המכשיר. אפשר לבדוק את השינויים האלה באמצעות ה-API mediaQuery, שמאפשר להוסיף ניואנסים כשמעצבים את האופן שבו האפליקציה מתאימה רכיבי ממשק משתמש ספציפיים לתרחישי שימוש מסוימים. מומלץ להתאים את העיצוב של האפליקציה ברמת הרכיב או החלונית, ולא לעצב מסכים שלמים לפי גודל, קלט, גורם צורה ומיקום.
מידע נוסף על אינטראקציה עם קלט זמין במדריכים בנושא אינטראקציה עם חוויית השימוש במחשב.
כדאי לעיין במקרה לדוגמה Pawparrazzi, שנבנה ועוצב באמצעות ממשקי ה-API האדפטיביים העדכניים והנחיות העיצוב העדכניות.
