با XR، برنامه Android خود را سه‌بعدی کنید

دستگاه‌های XR قابل‌اعمال

این راهنمایی به شما کمک می‌کند برای این نوع دستگاه‌های واقعیت گسترده تجربه بسازید.

آشنایی با انواع دستگاه‌های XR →

آشنایی با انواع دستگاه‌های XR →

برنامه Android صفحه بزرگ یا تلفن همراه دوبعدی شما به‌طور پیش‌فرض در Android XR کار می‌کند و به‌صورت پانل دوبعدی در فضای سه‌بعدی نمایش داده می‌شود. می‌توانید ویژگی‌های واقعیت گسترده فراگیر را به برنامه Android دوبعدی موجودتان اضافه کنید و آن را از تجربه صفحه تخت به محیطی پویا و سه‌بعدی تبدیل کنید.

هنگام آوردن برنامه Android به XR، این اصول مهم را درنظر بگیرید.

• قابلیت‌های فضایی: Android XR طیف متنوعی از ویژگی‌های فضایی را دراختیار برنامه شما قرار می‌دهد، اما لازم نیست همه قابلیت‌ها را پیاده‌سازی کنید. آن‌هایی را که مکمل سلسله مراتب دیداری، چیدمان‌ها، و سفرهای کاربر برنامه‌تان هستند به‌صورت راهبردی پیاده‌سازی کنید. برای ایجاد تجربه‌ای واقعاً فراگیر، محیط‌های سفارشی و پانل‌های متعدد را درنظر بگیرید. برای تعیین بهترین ادغام عناصر فضایی، به راهنمایی طراحی میانای کاربر فضایی مراجعه کنید.
• واسط کاربر تطبیقی: XR به شما این انعطاف‌پذیری را می‌دهد که واسط کاربری جاداری طراحی کنید که به‌طور یکپارچه با بوم بی‌نهایت و پنجره‌های با قابلیت تغییر اندازه آزادانه تطبیق پیدا کند. یکی از مهم‌ترین ملاحظات استفاده از راهنمایی طراحی صفحه‌نمایش بزرگ ما برای بهینه‌سازی چیدمان برنامه شما برای این محیط گسترده است. حتی اگر برنامه شما امروز فقط برای تلفن همراه باشد، همچنان می‌توانید از محیط‌های جذاب برای بهبود تجربه کاربر استفاده کنید، اما یکی از بهترین راه‌ها برای بهینه‌سازی برنامه برای Android XR، داشتن میانای کاربری بهینه‌سازی‌شده برای صفحه‌نمایش‌های بزرگ است.
• چارچوب میانای کاربر: توصیه می‌کنیم میانای کاربر خود را با Jetpack Compose برای XR بسازید. اگر برنامه شما به «نماها» متکی است، برای کسب اطلاعات بیشتر درباره بهره‌گیری از قابلیت تعامل Compose هنگام کار با «نماها»، کار با «نماها» در XR را مرور کنید، یا کار مستقیم با کتابخانه Jetpack SceneCore را ارزیابی کنید.
• انتشار در «فروشگاه Play»: برای اینکه مطمئن شوید برنامه بهبودیافته با XR در «فروشگاه Play» قابل‌کشف است:
  • با حذف کردن الزامات ویژگی غیرضروری، برنامه خود را ساده‌تر کنید.
  • برنامه‌تان را در کنسول Google Play تأیید کنید تا از انتشار واقعیت گسترده انصراف نداده باشد و درنتیجه برنامه‌تان از نتایج جستجوی «فروشگاه Play» حذف نشود.

نکاتی برای تبدیل عناصر واسط کاربر دوبعدی به سه‌بعدی

دنبال کردن این نکات می‌تواند تفاوت بزرگی در ایجاد حس بهینه‌سازی برنامه شما برای واقعیت گسترده ایجاد کند.

• سازگاری با صفحه‌نمایش بزرگ را در اولویت قرار دهید: مطمئن شوید «میانای کاربر» برنامه‌تان از اصول طراحی صفحه‌نمایش بزرگ پیروی می‌کند تا به خوانایی بهینه نوشتار و محتوا در محیط‌های گسترده XR کمک کند.
• از ویژگی‌های فضایی به‌صورت استراتژیک استفاده کنید: لحظات کلیدی در مسیر کاربر برنامه‌تان را شناسایی کنید که در آن‌ها گنجاندن ویژگی‌های فضایی تجربه را بهبود می‌بخشد و از قابلیت‌های منحصربه‌فرد پلاتفرم بهره ببرید.
• قرار دادن پانل‌های فضایی با درنظر گرفتن راحتی کاربر: هنگام طراحی چیدمان با پانل‌های فضایی، آن‌ها را در فاصله‌ای راحت از کاربر قرار دهید تا از احساس غرق شدن یا خیلی نزدیک بودن جلوگیری شود.
• استفاده از میانای کاربر تطبیقی برای چیدمان‌های فضایی: از مفاهیم میانای کاربر تطبیقی مانند قاب‌ها و آشکارسازی تدریجی برای تجزیه مؤثر چیدمان به چندین پانل فضایی استفاده کنید و ارائه اطلاعات را بهینه کنید.
• از چرخان‌ها برای عناصر و الگوهای ماندگار استفاده کنید: چرخان‌ها را برای عناصر ماندگار و زمینه‌ای تجربه کاربری مانند پیمایش و کنترل‌ها رزرو کنید. برای حفظ وضوح و جلوگیری از شلوغی، استفاده از چرخان‌ها را محدود کنید.
• از ارتفاع به‌درستی استفاده کنید: ارتفاع فضایی را به عناصر موقتی که ثابت می‌مانند و همراه با محتوا پیمایش نمی‌شوند اعمال کنید. برای جلوگیری از ناراحتی بصری و حفظ سلسله مراتب بصری متعادل، از بالا بردن مناطق بزرگ خودداری کنید.

