מערכת Android פועלת במגוון רחב של מכשירים, צורות וגדלי מסך, ולכן תכנון של פריסות מדויקות ברמת הפיקסל לא רק שלא יעיל, אלא גם עלול לפגוע בחוויית המשתמש. במקום זאת, צריך לתכנן, לבנות ולחשוב בצורה גמישה. לאחרונה השקנו ממשקי API חדשים שמביאים איתם כמה מושגי עיצוב מוכרים שיעזרו לכם ליצור פריסות דינמיות.
אפליקציית Pawparazzi היא אפליקציה לדוגמה שממחישה את המושגים האלה. הוא תוכנן ונבנה כדי להדגיש עיצוב אדפטיבי באמצעות ממשקי API אדפטיביים, כמו Grid ו-Flexbox.
חשיבה אדפטיבית לא מתבססת רק על עיצוב עם נקודות עצירה, אלא גם על חשיבה על תוכן במאגרי מידע גמישים.
הכול הוא רשת!
היכולת לבנות תוכן על בסיס מוצק עוזרת לעצב אותו בצורה טובה, ויכולה לעזור לכם להחליט איך להתאים את התוכן. ב-Android יש רשת בסיסית של 8 dp שאפשר ליישר אליה את כל התוכן ברמת המיקרו.
הפריסה של Pawparazzi מבוססת על רשת היררכית, ולא על רשת מודולרית אחידה או על רשת עמודות חד-כיוונית. כלומר, העמודות והשורות שמרכיבות אותה נקבעות על סמך היררכיית התוכן.
ההחלטה לגבי סוג הרשת צריכה להתבסס על התוכן. מתחילים עם התוכן של האפליקציה וחושבים איך התוכן מקובץ. כך אפשר להגדיר את מבנה הפריסה הכולל. כדי לקבל מידע נוסף על חלונות, כדאי לעיין במאמרים רשתות ויחידות, מבנה התוכן ותחילת העבודה במחשב.
במשחק Pawparazzi המטרה העיקרית הייתה לראות את חיות המחמד של הצוות במגוון דרכים, החל מסקירה כללית של חיות המחמד, פרטים על חיות המחמד ואז חיות מחמד מדורגות. המשמעות היא שגלריית חיות המחמד תתפוס את חלונית התוכן הראשית וחלק גדול יותר מהרשת, ואחריה יוצגו רכיבי הניווט והסינון. כשיש יותר מקום, הגלריה יכולה להתרחב על פני יותר שורות, להציג יותר חיות מחמד ולהציג את הפרטים שלהן בו-זמנית. העיקרון הזה נקרא חשיפה, כלומר הצגת יותר תוכן בפריסות גדולות יותר.
התבוננות ביעד העיקרי של האפליקציה ובתוכן שלה עזרה לקבוע איך ומתי פריסת הרשת תצטרך להתאים את עצמה: אילו גדלים של חלונות, מיקום הציר וכיוונים של המכשיר.
מתוך רשת הפריסה, רשתות משנה עוזרות לבנות מבני תוכן גמישים יותר. הגלריות עצמן הן רשת. בגודל קומפקטי, נעשה שימוש בפריסה של 2 תמונות זו לצד זו.
פריסות של רשתות הן דו-כיווניות, כך שהתוכן יכול לזרום גם בכיוון אופקי וגם בכיוון אנכי.
אפשר להשתמש בפריסה הזו כדי ליצור פריסות מעניינות יותר או כדי ליצור היררכיה ויזואלית ברורה יותר, כמו 'חיית המחמד של השבוע', שבה משתמשים בפריסה כדי להציג את חיות המחמד שדורגו במקומות הראשונים. הפריסה יכולה להיות 2x4, אבל המיקום העליון משתרע על 2 עמודות ו-2 שורות.
כל הפעולות האלה מתבצעות באמצעות Grid API.
שינוי הגודל של הרכיבים
Grid מתייחס למבנה התוכן ברמת המאקרו והמיקרו, ו-Flexbox עוזר עם רכיבים שצריכים להגיב לתוכן שלהם. המאפיין הזה משמש לתוכן חד-כיווני, שבו נקבע רק כיוון אופקי או אנכי. לדוגמה, צ'יפים של מסננים יכולים להגיב לתוויות שלהם, ואזור המסננים יכול להתרחב בהתאם למספר המסננים. משתמשים בתכונה 'הצגה' במסכים גדולים יותר כדי להציג יותר מסננים בבת אחת.
שאילתות מורכבות
אנחנו מעצבים רשת פריסה ומשתמשים ב-grid וב-flexbox כדי לאפשר פריסה אדפטיבית במספר מסכים, ואפילו להתאים את הפריסה לטפסים ייחודיים כמו טפסים במכשירים מתקפלים. אבל מה לגבי הקשרים שונים של משתמשים? משתמשי Android יכולים להתחבר למסך או לחבר עכבר. המאפיין MediaQuery מאפשר לנו לקבל החלטות עיצוביות מורכבות כדי להתאים את האתר למשתמשים בכל ההקשרים.
ב-Pawparazzi, המשמעות הייתה ניצול היתרונות של קלט מדויק של מצביע, עם אזורי יעד קטנים יותר ותוכן צפוף יותר.
דוגמאות ל-AdaptiveUI ב-Android
כאן תוכלו למצוא עיצובים מעוררי השראה ומותאמים למכשירים עם מסכים גדולים. עיון בתבניות של ממשקי משתמש וחוויית משתמש לקטגוריות פופולריות של אפליקציות, כולל מדיה, יצירתיות, משחקים ועוד.
