עיצוב למסכים גדולים כבר מההתחלה

מכשירי Android מגיעים במגוון גורמי צורה - טלפונים, טאבלטים, מכשירים מתקפלים, מכשירי ChromeOS – עם מגוון רחב של גודלי מסכים. Android תומך בהרבה מצבי תצוגה, כולל 'ריבוי חלונות', 'ריבוי מסכים', 'פריסה גמישה' תמונה בתוך תמונה. מכשירים מתקפלים יכולים להיות במצבים או מצבים שונים, כמו שולחני או ספר.

כשמתחילים לעצב, כדאי להביא בחשבון תרחישים שונים לדוגמה של האפליקציה. עבור דוגמה:

  • מכשירים עם מסך גדול מעניקים למשתמשים יותר מקום לאינטראקציה עם אפליקציית המדיה התוכן בדרכים שונות.

  • המשתמשים יכולים לבצע מספר משימות בו-זמנית בזמן הצפייה בסרטון בתצורה של ריבוי חלונות, נצלו את המסך הגדול כדי לבצע עריכות מורכבות יותר לאחר הצילום תמונה.

  • משתמשים עשויים להשתמש בטאבלט כדי להישאר מחוברים לשיחות וידאו ולראות את חברים ובני משפחה בפירוט רב יותר. האפליקציה יכולה להציג הקשר עשיר יותר לגבי כותרת או סצנה בשכבת-על מותאמת אישית להפעלה, או להציע אפשרויות שליטה נוספות במסך.

  • קרוסלות בתצוגת גלישה יכולות לכלול מגוון רחב יותר כדי ליצור מראה מושך יותר, או שאפליקציית המדיה שלך יכולה לשמור על רמת העניין של המשתמשים על ידי הצעת פיד שניתן לעיין בו זה לצד זה לצד ההפעלה.

חשוב לזכור שהקוד של אפליקציית המדיה פועל בטלפון רגיל, מכשיר מתקפל, טאבלט ומכשירי ChromeOS, לכן צריך לעצב במסכים מראש כבר מתחילת תהליך הפיתוח של האפליקציה. אפשר לקבל מידע נוסף ודוגמאות חזותיות, ראו גלריית מסך גדול.

הגדרת אפליקציית המדיה רספונסיבית כברירת מחדל

פריסת האפליקציה יכולה לעזור לך להימנע מחוויות משתמש לא תקינות באפליקציית המדיה אפשרות להתאמה בין טלפונים, טאבלטים, מחשבים מתקפלים ומכשירי ChromeOS.

האפליקציה צריכה להתאים למסכים בגדלים שונים, ואת גורמי הצורה. פריסה שמשתנה בהתאם למסך שיש לו מקום. אפשר לקרוא מידע נוסף במאמר תמיכה בגדלים שונים של מסכים.

עיצוב בהתאם להנחיות

איכות האפליקציות העיקרית היא הבסיס לכל האפליקציות ל-Android, ללא קשר לגודל התצוגה, את מצב המכשיר או שיקולים אחרים שספציפיים למכשיר. האפליקציה צריכה לעמוד בדרישות הדרישות הבסיסיות האלה לפני שמתחילים לעצב מסך גדול. עבור מידע נוסף זמין במאמר איכות אפליקציית הליבה.

האפליקציה שלך צריכה לספק חוויית משתמש מצוינת ללא קשר לצורת המכשיר גורם, גודל מסך, מצב תצוגה או מצב, לכן עצב את האפליקציה בהתאם את ההנחיות הבאות בדרגה 1, 2 ו-3.

ההנחיות מגדירות מערך מקיף של דרישות איכות עבור רוב סוגים של אפליקציות ל-Android.

רמה 3:

ברמה הבסיסית הזו, האפליקציה עדיין חייבת לפעול בהתאם לממשק המשתמש ולגרפיקה בדרישות שלנו. האפליקציה מוכנה למסך גדול, והמשתמשים יכולים להשלים זורמים, אבל חוויית המשתמש לא אופטימלית.

פריסת האפליקציה לא יכולה להיות אידיאלית, אבל כן פועלת במסך מלא או בחלון מלא במצב ריבוי חלונות. הוא לא בפורמט letterbox ולא פועל בתאימות במצב תצוגה. האפליקציה מספקת תמיכה בסיסית למכשירי קלט חיצוניים, כולל מקלדת, עכבר ומשטח מגע. מידע נוסף זמין במאמר מוכן למסך גדול.