‫Jetpack Compose for 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 را ارائه می‌دهیم تا بتوانید هر عنصر ترکیبی در برنامه‌تان را به سطحی بالاتر از پانل فضایی در محور Z که با SpatialElevationLevel تنظیم کرده‌اید ارتقا دهید. این کار به جلب توجه کاربر کمک می‌کند، سلسله‌مراتب بهتری ایجاد می‌کند، و خوانایی را بهبود می‌بخشد، همان‌طور که در مثال زیر نشان داده شده است.

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

نکات کلیدی درباره کد

• مناطق و سطوح بزرگ مانند برگه‌های پایین و برگه‌های کناری را فضایی‌سازی یا برجسته نکنید.
• عناصر رابط کاربری را که با محتوا پیمایش‌پذیر هستند ارتقا ندهید.

انتقال اجزای دوبعدی به چرخان‌ها

گردان‌ها عناصر شناوری هستند که معمولاً حاوی کنترل‌هایی هستند که کاربر می‌تواند با آن‌ها تعامل داشته باشد. گردشگرها را می‌توان به پانل‌های فضایی یا نهادهای دیگر مانند چیدمان‌های فضایی متصل کرد. این عناصر به محتوا اجازه می‌دهند فضای بیشتری داشته باشد و به کاربران دسترسی سریع به ویژگی‌ها را بدون مسدود کردن محتوای اصلی ارائه دهند.

کد نمونه زیر نشان می‌دهد که چگونه می‌توانید یک عنصر رابط کاربری دوبعدی را به یک گرداننده منتقل کنید.

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    alignment = OrbiterAlignment.TopStart(
        edgeOffsetType = OrbiterEdgeOffsetType.OuterEdge,
        offset = DpVolumeOffset(x = dimensionResource(R.dimen.start_orbiter_padding))
    )
) {
    NavigationRail()
}
Orbiter.kt

نکات کلیدی درباره مدارگردها

• گردان‌ها عناصری هستند که برای پیوستن عناصر موجود واسط کاربر به پانل فضایی طراحی شده‌اند
• برای اینکه ببینید کدام عناصر را باید برای چرخان‌ها انتقال دهید و از کدام الگوها باید اجتناب کنید، راهنمای طراحی برنامه Android XR ما را ببینید.
• توصیه می‌کنیم فقط چند عنصر پیمایش مثل ریل پیمایش، نوار برنامه بالا، یا نوار برنامه پایین را تطبیق دهید.
• وقتی «میانای کاربری فضایی» فعال نباشد، گردان‌ها نشان داده نمی‌شوند. برای مثال، در «فضای خانه» یا در دستگاه‌هایی مثل تلفن، رایانه لوحی، و دستگاه‌های تاشو نمایش داده نمی‌شوند.

انتقال عناصر دوبعدی به پانل‌های فضایی

پانل‌های فضایی واحدهای سازنده اصلی میانای کاربری برنامه‌های Android XR هستند.

پانل‌ها به‌عنوان محفظه‌هایی برای عناصر میانای کاربر، عناصر تعاملی، و محتوای فراگیر عمل می‌کنند. هنگام طراحی، می‌توانید مؤلفه‌هایی مثل چرخان‌ها برای کنترل‌های کاربر اضافه کنید و عناصر میانای کاربر را به‌صورت فضایی بالا ببرید تا توجه را به تعامل‌های خاص جلب کنید.

نکات کلیدی درباره کد

• برای اینکه ببینید کدام عناصر را باید به پانل‌ها انتقال دهید و از کدام الگوها باید اجتناب کنید، راهنمای طراحی برنامه Android XR را ببینید.
• روال‌های مطلوب را برای جای‌گذاری پانل فضایی دنبال کنید:
  • پانل‌ها باید در فاصله ۱٫۵ متری از چشمان کاربر در مرکز ایجاد شوند.
  • محتوا باید در مرکز ۴۱ درجه میدان دید کاربر ظاهر شود.
