برنامه اندروید خود را با XR به سه بعدی تبدیل کنید

است

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

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

  • قابلیت‌های فضایی : Android XR طیف متنوعی از ویژگی‌های فضایی را در اختیار برنامه شما قرار می‌دهد، اما لازم نیست تک تک قابلیت‌ها را پیاده‌سازی کنید. مواردی را که سلسله مراتب بصری، طرح‌بندی‌ها و سفرهای کاربر را تکمیل می‌کنند، به صورت استراتژیک اجرا کنید. برای ایجاد یک تجربه واقعاً فراگیر، محیط های سفارشی و پنل های متعدد را در نظر بگیرید. برای تعیین ادغام بهینه عناصر فضایی به راهنمای طراحی رابط کاربری فضایی مراجعه کنید.
  • رابط کاربری تطبیقی : XR به شما این انعطاف‌پذیری را می‌دهد تا یک رابط کاربری جادار طراحی کنید که به طور یکپارچه با یک بوم بی‌نهایت و پنجره‌هایی با قابلیت تغییر اندازه آزادانه سازگار می‌شود. یکی از مهم ترین ملاحظات استفاده از راهنمای طراحی صفحه نمایش بزرگ ما برای بهینه سازی طرح بندی برنامه خود برای این محیط گسترده است. حتی اگر برنامه شما در حال حاضر فقط برای موبایل باشد، همچنان می‌توانید از محیط‌های جذاب برای بهبود تجربه کاربری استفاده کنید، اما رابط کاربری که برای صفحه‌های بزرگ بهینه شده است، یکی از بهترین راه‌ها برای بهینه‌سازی برنامه شما برای Android XR است.
  • چارچوب UI : توصیه می کنیم رابط کاربری خود را با Jetpack Compose برای XR بسازید. اگر برنامه شما در حال حاضر به Views متکی است، کار با Views در XR را مرور کنید تا در مورد استفاده از قابلیت همکاری Compose هنگام کار با Views بیشتر بدانید، یا کار را مستقیماً با کتابخانه Jetpack SceneCore ارزیابی کنید.
  • انتشار در فروشگاه Play : برای اطمینان از اینکه برنامه بهبودیافته XR شما در فروشگاه Play قابل شناسایی است:
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

نکاتی برای تبدیل اجزای رابط کاربری دو بعدی به سه بعدی

پیروی از این نکات می تواند تفاوت بزرگی در ایجاد این احساس در برنامه شما ایجاد کند که برای XR بهینه شده است.

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

Jetpack Compose برای XR اجزای جدیدی را معرفی می‌کند که بهبودهای XR را مدیریت می‌کنند تا شما مجبور نباشید. به عنوان مثال، می توانید از SpatialPopup و SpatialDialog برای جایگزینی همتایان دو بعدی خود استفاده کنید. وقتی رابط کاربری فضایی در دسترس نباشد، این مؤلفه‌ها به‌عنوان رابط کاربری دو بعدی معمولی ظاهر می‌شوند، و در صورت امکان، رابط کاربری فضایی برنامه شما را نشان می‌دهند. استفاده از آنها به همان اندازه ساده است که یک تغییر یک خطی برای جایگزینی عنصر 2 بعدی UI مربوطه انجام دهید.

یک گفتگو را به 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()
}

نکات کلیدی در مورد کد

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

مولفه های دو بعدی را به مدارگردها منتقل کنید

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

ریل ناوبری غیر فضایی
ریل ناوبری فضایی (مطابق با XR).

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

// Previous approach
NavigationRail()

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

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

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

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

پانل‌های فضایی، بلوک‌های اساسی ساختمان رابط کاربری برنامه‌های Android XR هستند.

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

نکات کلیدی در مورد کد

  • راهنمای طراحی برنامه Android XR را ببینید تا بررسی کنید کدام عناصر به پانل‌ها منتقل شوند و از الگوهایی اجتناب کنید.
  • بهترین روش ها را برای قرار دادن پانل فضایی دنبال کنید:
    • پانل ها باید در مرکز 1.5 متری چشم کاربر تخم ریزی شوند.
    • محتوا باید در مرکز 41 درجه میدان دید کاربر ظاهر شود.
  • با حرکت کاربر، پانل ها در جای خود باقی می مانند. لنگر انداختن فقط برای عبور در دسترس است.
  • گوشه های گرد 32 dp را برای پانل ها به سیستم توصیه شده بچسبید.
  • اهداف لمسی باید 56 dp و کمتر از 48 dp باشند.
  • نسبت کنتراست را برای خوانایی حفظ کنید، به خصوص اگر از پس زمینه های شفاف استفاده می کنید.
  • از اصول رنگ طراحی اندروید پیروی کنید و از سیستم رنگی Material Design برای پیاده سازی تم های تیره و روشن برای برنامه خود استفاده کنید.
  • از API پانل های فضایی با عناصر رابط کاربری موجود استفاده کنید.

UI 2D را به یک پانل فضایی منتقل کنید

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

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

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

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

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

  • از روی هم افتادن پانل‌هایی که کاربر را از دیدن اطلاعات مهم جلوگیری می‌کند، خودداری کنید.
  • از تحت فشار قرار دادن کاربر با پنل ها خودداری کنید.
  • از قرار دادن پانل ها در مکان های ناراحت کننده یا غیر قابل توجه خودداری کنید. به عنوان مثال: پنل هایی که در پشت کاربر قرار می گیرند به سختی قابل توجه هستند.
  • برای اطلاعات بیشتر در مورد توسعه UI فضایی خود، راهنمای کامل ما را بررسی کنید.
محتوای غیر فضایی
کنترل‌های رسانه فضایی (تطبیق‌شده با 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 است. می توانید این کار را با ایجاد یک Intent صریح انجام دهید که برنامه SceneViewer XR را روی دستگاه راه اندازی می کند. این به کاربر این امکان را می دهد که شی را ببیند و آزادانه آن را در محیط اطراف خود حرکت دهد و اندازه آن را تغییر دهد.

مدل‌های سه‌بعدی را مستقیماً با نهادها Volume اضافه کنید

هنگامی که می خواهید کنترل بیشتری بر روی مواردی مانند موقعیت مدل سه بعدی، اندازه نسبی، یا انیمیشن های ظریف داشته باشید، می توانید منبع glTF را مستقیماً در برنامه خود بارگیری کنید. هنگامی که مدل سه بعدی بارگذاری شد، می توانید از Volume composable برای بسته بندی یک موجودیت مدل glTF و اعمال اصلاح کننده های زیر فضایی برای کنترل نحوه ارائه آن استفاده کنید. استفاده از Volume به شما این امکان را می‌دهد که مدل‌های سه‌بعدی را نسبت به رابط کاربری فضایی خود به‌طور آشکار قرار دهید. برای اطلاعات بیشتر درباره نمایش مدل‌های سه‌بعدی در برنامه‌تان، «ایجاد، کنترل و مدیریت موجودیت‌ها» را بررسی کنید.