רמה 2:

כאן מוטמעת באפליקציה אופטימיזציות פריסה למסכים מכל הגדלים ולכל המכשירים האישיות, יחד עם תמיכה משופרת בהתקני קלט חיצוניים. עבור פרטים נוספים זמינים בקטע אופטימיזציה של מסך גדול.

רמה 1:

זוהי רמת התמיכה הטובה ביותר והיא הכי מצוינת למשתמש באפליקציה שלך, כי היא מציינת תכונות ויכולות פרימיום.

במקרים הרלוונטיים, האפליקציה תומכת בריבוי משימות, בתנוחות מתקפלות, בגרירה וב בקלט סטיילוס. ברמה הזו, האפליקציות שונות מאוד, אז משלמים לשים לב להנחיות כמו ריבוי משימות מתקפלות. אפשר לקרוא מידע נוסף במאמר מסך גדול עם הבחנה.

פריסות שעברו אופטימיזציה

מנצלים את השטח המוגדל של מסכים גדולים ללא פורמט letterbox (עקב הגבלת הכיוון) או מתיחה. על ידי אופטימיזציה של פריסת האפליקציה למדיה ולרשתות החברתיות, מרחיבים את פוטנציאל החשיפה של האפליקציה ויוצרים משתמש טוב יותר בכל גורמי הצורה של מסכים גדולים - טאבלטים, מכשירים מתקפלים מכשירי ChromeOS — וגם תמיכה בכל גדלי הטלפונים.

רכיבי מסילת הניווט וחלונית ההזזה מאפשרים ניווט מחוץ לגרסה בממשק המשתמש. יותר נוחות ושליטה. הרכיבים גם משלימים את הפריסה הקנונית (list-detail, פיד וחלונית תומכת) על ידי מיקום הניווט הראשי יעדים קרובים שתופסים לפחות שטח מסך.

פריסות מדיה

אפשר לשפר את השימוש באפליקציה על ידי הטמעת פריסות ספציפיות למדיה עבור list-detail, פיד וחלונית תומכת. למידע על MDX, Flutter להרכבת פריסות, כדאי לעיין במאמר משאבי פריסה.

  • List-detail: עיצוב האפליקציה עם דפדפן מדיה אינטראקטיבי מאפשר למשתמשים לדפדף מדיה בזמן צפייה או האזנה. כותרות המדיה מוצגות זו לצד זו עם קובץ וידאו או אודיו שמופעל. אם כיוון המכשיר משתנה, מגיבה כדי לשמור על מצב האפליקציה. מידע נוסף זמין במאמר הבא: פריסות של רשימה-פרטים.

  • פיד: פריסת פיד מסדרת רכיבי תוכן מקבילים ברשת שניתנת להגדרה הצגה מהירה ונוחה של כמות גדולה של תוכן, כמו פיד מוזיקה או במצב קיוסק לסרטים ולטלוויזיה באפליקציה. מידע נוסף זמין במאמר פריסות פיד.

  • חלונית תמיכה: כשמשתמשים באזורי תצוגה ראשיים ומשניים, האפליקציה יכולה להטמיע חלונית תומכת בשביל הקשר, רלוונטיות או הפניה, למשל רשימה נגללת של שמות, ביקורות שפורסמו או יצירות נוספות של אותם אומנים או שחקנים. למידע נוסף ראו פריסות של חלוניות תומכות.

כדי לראות אוסף של פריסות מדיה, אפשר לעיין בגלריית המדיה.

פריסות של רשתות חברתיות

