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

מכשירי XR רלוונטיים

ההנחיות האלה יעזרו לכם ליצור חוויות למכשירי XR מהסוגים הבאים.

מידע ולמידה על סוגי מכשירי XR ←

מידע ולמידה על סוגי מכשירי XR ←

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

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

• יכולות מרחביות: ב-Android XR יש מגוון רחב של תכונות מרחביות שאפשר להשתמש בהן באפליקציה, אבל אתם לא חייבים להטמיע את כולן. הטמיעו באופן אסטרטגי את הפורמטים שמשתלבים בצורה הטובה ביותר בהיררכיה החזותית, בפריסות ובתהליכים שעוברים המשתמשים באפליקציה. כדאי לשלב סביבות בהתאמה אישית וכמה חלוניות כדי ליצור חוויה סוחפת באמת. כדי להחליט מהי הדרך הכי טובה לשלב אלמנטים מרחביים, כדאי לעיין בהנחיות לעיצוב ממשק משתמש מרחבי.
• ממשק משתמש דינמי: XR נותן לכם את הגמישות לעצב ממשק משתמש מרווח שמתאים את עצמו בצורה חלקה לאזור עריכה אינסופי ולחלונות שאפשר לשנות את הגודל שלהם באופן חופשי. אחד השיקולים החשובים ביותר הוא להשתמש בהנחיות לעיצוב למסכים גדולים כדי לבצע אופטימיזציה של פריסת האפליקציה לסביבה הרחבה הזו. גם אם האפליקציה שלכם מיועדת כרגע רק לניידים, אתם עדיין יכולים להשתמש בסביבות מרתקות כדי לשפר את חוויית המשתמש, אבל ממשק משתמש שמותאם למסכים גדולים הוא אחת מהדרכים הטובות ביותר לבצע אופטימיזציה של האפליקציה ל-Android XR.
• מסגרת ממשק המשתמש: מומלץ ליצור את ממשק המשתמש באמצעות Jetpack Compose ל-XR. אם האפליקציה שלכם מסתמכת על תצוגות, כדאי לעיין במאמר עבודה עם תצוגות ב-XR כדי לקבל מידע נוסף על ניצול יכולת הפעולה ההדדית של Compose כשעובדים עם תצוגות, או לשקול לעבוד ישירות עם ספריית Jetpack SceneCore.
• פרסום בחנות Play: כדי לוודא שאפשר למצוא את האפליקציה המשופרת ב-XR בחנות Play:
  • כדאי לייעל את האפליקציה על ידי הסרת דרישות מיותרות לתכונות.
  • כדי שהאפליקציה לא תוחרג מתוצאות החיפוש בחנות Play, ודאו שהיא לא מוחרגת מפרסום ב-XR ב-Google Play Console.

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

הטיפים האלה יכולים לעזור לכם לשפר את האפליקציה כך שתתאים ל-XR.

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

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

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

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

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

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

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

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

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

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

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

מידע חשוב על הקוד

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

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

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

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

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterPosition.TopStart(
        horizontalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
        offset = DpVolumeOffset(x = dimensionResource(R.dimen.start_orbiter_padding))
    )
) {
    NavigationRail()
}
Orbiter.kt

נקודות חשובות לגבי גשושיות מסלוליות

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

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

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

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

מידע חשוב על הקוד

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

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

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

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

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            modifier = SubspaceModifier.movable().resizable(),
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}
SpatialPanel.kt

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

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

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

SpatialRow {
    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()
    }
}
SpatialRow.kt

הוספת יכולות מרחביות

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

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

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

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

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

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

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

הוספת תוכן תלת-ממדי

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

עיינו במדריך המתאים להוספת מודלים תלת-ממדיים, סרטונים מרחביים או אודיו מרחבי.