איך מתחילים להשתמש באפליקציות מותאמות

תג Google Play למסכים גדולים

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

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

לקבלת התג

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

מהן אפליקציות אדפטיביות?

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

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

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

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

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

למה כדאי ליצור ממשקי משתמש דינמיים?

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

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

Google Play

ב-Google Play יש אוספים והמלצות של אפליקציות ספציפיות לטאבלטים ולמכשירים מתקפלים, שמאפשרים למשתמשים לגלות אפליקציות באיכות גבוהה.

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

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

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

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

איך מתחילים

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

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

  • שימוש בקטגוריות של גודל החלון כדי לקבל החלטות לגבי הפריסה
  • פיתוח באמצעות הספרייה Compose Material 3 Adaptive
  • תמיכה בקלט מעבר למגע
  • בדיקה בכל סוגי המכשירים

מחלקות של גודל חלון

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

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

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

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

מחשבים את WindowSizeClass של האפליקציה באמצעות הפונקציה ברמה העליונה currentWindowAdaptiveInfo() של ספריית Compose Material 3 Adaptive. הפונקציה מחזירה מופע של WindowAdaptiveInfo, שמכיל את windowSizeClass. האפליקציה מקבלת עדכונים בכל פעם שסוג גודל החלון משתנה:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

חלוניות תוכן

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

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

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

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

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

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

איור 5. פריסה של רשימה ופירוט עם חלונית רשימה כיעד ניווט.
איור 6. פריסה של רשימה ופירוט עם חלונית פירוט כיעד ניווט.

‫Compose Material 3 Adaptive

‫Jetpack Compose היא גישה מודרנית ודקלרטיבית לפיתוח אפליקציות מותאמות אישית, בלי הנטל של שכפול ותחזוקה של כמה קובצי פריסה.

ספריית Compose Material 3 Adaptive מכילה רכיבי Composable שמנהלים את קטגוריות הגודל של החלונות, רכיבי הניווט, פריסות עם כמה חלוניות, מצבי קיפול ומיקום הציר, לדוגמה:

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

  • ‫ListDetailPaneScaffold: הטמעה של פריסת רשימה-פרטים קנונית.

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

  • ‫SupportingPaneScaffold: הטמעה של פריסת חלונית התמיכה הקנונית.

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

הספרייה Compose Material 3 Adaptive היא תלות מרכזית בפיתוח אפליקציות רספונסיביות.

הגדרה והמשכיות

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

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

כברירת מחדל, שינויים בהגדרות יוצרים מחדש את הפעילות באפליקציה, וכל מצב הפעילות אובד. כדי לשמור על המשכיות, אפליקציות רספונסיביות שומרות את המצב ב-method‏ onSaveInstanceState() של הפעילות או ב-ViewModel.

מצב אבטחה

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

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

הממשק WindowInfoTracker ב-Jetpack WindowManager מאפשר לקבל רשימה של אובייקטים מסוג DisplayFeature במכשיר. אחת מהתכונות של המסך היא FoldingFeature.State, שמציינת אם המכשיר פתוח לגמרי או חצי פתוח.

הספרייה Compose Material 3 Adaptive מספקת את הפונקציה currentWindowAdaptiveInfo() ברמה העליונה, שמחזירה מופע של WindowAdaptiveInfo שמכיל את windowPosture.

קלט מעבר למגע

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

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

  • ‫Jetpack Compose מגרסה 1.7 ואילך: כברירת מחדל, יש תמיכה בניווט באמצעות מקש Tab במקלדת ובלחיצה, בחירה וגלילה באמצעות העכבר או משטח המגע.

  • ספריית Jetpack androidx.compose.material3: מאפשרת למשתמשים לכתוב בכל רכיב TextField באמצעות סטיילוס.

  • עזרה עם מקשי קיצור: מאפשרת למשתמשים למצוא מקשי קיצור בפלטפורמת Android ובאפליקציות. כדי לפרסם את מקשי הקיצור של האפליקציה בכלי העזר למקשי הקיצור, צריך לשנות את פונקציית ה-callback של החלון onProvideKeyboardShortcuts().

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

איך בודקים אפליקציות דינמיות

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

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

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

מערכים מרובים של הגדרות אישיות

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

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

צילומי מסך מצד המארח

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

מידע נוסף זמין במאמר בדיקת צילומי מסך של תצוגה מקדימה ב-Compose.

יצירת תצוגות מקדימות

תצוגות מקדימות של Compose מאפשרות לבדוק את ממשק המשתמש של האפליקציה בתצוגת העיצוב של Android Studio. בתצוגות המקדימות נעשה שימוש בהערות כמו @PreviewScreenSizes,‏ @PreviewFontScale ו-@PreviewLightDark כדי לאפשר לכם לראות תוכן קומפוזבילי בהגדרות שונות. אתם יכולים אפילו לבצע פעולות בתצוגות המקדימות.

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

מידע נוסף זמין במאמר תצוגה מקדימה של ממשק המשתמש באמצעות תצוגות מקדימות של פונקציות קומפוזביליות.

אמולטורים

ב-Android Studio יש מגוון אמולטורים לבדיקת גדלים שונים של פריסות:

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

סטרימינג למכשיר שמחובר לרשת אחרת

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

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

מקורות מידע נוספים

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