איך להציג את האפליקציה ל-Android בתלת-ממד באמצעות XR

​​

אפליקציות 2D לנייד או למסך גדול ב-Android פועלות כברירת מחדל ב-Android XR, מוצגות כחלונית 2D במרחב 3D. אתם יכולים להוסיף תכונות XR immersive לאפליקציית Android הקיימת שלכם ב-2D, כדי לשפר את חוויית השימוש שלה ולהעביר אותה מחוויית מסך שטוח לסביבה תלת-ממדית דינמית.

כדאי להביא בחשבון את העקרונות החשובים הבאים כשאתם מעבירים את האפליקציה ל-Android ל-XR.

  • יכולות מרחביות: Android XR מציע מגוון רחב של תכונות מרחביות שזמינות לאפליקציה שלכם, אבל אתם לא חייבים להטמיע כל יכולת בנפרד. כדאי להטמיע באופן אסטרטגי את הרכיבים שמתאימים להיררכיה החזותית, לפריסות ולמסלולי המשתמשים של האפליקציה. כדאי לשלב סביבות בהתאמה אישית ולוחות מרובים כדי ליצור חוויה מרתקת באמת. מומלץ לעיין בהנחיות לעיצוב ממשק משתמש מרחבי כדי לקבוע את השילוב האופטימלי של רכיבים מרחביים.
  • ממשק משתמש גמיש: טכנולוגיית XR מאפשרת לכם לעצב ממשק משתמש מרווח שמתאים בצורה חלקה ללוח ציור אינסופי ולחלונות שניתן לשנות את הגודל שלהם. אחד השיקולים החשובים ביותר הוא להשתמש בהנחיות שלנו לעיצוב במסכים גדולים כדי לבצע אופטימיזציה של הפריסה של האפליקציה לסביבה הרחבה הזו. גם אם האפליקציה שלכם זמינה כרגע רק בנייד, עדיין תוכלו להשתמש בסביבות מרתקות כדי לשפר את חוויית המשתמש. עם זאת, ממשק משתמש שמותאם למסכים גדולים הוא אחת הדרכים הטובות ביותר לבצע אופטימיזציה של האפליקציה ל-Android XR.
  • מסגרת ממשק משתמש: מומלץ ליצור את ממשק המשתמש באמצעות Jetpack Compose for XR. אם האפליקציה שלכם מסתמכת כרגע על Views, כדאי לעיין במאמר עבודה עם Views ב-XR כדי לקבל מידע נוסף על ניצול יכולת הפעולה ההדדית של Compose כשעובדים עם Views, או לבדוק אפשרות לעבוד ישירות עם ספריית Jetpack SceneCore.
  • פרסום בחנות Play: כדי לוודא שהאפליקציה עם התכונות המשופרות של XR תהיה גלויה בחנות Play: 
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

טיפים להמרת רכיבי ממשק משתמש בדו-ממד לרכיבים בתלת-ממד

