מערכת Android עוזרת לכם לפתח אפליקציה שפועלת בצורה טובה במגוון רחב של גדלי מסכים וגורמי צורה של מכשירים. התאימות הרחבה הזו עוזרת לכם לעצב אפליקציה אחת שתוכלו להפיץ באופן נרחב לכל המכשירים המטורגטים שלכם.
עם זאת, כדי להעניק למשתמשים את החוויה הכי טובה בכל תצורת מסך, צריך לבצע אופטימיזציה של הפריסות ושל רכיבי ממשק משתמש אחרים לגדלים שונים. ב-ChromeOS, אופטימיזציה של ממשק המשתמש מאפשרת לכם לנצל את שטח המסך הנוסף כדי להציע תכונות חדשות, להציג תוכן חדש או לשפר את חוויית המשתמש כדי להעמיק את האינטראקציה עם המשתמשים.
פריסות למסכים גדולים יותר
אם פיתחתם את האפליקציה לטלפונים סלולריים ואתם רוצים לשפר את העיצוב שלה ב-ChromeOS ובגורמי צורה אחרים של מסכים גדולים, כדאי להתחיל בביצוע שינויים קלים בפריסות, בגופנים ובמרווחים. בטאבלטים בגודל 7 אינץ' או במשחקים עם אזור משחק גדול, יכול להיות שההתאמות האלה יספיקו.
במסכים גדולים יותר, אפשר לעצב מחדש חלקים בממשק המשתמש כדי להחליף ממשק משתמש 'מתוח' בממשק משתמש יעיל עם חלונות מרובים, ניווט פשוט יותר ותוכן נוסף. במחקרים של Material של צוות Material Design יש דוגמאות לאופן שבו זה יכול להיראות. לדוגמה, אפשר לראות איך Reply מותאם לגדלים שונים של מסכים.
הנה כמה הצעות:
- לספק פריסות בהתאמה אישית למסכים הגדולים האלה. כדי לעשות את זה, אפשר להשתמש במימד הקצר ביותר של המסך או ברוחב ובגובה המינימליים שזמינים.
- תחשבו איך חוויית המשתמש והפריסות שלכם פועלות בסביבה שבה התצוגה לרוחב היא ברירת המחדל, כמו ChromeOS. כדאי להתאים את הפריסות כך שייראו טוב ויפעלו בצורה חלקה באוריינטציות האלה בהתאם לגודל החלון, או לספק פריסות ספציפיות לרוחב באמצעות מזהה המשאב land. בדף ניהול החלונות מוסבר על שינוי גודל החלון באופן דינמי ועל שיקולים נוספים לגבי מסכים גדולים.
- סרגלי ניווט תחתונים לא מותאמים היטב כשמגדילים את הרוחב של האפליקציה. מומלץ להעביר את הניווט לתפריט בצד ימין, שקל יותר לגשת אליו ויכול להציג יותר אפשרויות. הדוגמה של התשובה ממחישה את זה היטב.
- לפחות, כדאי להתאים אישית מאפיינים כמו גדלים של גופנים, שוליים ומרווחים כדי לשפר את השימוש במרחב ואת קריאות התוכן במסכים גדולים יותר. כדאי לחשוב איך הדברים ייראו כשהמשתמשים יהיו קצת יותר רחוקים מהמכשיר, כמו מכשיר ChromeOS או סביבות מחשב אחרות.
- לשנות את המיקום של אמצעי הבקרה בממשק המשתמש כך שהם יהיו נגישים למשתמשים כשהם משתמשים בעכבר או מחזיקים טאבלט, למשל בצדדים ולא במרכז.
- בדרך כלל, הריווח הפנימי של רכיבים בממשק המשתמש צריך להיות גדול יותר ב-ChromeOS ובמכשירים אחרים עם מסך גדול מאשר בטלפונים. השוליים והרווחים בין העמודות צריכים להשתנות בהתאם לגודל המסך.
- מוסיפים מספיק מרווחים לתוכן הטקסט כדי שהוא לא יהיה מיושר ישירות לאורך קצוות המסך. כדאי להשתמש בריווח פנימי של 16dp לפחות מסביב לתוכן שקרוב לקצוות המסך.
חשוב במיוחד לוודא שהפריסות לא נראות 'מתוחות' לרוחב המסך:
- שורות הטקסט לא צריכות להיות ארוכות מדי – מומלץ להשתמש בעד 100 תווים בכל שורה, והתוצאות הטובות ביותר מתקבלות כשמשתמשים ב-50 עד 75 תווים.
- אסור להשתמש ברוחב המסך המלא ברשימות ובתפריטים.
- כדי לנהל את הרוחב של רכיבים במסך, אפשר להשתמש בשוליים פנימיים או לעבור לממשק משתמש עם חלונות מרובים במכשירים עם מסכים גדולים יותר (ראו את הקטע הבא).
ניצול שטח המסך הנוסף
מכשירי ChromeOS מספקים שטח מסך גדול יותר לאפליקציה. כשמעצבים את ממשק המשתמש של האפליקציה למסכים גדולים יותר, כדאי לנצל את השטח הנוסף.
בדוגמאות של Reply ו-Rally, האפליקציות משתמשות בגודל המסך המוגדל בדרכים שונות. ב-Reply יש יותר רווחים בין השורות כדי שהמראה יהיה נקי יותר, וב-Rally מוצגים יותר נתונים כדי לצמצם את הצורך בגלילה ובהקשות.
כדאי להתחיל בבדיקה של דברים שאולי מוסתרים מהמשתמש, ולראות איך אפשר להפוך אותם לגלויים. יכול להיות שיוצג מידע נוסף על פריט, שתפריטים שמוסתרים מאחורי לחיצה ימנית או לחיצה ארוכה יהיו גלויים, או שיוצגו אפשרויות ניווט שונות או מפורטות יותר, כי עכשיו יש לכם אזור ניווט גדול יותר בצד ימין. אלה שיפורים משמעותיים בנוחות השימוש שיכולים לשפר את חוויית המשתמש ולתת לאפליקציה מראה שדומה יותר למראה של אפליקציה במחשב, בלי שתצטרכו לעצב מחדש את חוויית השימוש הנוכחית.
הנה כמה המלצות לאפליקציה שלכם:
- המותג שלכם יקבע את הכיוון שאליו כדאי לכם לפנות כשאתם חושבים על גדלי המסכים השונים האלה. ההחלטה מה להציג למשתמש ומה לתת לו עדיפות תלויה בסוגי התהליכים שעוברים המשתמשים ובמאפיינים הנפוצים ביותר. כדי לקבל השראה, אפשר לעיין במחקרים על חומרים ולראות איך כל מוצר מגיב בצורה שונה למסך גדול יותר.
- כדאי לחשוב איך העיצוב של האפליקציה צריך להתנהג באמצעות מערכת רשת רספונסיבית, ואיך התוכן, הניווט והאפשרויות צריכים לנוע ככל שהמסך גדל.
- מחליטים באילו גדלי מסך תשתמשו בפריסה שונה, ואז מספקים את הפריסות השונות בדליים המתאימים של גדלי חלונות (כמו גדול/גדול במיוחד) או ברוחבי חלונות מינימליים (כמו sw600dp/sw720). חשוב לזכור שבמעבר בין הפריסות האלה, ההקשר הכללי שבו המשתמש נמצא לא צריך להשתנות, ומומלץ לשמור את כל מצב המשתמש (מיקום הגלילה, הטקסט שנכתב וכו').
שימוש בנכסים שמיועדים לדחיסות גבוהות ולמסכים גדולים יותר
כדי שהאפליקציה תיראה הכי טוב, צריך לספק סמלים ונכסי מפת סיביות אחרים לכל צפיפות בטווח שנתמך בדרך כלל על ידי ChromeOS. במיוחד, צריך לעצב את הסמלים של סרגל האפליקציות, ההתראות ומרכז האפליקציות בהתאם להנחיות לגבי סמלים ולספק אותם בפורמטים וקטוריים כדי שניתן יהיה לשנות את הגודל שלהם בצורה חלקה בהתאם למסכים השונים שבהם האפליקציה תופיע.
למידע נוסף על VectorDrawables ונכסי וקטור ב-Android, כדאי לקרוא את הפוסט הזה בבלוג של ניק באצ'ר.
שינוי גודל הגופן ומשטחי המגע
כדי שהאפליקציה תהיה שמישה ב-ChromeOS ובמסכים עם רמת דחיסות גבוהה יותר, צריך לשנות את גודל הגופן ואת אזורי המגע בממשק המשתמש לכל תצורות המסך שמיועדות לאפליקציה. אפשר לשנות את גודל הגופן באמצעות מאפיינים שניתנים לעיצוב או משאבי מאפיינים, ואפשר לשנות את אזורי המגע באמצעות פריסות ורכיבי bitmap drawable, כמו שצוין קודם.
כמה דברים שכדאי לקחת בחשבון:
- הטקסט לא צריך להיות גדול מדי או קטן מדי במסכים גדולים יותר וברזולוציות גבוהות יותר. חשוב לוודא שהגודל של התוויות מתאים לרכיבי ממשק המשתמש שהן מתייחסות אליהם, ולוודא שאין מעברי שורה לא תקינים בתוויות, בכותרות וברכיבים אחרים.
- גודל היעד המומלץ למגע ברכיבים במסך הוא 48dp. יכול להיות שיהיה צורך לבצע התאמות בממשק המשתמש במסך גדול יותר. במאמר שיטות לשינוי המרווחים אפשר לקרוא מידע נוסף על משטחי מגע ועל המרווחים בין פריטים כשגודל המסך משתנה. ההמלצות האלה עומדות גם בהנחיות המינימום לנגישות.
-
אם אפשר, כשמדובר בסמלים קטנים, כדאי להרחיב את האזור שאפשר לגעת בו ליותר מ-48dp באמצעות
TouchDelegateאו פשוט למרכז את הסמל בתוך הלחצן השקוף.