מסכים גדולים מעניקים למשתמשים ברשתות החברתיות יותר מקום עבודה ליצירה, לריבוי משימות, כדי לגרור תוכן בין אפליקציות ולשתף אותו. עם ערך ייחודי לתכונות וליכולות שאינן אפשריות במכשירים עם מסך קטן, אפליקציית מדיה למסך יכולה לנצל את היתרונות של פרטי רשימה, פיד וחלונית תומכת שונות.

  • List-detail: האפשרות הזו אידיאלית לאפליקציות הודעות, למנהלי אנשי קשר או לדפדפנים בקבצים. עבור לדוגמה, האפליקציה יכולה להציג רשימה של שיחות זו לצד זו עם פרטים כדי להתעדכן בהודעות האחרונות. למידע נוסף, ראו פריסות של רשימה-פרטים.

  • פיד: רכיבים נפוצים בסגנון הפריסה הזה הם כרטיסים ורשימות. לדוגמה, ליצור קולאז' של פוסטים בפורמט רשת גמיש, או להשתמש בגודל ובמיקום כדי למשוך תשומת לב לפוסטים בולטים. המשתמשים יכולים להציג במהירות קבוצות גדולות של תוכן. מידע נוסף זמין במאמר פריסות פיד.

  • חלונית תמיכה: אפליקציות חיפוש והפניות או אפליקציית פרודוקטיביות יכולים להפיק תועלת מהסגנון הזה של הפריסה שלו. הכלים ליצירת תוכן נמצאים בהישג יד עבור המשתמש. לדוגמה, האפליקציה שלך יכולה לאפשר למשתמשים לשנות הגדרות, לגשת ללוחות צבעים, להחיל אפקטים, ולראות את השינויים מיד. אפשר לקרוא מידע נוסף במאמר פריסות של חלוניות תומכות.

לאוסף אוסף של פריסות לרשתות חברתיות, אפשר להיכנס לדף גלריית המדיה החברתית.

שיטות מומלצות לאפליקציות מדיה במסכים גדולים

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

כיוון ושינוי גודל

אם אפליקציית המדיה מצהירה על הגבלות כיוון ושינוי גודל, Android מפעיל מצב תאימות. למרות שמצב תאימות מבטיח שהאפליקציה שלך מתנהג בצורה סבירה, נוחות השימוש פוחתת במידה משמעותית וחוויית המשתמש מסוכנת.

לדוגמה, אם האפליקציה נמצאת בטאבלט, הטאבלט יעוגל בפריסה לרוחב לכיוון מסוים. אם האפליקציה מוגבלת להצגה לאורך, הדבר גורם לפורמט letterbox, וזה לא אידיאלי למשתמש הקצה. האפליקציה שלך צריכה לאפשר לאנשים להשתמש לכיוון המועדף, לכן נצלו את הגודל הזמין של בעיצוב שלכם.

כל הגבלת כיוון תצמצם את האופן שבו משתמשים יכולים ליצור אינטראקציה עם התוכן או צורכים מדיה, מה שמגביל את השימוש באפליקציה שלך. שינוי הכיוון יכול תשפיע במידה מסוימת על הגודל, אבל שינוי הגודל לא בהכרח ישנה את הכיוון.

מקשי קיצור

במסך גדול יותר, מקשי קיצור במקלדת הפיזית כמו 'התחלה', 'עצירה' להשהות, להריץ אחורה וקדימה, לגרום למשתמש לספק חוויית משתמש עקבית בעזרת המקלדת.

המשתמשים מצפים לפונקציות האלה באפליקציות המדיה שלהם. כדי לצמצם את נקודות החיכוך של מומלץ לבדוק את האפליקציה באמצעות מקלדת פיזית. כך אפשר ולכלול את קיצורי הדרך החשובים האלה באפליקציה בתחילת לעיצוב.

תמיכה בתצוגה המקדימה של המצלמה

במסכים גדולים, עשויות להיות בעיות יותר במתיחות, בחיתוך בסבב. לכן, לא ניתן להניח שגודל התצוגה המקדימה של המצלמה הוא מה שממשק המשתמש שאפליקציית המדיה שלכם מעובדת בפועל.

לדוגמה, אם משתמש מצלם תמונה באמצעות הטאבלט אבל בטאבלט והמסך שלו הפוך. זו חוויה לא אופטימלית. הכללת המצלמה תמיכה בתצוגה מקדימה במסכים גדולים.

למידע נוסף, ראו תצוגה מקדימה של CameraX, או תצוגה מקדימה של Camera2.

תנוחות מתקפלות

עיצוב אפליקציית המדיה למסכים גדולים כולל עמדות מתקפלות. האפליקציה שלך, לדוגמה, יכולים לאפשר למשתמש להגדיר שולחניות להפעלה של מדיה, להשתמש במסך האחורי ובמצב Dual Screen לתצוגה מקדימה ולצילום.

האפליקציה שלך זמינה עם תנוחות מתקפלות שכלולות בתוכנית הפיתוח ליותר מכשירים ויש לו השפעה גדולה יותר. אתם מגדילים את חוויית המדיה עבור למשתמשים בדרכים שמכשירים אחרים לא יכולים לעשות בלי תנוחות מתקפלות. לקבלת מידע נוסף מידע נוסף מופיע בקטע עמדות מתקפלות.