• پانل‌ها با حرکت کاربر در جای خود باقی می‌مانند. تثبیت فقط برای گذردهی دردسترس است.
• برای پانل‌ها، از گوشه‌های گرد ۳۲ dp توصیه‌شده سیستم استفاده کنید.
• هدف‌های لمسی باید ۵۶ پیکسل مستقل از تراکم و نه کمتر از ۴۸ پیکسل مستقل از تراکم باشند.
• نسبت‌های کنتراست را برای خوانایی حفظ کنید، به‌ویژه اگر از پس‌زمینه‌های شفاف استفاده می‌کنید.
• اصول رنگ طراحی Android را دنبال کنید و از سیستم رنگ Material Design برای پیاده‌سازی زمینه‌های تیره و روشن برای برنامه‌تان استفاده کنید.
• از API پانل‌های فضایی با عناصر رابط کاربری موجود استفاده کنید.

انتقال واسط کاربر دوبعدی به پانل فضایی تکی

به‌طور پیش‌فرض، برنامه شما با یک پانل در «فضای خانه» نشان داده می‌شود. با نحوه انتقال بین «فضای خانه» و «فضای کامل» آشنا شوید. برای آوردن آن محتوا به Full Space، می‌توانید از SpatialPanel استفاده کنید.

در اینجا نمونه‌ای از نحوه انجام این کار آورده شده است.

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

انتقال واسط کاربر دوبعدی به چندین پانل فضایی

می‌توانید از یک پانل فضایی برای واسط کاربر برنامه‌تان استفاده کنید، یا می‌توانید واسط کاربر دوبعدی‌تان را به چند پانل فضایی انتقال دهید. اگر انتخاب کنید که از چند پانل برای واسط کاربر برنامه‌تان استفاده کنید، می‌توانید پانل‌ها را در موقعیت‌های مختلف قرار دهید و بچرخانید (مشابه چیدن واسط کاربر در فضای دوبعدی). با یک دیدگاه طراحی واضح برای آنچه می‌خواهید انجام دهید شروع می‌کنید، و سپس می‌توانید از «میاناهای برنامه‌سازی کاربردی چیدمان واسط کاربر فضایی» (SpatialBox، SpatialRow، SpatialColumn، SpatialLayoutSpacer، SpatialAlignment) و اصلاح‌کننده‌های فضای فرعی برای قرار دادن و چرخاندن پانل‌ها استفاده کنید. الگوهای کلیدی وجود دارد که هنگام پیاده‌سازی چند پانل باید از آن‌ها اجتناب کنید.

• از پانل‌های هم‌پوشانی که مانع دیدن اطلاعات مهم توسط کاربر می‌شوند اجتناب کنید.
• از ارائه تعداد زیاد پانل به کاربر خودداری کنید.
• از قرار دادن پانل‌ها در مکان‌های ناراحت‌کننده یا غیرقابل‌توجه خودداری کنید. مثال: توجه به پانل‌های قرارگرفته پشت کاربر دشوار است.
• برای اطلاعات بیشتر درباره توسعه واسط کاربر فضایی، راهنمای کامل ما را بررسی کنید.

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

بررسی قابلیت‌های فضایی

وقتی تصمیم می‌گیرید که عنصر میانای کاربر خاصی را نمایش دهید یا نه، از بررسی دستگاه‌ها یا حالت‌های واقعیت گسترده خاص خودداری کنید. بررسی دستگاه‌ها یا حالت‌ها به‌جای قابلیت‌ها می‌تواند باعث بروز مشکلاتی شود، زیرا قابلیت‌های دستگاه معین با گذشت زمان تغییر می‌کند. به‌جای آن، از LocalSpatialCapabilities.current.isSpatialUiEnabled برای بررسی مستقیم قابلیت‌های فضاسازی لازم استفاده کنید، همان‌طور که در مثال زیر نشان داده شده است. این رویکرد تضمین می‌کند که برنامه شما بدون نیاز به به‌روزرسانی در هر بار ظهور دستگاه‌های جدید یا تغییر قابلیت‌ها، به‌درستی با طیف گسترده‌ای از تجربه‌های «واقعیت گسترده» سازگار شود.

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

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

از محیط‌ها برای تغییر دادن محیط اطراف کاربر استفاده کنید

وقتی می‌خواهید با تغییر محیط اطراف کاربر، حس غوطه‌وری در برنامه‌تان ایجاد کنید، می‌توانید این کار را با محیط‌ها انجام دهید. افزودن محیط در کد تغییری ساده است که می‌توانید بدون تأثیر قابل‌توجه بر رابط کاربری موجود برنامه‌تان انجام دهید. برای اطلاعات بیشتر درباره تنظیم محیط‌ها، حتماً راهنمای کامل ما را بررسی کنید.

افزودن محتوای سه‌بعدی

محتوای سه‌بعدی مانند مدل‌های سه‌بعدی و ویدیو فضایی می‌تواند به ایجاد تجربه فراگیرتر و افزودن درک فضایی کمک کند. برنامه شما فقط زمانی می‌تواند محتوای سه‌بعدی نشان دهد که قابلیت‌های فضایی دردسترس باشد، بنابراین بهتر است ابتدا بررسی کنید که قابلیت‌های فضایی دردسترس هستند یا نه.

برای افزودن مدل‌های سه‌بعدی، ویدیو فضایی یا صدای فضایی، به راهنمای مناسب مراجعه کنید.