העיצוב של ממשק המשתמש של האפליקציה לא קשור לגורם צורה מסוים של מכשיר. אפליקציות Android צריכות להתאים למספר סוגים שונים של מכשירים, החל מטלפונים ניידים בגודל 4 אינץ' ועד לטלוויזיות בגודל 50 אינץ' ומכשירי ChromeOS עם חלונות שניתן לשנות את הגודל שלהם.
ממשק המשתמש של האפליקציה מצויר בתוך חלון שאפשר לשנות את הגודל שלו לפי הצורך. אפשר להשתמש במאפייני הסיווג של המשאבים כדי לספק פריסות שונות לגדלים שונים של חלונות. ההבדלים האלה יכולים לנבוע ממגבלות בגודל המסך של המכשיר, או מהמשתמש שמשתמש במצב 'חלונות מרובים' כדי לשנות את גודל החלון.
עיצוב תוכן רספונסיבי
חשוב לספק חוויה עשירה לכל המשתמשים, ולכן כדאי לנצל את כל שטח המסך הזמין בכל מסך באפליקציה.
לדוגמה, אפליקציה שפועלת בחלון שמשתרע על כל רוחב המסך בטלפון עשויה להסתיר פרטים של קטע תוכן כשעוברים למצב של כמה חלונות, ולהרחיב את ממשק המשתמש שלה כדי להציג יותר תוכן כשהיא פועלת בחלון שמשתרע על כל רוחב המסך של מכשיר ChromeOS.
בנוסף למתן מענה לציפיות של המשתמשים, בדרך כלל צריך להציג יותר תוכן במכשירים גדולים יותר כדי למנוע הרבה שטח לבן או אינטראקציות לא נוחות. באיור הבא אפשר לראות כמה מהבעיות שעשויות להתעורר כשמתאימים את העיצוב של ממשק המשתמש לחלון גדול יותר:
איור 1. אם אין מספיק תוכן בחלונות רחבים, נוצרים שטחים ריקים לא נוחים ורצועות טקסט ארוכות מדי.
מידע נוסף על תכנון חוויות ניווט רספונסיביות זמין במאמר ניווט בממשקי משתמש רספונסיביים.
מתן חוויות משתמש מותאמות אישית
חשוב לספק חוויות ייחודיות שאינן רק הרחבת התצוגה של התוכן כדי למלא את המרחב הזמין. אתם יכולים להתאים אישית ממשקי משתמש כדי לספק את חוויית המשתמש האידיאלית לגדלי חלון נתונים, גם באמצעות פריסות וווידג'טים שונים לגמרי.
באיור 2, BottomNavigationView משמש לניווט ברמה העליונה כשיש מספיק מקום אנכי לכך. כשהגודל של החלון מצטמצם, כפי שמוצג בצד שמאל של האיור, הניווט ברמה העליונה מיושם באמצעות DrawerLayout.
איור 2. כשהמקום האנכי מוגבל, סרגל הניווט התחתון מוחלף בחלונית ניווט.
ריכזנו כאן כמה דוגמאות נוספות:
Toolbarיכול להציג או להסתיר את הפריטים בתפריט הפעולות בהתאם למרחב הזמין.RecyclerView.LayoutManagerיכול לשנות את מספר התאים כדי לנצל את גודל החלון במלואו- בתצוגות בהתאמה אישית יש לכם יותר מקום להציג פרטים, כך שתוכלו להציג יותר פרטים.
כל הדרכים האלה יעזרו לכם להבטיח שהמשתמשים ייהנו מחוויית שימוש מעולה בכל מקום שבו הם מריצים את האפליקציה.
דוגמאות נוספות לתבניות של עיצוב רספונסיבי ולרעיונות לפריסות מותאמות אישית זמינות ב-material.io.