ה-framework של Android Auto עם תגובה רספונסיבית (AR) מתאים את הפריסות של האפליקציות לכל גודל מסך ברכב.
גם ממשק המשתמש של האפליקציות ותכונות אחרות, כמו גלישה במדיה ופעולות הפעלה, מותאמים באופן אוטומטי ב-Android Auto – מכוניות תואמות לאפליקציות שמוקרנות מהטלפון של המשתמש.
בקצרה
- פריסות מתאימות את עצמן לגודל המסך בנקודות עצירה ספציפיות
- החלה של מרווח פנימי במרווחים של 8dp
- יש להקפיד על מרווח של 12dp בין רכיבים קטנים יותר
איך נקבעת הפריסה
מסגרת ה-AR של Android Auto מבוססת גם על עיצוב דינמי וגם על עיצוב רספונסיבי:
- עיצוב רספונסיבי (גודל המסך המדויק קובע את הפריסה) משמש לשוליים הימניים והשמאליים
- הפריסה משמשת בעיצוב דינמי (הפריסה של גובה המסך נקבעים לפי טווחים של גובה ורוחב)
הפריסה נקבעת באמצעות מדידות שנקראות נקודות עצירה (breakpoint). נקודות עצירה הן מדידות של גובה ורוחב מסך המוגדרות באופן אסטרטגי, שקובעות מתי להציג פריסה ספציפית. לכל טווח של נקודות עצירה (breakpoint), הפריסה משתנה בהתאם לגודל המסך ולכיוון שלו.
דינמי
בעיצוב דינמי המערכת משתמשת בנקודות עצירה (breakpoint) כדי לקבוע את הפריסה של המסך. תוצג פריסה ספציפית של טווח מוגדר של גודלי מסכים (למשל, מסכים שרוחבם קטן מ-1280dp).
מודעות רספונסיבית
עיצוב רספונסיבי מתאים את הפריסה באופן פרופורציונלי לגודל המסך המדויק. ברכיבים יש אזורים גמישים שניתן להרחיב או לכווץ לגודל המתאים למסך של כל מכונית.נקודות עצירה מותאמות
המערכת של Android Auto מסתמכת על נקודות עצירה מותאמות כדי לקבוע את פריסת המסך. החישוב מתבצע לפי גודל חלון האפליקציה ולא לפי המסך כולו.
שוליים רספונסיביות
ב-Android Auto נעשה שימוש בשוליים רספונסיביים על סמך הגודל של מסך הרכב כולו. השוליים השמאליים והימניים משתנים בהתאם ל-12% מרוחב המסך, ולרוב הם כוללים סרגלי גלילה ופקדי ניווט. השטח הנותר במסך, שנקרא 'לוח הציור של האפליקציה', מכיל את תוכן האפליקציה.
כדי לפנות יותר מקום, אפשר להסיר את השוליים הימניים במסכים קטנים יותר. האפליקציה יכולה להשתמש במרחב המשותף הזה כאזור משני להצגת מידע נוסף.
רשת הפריסה
פריסות של Android Auto מיישרות בין רכיבי ממשק המשתמש ברשת של 8dp, כאשר חלק מהרכיבים קטנים יותר מיושרים לרשת של 4dp.
מרווח
מרווח פנימי מתייחס לרווח בין רכיבי ממשק המשתמש. קנה המידה של המרווח הפנימי של Android Auto מופעל בכפולות של 8dp, עד למרווח פנימי של 96dp. כמו כן, יש להוסיף כמויות גדולות של מרווח פנימי בכפולות של 8dp.
בטבלה הזו מפורטים ערכי מרווח פנימי טיפוסיים שמופיעים בממשק המשתמש האוטומטי. מרווחי הגודל מוצגים בסדר הולך וגדל, ומסומנים בתוויות שמתחילות באות P:
| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |
|---|---|---|---|---|---|---|---|---|
| 4dp | 8dp | 12dp | 16dp | 24dp | 32dp | 48dp | 64dp | 96dp |
מרווח לרכיבים קטנים יותר
כדי לשפר את היישור ולאפשר ריווח מספיק, ייתכן שרכיבים קטנים יותר ישתמשו ב-12dp של מרווח פנימי.
שורות מקשים
קווי מפתח הם מדדים שמארגנים ממשק משתמש על ידי הצגת המקומות שבהם צריך למקם רכיבים ורכיבים בצורה אופקית (לאורך ציר ה-X). הם מסומנים בתוויות שמתחילות באות 'KL'.
אפשר למקם קווי מפתח בכל מקום בפריסה. אפשר להשתמש בהם כדי לציין את המרחק בין שני קצוות אנכיים (של רכיבים, רכיבים או המסך עצמו). רכיבים ורכיבים מיישרים את הקצה השמאלי או הימני לשורת המפתח הקרובה ביותר.
מדידה באמצעות קווי מקשים
קווי המקשים משתנים בהתאם לרוחב המסך, וכך מאפשרים לרכיבים בממשק המשתמש לשנות את גודל המיקום באופן עקבי במסכים בגדלים שונים.
מומלץ להשתמש בקווי המפתח הבאים שמתאימים למגוון גדלים של מסכים. הם מיוצגים על ידי תוויות שמסומנות בתווית 'KL(n)'. הם מוצגים לפי סדר הגדלה של שורת המפתח:
| KL(n) | מסכים צרים (0-600dp) |
מסכים רגילים (600-930dp) |
מסכים רחבים (930-1280dp) |
מסכים רחבים במיוחד (1280dp+ ) |
|---|---|---|---|---|
| KL0 | 16dp | 24dp | 24dp | 32dp |
| KL1 | 24dp | 32dp | 32dp | 48dp |
| KL2 | 96dp | 112dp | 112dp | לא רלוונטי |
| KL3 | 112dp | 128dp | 128dp | 152dp |
| KL4 | 148dp | 168dp | 168dp | לא רלוונטי |