הפעלת הטיפים האלה יכולה להשפיע מאוד על התחושה שהאפליקציה שלכם אופטימיזציה ל-XR.

  • מתן עדיפות לתאימות למסכים גדולים: חשוב לוודא שממשק המשתמש של האפליקציה עומד בעקרונות העיצוב למסכים גדולים כדי להבטיח קריאוּת אופטימלית של הטקסט והתוכן בסביבות XR נרחבות.
  • שימוש אסטרטגי בתכונות המרחביות: זיהוי רגעים משמעותיים בתהליך השימוש באפליקציה שבהם שילוב של תכונות מרחביות ישפר את החוויה ויאפשר לכם לנצל את היכולות הייחודיות של הפלטפורמה.
  • הצבת פאנלים מרחביים תוך התחשבות בנוחות המשתמשים: כשאתם מתכננים את הפריסה עם פאנלים מרחביים, חשוב למקם אותם במרחק נוח מהמשתמש כדי למנוע עומס או תחושה של קרבה רבה מדי.
  • שימוש בממשק משתנה למסכים מרחבי: כדאי להשתמש במושגים של ממשק משתנה, כמו חלוניות וחשיפת מידע פרוגרסיבית, כדי לפרק את הפריסה למספר חלוניות מרחביות ולבצע אופטימיזציה של הצגת המידע.
  • שימוש ברכיבי orbiter לרכיבים ולדפוסים קבועים: כדאי להשתמש ברכיבי orbiter לרכיבי UX קבועים ותלויים בהקשר, כמו רכיבי ניווט ובקרה. כדאי להגביל את השימוש ב-orbiters כדי לשמור על הבהירות ולהימנע מהצטברות של פריטים.
  • שימוש מושכל בהגבהה: כדאי להשתמש בהגבהה מרחבית לרכיבים זמניים שנשארים במקום ולא גוללים עם התוכן. מומלץ להימנע מהגבהה של אזורים גדולים כדי למנוע אי-נוחות ויזואלית ולשמור על היררכיה ויזואלית מאוזנת.
  • פיתוח באמצעות Material Design: אם אתם מפתחים באמצעות גרסת האלפא האחרונה של הרכיבים של Material Design ותצוגות מתאימות, תוכלו להוסיף את העטיפה EnableXrComponentOverrides כדי להביע הסכמה לשינויים ב-XR באפליקציה. למידע נוסף, קראו את המסמכים שלנו בנושא Material Design ל-XR.

ב-Jetpack Compose for XR יש רכיבים חדשים שמנהלים את השיפורים של XR, כדי שאתם לא תצטרכו לעשות זאת. לדוגמה, אפשר להשתמש ב-SpatialPopup וב-SpatialDialog כדי להחליף את המקבילות שלהם ב-2D. הרכיבים האלה מופיעים כממשק משתמש דו-ממדי רגיל כשממשק המשתמש המרחבי לא זמין, והם מציגים את ממשק המשתמש המרחבי של האפליקציה כשהדבר אפשרי. השימוש בהם פשוט מאוד, וניתן לבצע שינוי של שורה אחת כדי להחליף את רכיב ממשק המשתמש הדו-מימדי התואם.

המרת תיבת דו-שיח ל-SpatialDialog

// Previous approach
Dialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

המרת חלון קופץ ל-SpatialPopup

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

שיפור רכיבים דו-ממדיים בממשק המשתמש

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

//  Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(spatialElevationLevel = SpatialElevationLevel.Level4) {
   ComposableThatShouldElevateInXr()
}

נקודות עיקריות לגבי הקוד

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

העברת רכיבים דו-ממדיים ל-Orbiters

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

פס ניווט ללא מיקום מרחבי
פס ניווט מרחבי (מותאם ל-XR)

קוד הדוגמה הבא מראה איך אפשר להעביר רכיב של ממשק משתמש דו-מימדי ל-Orbiter.

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Start
) {
    NavigationRail()
}

נקודות עיקריות לגבי כלי ניווט במסלול

  • רכיבי Orbiter מיועדים לחבר רכיבי ממשק משתמש קיימים ללוח מרחבי.
  • מומלץ לעיין בהנחיות שלנו לעיצוב אפליקציות ל-Android XR כדי לבדוק אילו רכיבים צריך להעביר ל-Orbiters ואילו דפוסים כדאי להימנע מהם.
  • מומלץ להתאים רק כמה רכיבי ניווט, כמו סרגל הניווט, סרגל האפליקציות העליון או סרגל האפליקציות התחתון.
  • משתמשים ב-Orbit לא מופיעים כשממשק המשתמש המרחבי לא מופעל. לדוגמה, הן לא יופיעו במרחב הבית או במכשירים כמו טלפונים, טאבלטים ומכשירים מתקפלים.

העברת רכיבים דו-ממדיים לחלוניות תלת-ממדיות

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

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

