איך להציג את האפליקציה ל-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 ואילו דפוסים כדאי להימנע מהם.
  • מומלץ להתאים רק כמה רכיבי ניווט, כמו סרגל הניווט, שורת האפליקציות העליונה או שורת האפליקציות התחתונה.
  • כשממשק המשתמש המרחבי לא מופעל, האנשים בקבוצה לא מופיעים. לדוגמה, הן לא יופיעו במרחב הבית או במכשירים כמו טלפונים, טאבלטים ומכשירים מתקפלים.

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

לוחות מרחביים הם אבני הבניין הבסיסיות של ממשק המשתמש של אפליקציות 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 תוכלו למקם מודלים תלת-ממדיים באופן דקלרטיבי ביחס לממשק המשתמש המרחבי. למידע נוסף על הצגת מודלים תלת-ממדיים באפליקציה, תוכלו לקרוא את המאמר יצירה, שליטה וניהול של ישויות.