מערכת 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
כאן תוכלו למצוא עיצובים מעוררי השראה ומותאמים למכשירים עם מסכים גדולים. עיון בתבניות של ממשקי משתמש וחוויית משתמש לקטגוריות פופולריות של אפליקציות, כולל מדיה, יצירתיות, משחקים ועוד.