נקודות עיקריות לגבי הקוד

  • עיינו בהנחיות לעיצוב אפליקציות ל-Android XR כדי לבדוק אילו רכיבים צריך להעביר לחלוניות ואילו דפוסים כדאי להימנע מהם.
  • מומלץ לפעול לפי השיטות המומלצות למיקום של מודעות בחלונית מרחבית:
    • הלוחות צריכים להופיע במרכז במרחק של 1.5 מ' מעיני המשתמש.
    • התוכן צריך להופיע במרכז שדה הראייה של המשתמש בזווית של 41°.
  • הלוחות נשארים במקום כשהמשתמש זז. אפשרות העיגון זמינה רק ל-passthrough.
  • מומלץ להשתמש בפינות מעוגלות של 32dp בחלוניות, בהתאם להמלצות המערכת.
  • יעדי המגע צריכים להיות בגודל 56dp ולא קטנים מ-48dp.
  • חשוב לשמור על יחסי ניגודיות לשיפור הקריאוּת, במיוחד אם משתמשים ברקעים שקופים.
  • פועלים לפי עקרונות העיצוב של Android ומשתמשים במערכת הצבעים של Material Design כדי להטמיע עיצובים כהים ובוהקים באפליקציה.
  • שימוש ב-Spatial Panels API עם רכיבי ממשק משתמש קיימים.

העברת ממשק משתמש דו-ממדי ללוח מרחבי יחיד

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

דוגמה לאופן שבו אפשר לעשות זאת:

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {    
    Subspace {
        SpatialPanel(
            SubspaceModifier
                .resizable(true)
                .movable(true)
         ) {
            AppContent(appContainer, widthSizeClass)
        }
    }
} else {
    AppContent(appContainer, widthSizeClass)
}

העברת ממשק המשתמש הדו-מימדי לכמה לוחות מרחבי

אפשר להשתמש בחלונית מרחבית אחת בממשק המשתמש של האפליקציה, או להעביר את ממשק המשתמש הדו-מימדי לכמה חלוניות מרחביות. אם בחרתם להשתמש בכמה חלוניות בממשק המשתמש של האפליקציה, תוכלו למקם ולסובב את החלונות (בדומה לפריסה של ממשק המשתמש ב-2D). תחילה תצטרכו לחשוב על חזון עיצוב ברור של מה שאתם רוצים להשיג, ואז תוכלו להשתמש בממשקי ה-API של פריסה של ממשק משתמש מרחבי (SpatialBox, ‏ SpatialRow,‏ SpatialColumn, ‏ SpatialLayoutSpacer, ‏ SpatialAlignment) ובמפעילים של מרחבים משניים כדי למקם ולסובב את החלוניות. יש כמה דפוסים חשובים שכדאי להימנע מהם כשמטמיעים כמה חלוניות.

  • הימנעו מלמקם לוחות חופפים שעשויים לחסום את המידע הקריטי מהמשתמשים.
  • חשוב להימנע מהצגת יותר מדי חלוניות למשתמש.
  • הימנעו ממיקומי פאנלים לא נעימים או לא גלויים לעין. דוגמה: קשה לשים לב ללוחות שממוקמים מאחורי המשתמש.
  • מידע נוסף על פיתוח ממשק המשתמש המרחבי זמין בהנחיות המלאות שלנו.
תוכן ללא מיקום גיאוגרפי
אמצעי בקרה על מדיה במרחב (מותאמים ל-XR) בתוך חלונית מסביב למסך, ותוכן שמפוצל לכמה חלוניות מרחביות
SpatialRow(curveRadius = 825.dp) {
    SpatialPanel(
        SubspaceModifier
            .width(384.dp)
            .height(592.dp)
    ) {
        StartSupportingPanelContent()
    }
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        App()
    }
    SpatialPanel(
        SubspaceModifier
            .width(288.dp)
            .height(480.dp)
    ) {
        EndSupportingPanelContent()
    }
}

בדיקת היכולות המרחביות

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

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

//Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled

שימוש בסביבות כדי לשנות את הסביבה של המשתמש

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

הוספת מודלים תלת-ממדיים

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

הוספת מודלים תלת-ממדיים באמצעות SceneViewer

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

הוספת מודלים תלת-ממדיים ישירות באמצעות 'אוסף ישויות'

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