אפליקציות שמשתמשות בפריסות רספונסיביות ומתאימות באופן אוטומטי לגדלים שונים של מסכים מציעות ערך מוסף למשתמשים ומספקות חוויית משתמש יעילה ומעניינת יותר.
פריסות רספונסיביות מגדירות באופן דינמי את הפורמט והמיקום של רכיבים כמו לחצנים, שדות טקסט וחלונות דו-שיח, כדי לספק חוויית משתמש אופטימלית. השתמשו בשיטות של עיצוב רספונסיבי כדי להציע למשתמשים באפליקציה ערך מוסף באופן אוטומטי במסכים גדולים יותר. בין אם מדובר בטקסט נוסף שגלוי במבט מהיר, בפעולות נוספות במסך או ביעדי הקשה גדולים ונגישים יותר, שיטות עיצוב דינמיות מספקות חוויה משופרת למשתמשים במסכים גדולים יותר.
הוספת ערך באמצעות עיצוב רספונסיבי
מה צריך לעשות
- שימוש בספריית הרכיבים של M3 Compose, שכוללת התנהגות רספונסיבית ומותאמת מובנית.
- כדאי להשתמש בפריסות רספונסיביות, שמתאימות את עצמן באופן אוטומטי וחלק למרחב הזמין במסכים בגדלים שונים.
מה אסור לעשות
- אפשר למתוח רכיבי ממשק משתמש – כולל שדות טקסט, לחצנים ותיבות דו-שיח – כדי למלא את החלל העודף.
- להגדיל את גודל הגופנים, אלא אם הם משמשים בעיקר למטרות גרפיות.
פיתוח אפליקציות ותגי מידע רספונסיביים ל-Wear OS
ממשקי משתמש רספונסיביים מתרחבים ומשתנים כדי לנצל בצורה הטובה ביותר את כל שטח המסך הזמין, ללא קשר לגודל המסך שבו הם מוצגים.
כשאתם מעצבים פריסות עם תגובה דינמית במסך עגול, לכל תצוגה עם גלילה ותצוגה ללא גלילה יש דרישות ייחודיות כדי לשמור על התאמת הגודל של רכיבי ממשק המשתמש ולשמור על פריסה ועל הרכב מאוזנים. בתצוגות גלילה, מומלץ להשתמש באחוזים כדי להגדיר את כל השוליים העליונים, התחתונים והצדדיים, כדי למנוע חיתוך של אלמנטים ולספק שינוי פרופורציונלי של הגודל שלהם. בתצוגות שלא ניתן לגלול בהן, צריך להשתמש באחוזים ובמגבלות אנכיות לכל השוליים. כך התוכן הראשי באמצע יוכל להתרחב ולמלא את האזור הזמין.
תצוגות נגללות
כדי למנוע חיתוך של רכיבים ולאפשר שינוי פרופורציונלי של הגודל שלהם, צריך להגדיר את כל המרווחים העליונים, התחתונים והצדדיים באחוזים.
צפיות ללא גלילה
צריך להגדיר את כל השוליים באחוזים, ואת האילוצים האנכיים צריך להגדיר כך שהתוכן הראשי במרכז יוכל להתמתח ולמלא את האזור הזמין.
דוגמאות
בתמונות הבאות מוצגות דוגמאות לאפליקציות עם תגובה מהירה שעברו אופטימיזציה.
לחצנים שמתמקמים בחלק העליון של המסך
רשימת כרטיסים
רשימה של מתגים וכפתורים
אריח עם כרטיסי תמונות
רשימת כרטיסים עם תמונות
אריח עם גרף
