בכרטיסי המידע אפשר לקבל גישה מהירה למידע ולפעולות שהמשתמשים צריכים כדי לבצע משימות. בהחלקה על פני השעון, המשתמש יכול לראות את ההתקדמות שלו לעבר יעדי הכושר, לבדוק את מזג האוויר ועוד. להפעיל אפליקציה או לבצע במהירות משימות חשובות מהמשבצות.
יצירת עיצובים רספונסיביים ומותאמים
כדי לעזור לכם להתאים את פריסות העיצוב לגדלים גדולים יותר של מסכים, עדכנו את ההתנהגות של הפריסות והרכיבים שלנו כך שתהיה להם התנהגות רספונסיבית מובנית, כולל שוליים וריווח מבוססי אחוזים.
אם אתם משתמשים בתבניות ProtoLayout שלנו, תוכלו לקבל את העדכונים האלה באופן אוטומטי דרך גרסת הבטא האחרונה של ספריית Wear ProtoLayout Jetpack. בנוסף, צריך לספק פריסות רק אם הוספתם תוכן או רכיבים נוספים אחרי נקודת עצירה של גודל המסך. לקבלת הנחיות והמלצות מלאות לגבי ניצול היתרונות של מסך גדול יותר, אפשר לעיין בהנחיות שלנו לגבי חלונות צמודים. למשבצות יש גובה מסך קבוע, ולכן התאמנו את הריווח כדי למקסם את שטח המסך המוגבל בלי ליצור חיתוך לא רצוי.
בודקים שהרכיבים ממלאים את הרוחב הזמין
כל הרכיבים צריכים להיות רספונסיביים. אם מגדירים את הגובה והרוחב לערך expand, הם יתפרסו על כל השטח הזמין. צריך להוסיף את השוליים הנדרשים כדי למנוע חיתוך של התוכן בגלל המסך המעוגל.
יצירת עיצובים מותאמים ומובחנים
כדי לנצל את המרחב הנוסף במסכים גדולים יותר, מוסיפים נקודת עצירה (breakpoint) בגודל 225dp. נקודת עצירה כזו מאפשרת לכם להציג תוכן נוסף, לכלול עוד לחצנים או נתונים, או לשנות את הפריסה כך שתתאים יותר למסך גדול יותר.
לכן צריך ליצור עיצוב שונה לכל נקודת עצירה. העיצוב למסך גדול יותר (225 dp ומעלה) יכול לכלול את האלמנטים הנוספים הבאים:
הצגת משבצת הכותרת שהוסתרה קודם
מומלץ לעשות את זה בפריסות עם שתי שורות לפני נקודת עצירה, שבה צריך להסיר את משבצת הכותרת כדי להבטיח את גודל היעד המינימלי של 48dp להקשה.
הגדלת הגודל או שינוי המצב של הרכיבים הקיימים
אפשר לעשות את זה כדי להציג יותר פרטים או כדי שהתוכן יהיה קל יותר להבנה במבט חטוף.
הוספת משבצות לרכיבים בפריסה הנוכחית
הוספת רכיבים מאפשרת להציג יותר אפשרויות או פרטים נוספים בפריסה. עם זאת, חשוב לוודא שהתוכן עדיין קל לקריאה מהירה.
הוספת תוכן נוסף בתחתית
במקרים מסוימים, עדיף להוסיף לחצני פעולה או תוכן בקטע התחתון, במקום להוסיף רכיבים במשבצת הראשית.
שימו לב: גודל תצוגה גדול יותר אף פעם לא צריך להציג פחות מידע מגודל תצוגה קטן יותר. זה רלוונטי במיוחד להתנהגויות מותאמות אישית שנוספו בנקודת עצירה.
דוגמה נפוצה לכך היא כשגודל הרכיבים או הטקסט גדל מעבר לנקודת עצירה, ובסופו של דבר מוצג פחות תוכן במסכים גדולים יותר. במסכים, ככל שהגודל גדול יותר, תמיד צריך להיות ערך מוסף גדול יותר.
התנהגות רספונסיבית ומותאמת
ההתנהגות הרספונסיבית וההסתגלות תלויה בשלושת המשבצות (הקטעים) של הפריסה.
משבצת לסמל האפליקציה ולשם שלה
אין שינוי בהתנהגות של סמל האפליקציה שהמערכת מספקת. משבצת הכותרת מותאמת אוטומטית לגודל המסך הרחב יותר, ומציגה תווים נוספים. יש שוליים פנימיים יחסיים (באחוזים) בחלק העליון כדי למנוע חיתוך כשהמסך גדל.
המשבצת הראשית (רכיבים)
כל הרכיבים במיקום המודעה הראשי צריכים להיות מוגדרים עם רוחב וגובה של expand כדי שהם יותאמו באופן אוטומטי לגודל המסך הרחב יותר. יש שוליים פנימיים יחסיים (באחוזים) בקטע הראשי של המשבצת – ובמקרים מסוימים בכל שורה במשבצת הזו – כדי למנוע חיתוך כשהגודל של המסך גדל. אם משתמשים בשילוב של רדיוס פינות ופריסה, יכול להיות שיהיה צורך בשוליים גדולים יותר במשבצת הראשית.
המשבצת התחתונה
אין שינוי בהתנהגות של הלחצן או הטקסט בתחתית, אבל הרוחב של הלחצן ושל תיבות הטקסט מותאם אוטומטית לגודל המסך הרחב יותר, ויש יותר מקום לתווים. יש שוליים פנימיים יחסיים (באחוזים) בחלק התחתון של משבצת המודעה כדי למנוע חיתוך כשהגודל של המסך גדל. אם אין משבצת תחתונה, שוליים שמוגדרים כברירת מחדל מתווספים באופן אוטומטי.
יצירת חוויות שונות
פריסה אחת שניתנת להתאמה אישית מלאה, עם 60 או יותר פרמוטציות שמוטמעות בה, מאפשרת התאמה אישית כמעט ללא הגבלה. האריחים מבוססים על מערכת של משבצות, כך שאפשר להחליף משבצת בפריסה הקנונית בכל תוכן או רכיב, ולהגדיר את הרכיב לאחד מהווריאציות הרבות ולשילובי הצבעים. במקרה כזה, חשוב לשמור על התנהגות רספונסיבית ולפעול לפי המלצות העיצוב שלנו.
ההתאמות האישיות האלה צריכות להיות מוגבלות, ולא לחרוג מתבנית האריח. הסיבה לכך היא לשמור על עקביות כשמשתמשים גוללים בין כרטיסי האפליקציות במכשירים שלהם עם Wear OS.