Aplikasi Android 2D seluler atau layar besar Anda berfungsi secara default di Android XR, ditampilkan sebagai panel 2D di dalam ruang 3D. Anda dapat menambahkan fitur XR imersif untuk meningkatkan kualitas aplikasi Android 2D yang sudah ada, dengan mentransisikannya dari pengalaman layar datar ke lingkungan 3D yang dinamis.
Pertimbangkan prinsip-prinsip penting berikut saat menghadirkan aplikasi Android Anda ke XR.
- Kemampuan spasial: Android XR menawarkan beragam fitur spasial yang tersedia untuk aplikasi Anda, tetapi Anda tidak harus menerapkan setiap kemampuan. Terapkan secara strategis elemen yang melengkapi hierarki visual, tata letak, dan perjalanan pengguna aplikasi Anda. Pertimbangkan untuk menyertakan lingkungan kustom dan beberapa panel untuk menciptakan pengalaman yang benar-benar imersif. Lihat panduan desain UI spasial untuk menentukan integrasi elemen spasial yang optimal.
- UI Adaptif: XR memberi Anda fleksibilitas untuk mendesain UI luas yang beradaptasi dengan lancar ke kanvas tak terbatas dan jendela yang dapat diubah ukurannya secara bebas. Salah satu pertimbangan terpenting adalah menggunakan panduan desain layar besar kami untuk mengoptimalkan tata letak aplikasi Anda untuk lingkungan yang luas ini. Meskipun aplikasi Anda hanya tersedia di perangkat seluler saat ini, Anda tetap dapat memanfaatkan lingkungan yang menarik untuk meningkatkan pengalaman pengguna, tetapi UI yang dioptimalkan untuk layar besar adalah salah satu cara terbaik untuk mengoptimalkan aplikasi Anda untuk Android XR.
- Framework UI: Sebaiknya buat UI Anda dengan Jetpack Compose untuk XR. Jika aplikasi Anda mengandalkan View, tinjau bekerja dengan View di XR untuk mempelajari lebih lanjut cara memanfaatkan interoperabilitas Compose saat bekerja dengan View, atau evaluasi cara bekerja langsung dengan library Jetpack SceneCore.
- Memublikasikan di Play Store: Untuk memastikan aplikasi yang ditingkatkan XR Anda dapat ditemukan di Play Store:
- Pertimbangkan untuk menyederhanakan aplikasi Anda dengan menghapus persyaratan fitur yang tidak perlu.
- Pastikan aplikasi Anda tidak memilih untuk tidak ikut publikasi XR dari Konsol Google Play untuk mencegah aplikasi Anda dikecualikan dari hasil penelusuran Play Store.
Tips untuk mengonversi komponen UI 2D ke 3D
Mengikuti tips ini dapat membuat perbedaan besar dalam membuat aplikasi Anda terasa seperti telah dioptimalkan untuk XR.
- Prioritaskan kompatibilitas layar besar: Pastikan UI aplikasi Anda mematuhi prinsip desain layar besar untuk membantu memastikan keterbacaan teks dan konten yang optimal dalam lingkungan XR yang luas.
- Gunakan fitur spasial secara strategis: Identifikasi momen penting dalam perjalanan pengguna aplikasi Anda yang dapat ditingkatkan pengalamannya dengan menyertakan fitur spasial dan manfaatkan kemampuan unik platform.
- Tempatkan panel spasial dengan mempertimbangkan kenyamanan pengguna: Saat mendesain tata letak dengan panel spasial, posisikan panel pada jarak yang nyaman dari pengguna untuk menghindari kesan terlalu dekat atau membuat pengguna merasa kewalahan.
- Menggunakan UI adaptif untuk tata letak spasial: Manfaatkan konsep UI adaptif seperti panel dan pengungkapan progresif untuk secara efektif menguraikan tata letak Anda menjadi beberapa panel spasial, sehingga mengoptimalkan presentasi informasi.
- Gunakan pengorbit untuk elemen dan pola persisten: Cadangkan pengorbit untuk elemen UX persisten dan kontekstual seperti navigasi dan kontrol. Batasi penggunaan pengorbit untuk menjaga kejelasan dan menghindari kekacauan.
- Gunakan elevasi dengan bijak: Terapkan elevasi spasial ke komponen sementara yang tetap diam dan tidak di-scroll bersama konten. Hindari mengangkat area yang luas untuk mencegah ketidaknyamanan visual dan mempertahankan hierarki visual yang seimbang.
- Membangun dengan Desain Material: Jika Anda membangun dengan komponen Desain Material dan tata letak adaptif versi alfa terbaru, Anda dapat menambahkan wrapper "EnableXrComponentOverrides" untuk memilih ikut serta dalam perubahan XR di aplikasi Anda. Baca dokumentasi Desain Material untuk XR kami untuk mempelajari lebih lanjut.
Jetpack Compose untuk XR memperkenalkan komponen baru yang mengelola peningkatan XR sehingga Anda tidak perlu melakukannya. Misalnya, Anda dapat menggunakan SpatialPopup dan
SpatialDialog untuk menggantikan rekan 2D-nya. Komponen ini muncul
sebagai UI 2D biasa saat UI spasial tidak tersedia, dan menampilkan UI spasial
aplikasi Anda jika memungkinkan. Penggunaannya semudah melakukan perubahan satu baris
untuk menggantikan elemen UI 2D yang sesuai.
Mengonversi dialog menjadi SpatialDialog
// Previous approach Dialog( onDismissRequest = onDismissRequest ) { MyDialogContent() } // New XR differentiated approach SpatialDialog( onDismissRequest = onDismissRequest ) { MyDialogContent() }
Mengonversi pop-up menjadi SpatialPopup
// Previous approach Popup(onDismissRequest = onDismissRequest) { MyPopupContent() } // New XR differentiated approach SpatialPopup(onDismissRequest = onDismissRequest) { MyPopupContent() }
Meninggikan elemen UI 2D
Jika Anda ingin meningkatkan kualitas UI dengan kontrol yang lebih terperinci, kami menyediakan
SpatialElevation untuk memungkinkan Anda meningkatkan kualitas composable apa pun di aplikasi ke tingkat
di atas panel spasial pada sumbu Z yang Anda tetapkan dengan SpatialElevationLevel.
Hal ini membantu menarik perhatian pengguna, menciptakan hierarki yang lebih baik, dan meningkatkan keterbacaan, seperti yang ditunjukkan pada contoh berikut.
// Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr). SpatialElevation(elevation = SpatialElevationLevel.Level4) { ComposableThatShouldElevateInXr() }
Poin penting tentang kode
- Jangan menspasialisasi atau mengangkat area dan bidang besar seperti sheet bawah dan sheet samping.
- Jangan menaikkan elemen UI yang dapat di-scroll dengan konten.
Memigrasikan komponen 2D ke pengorbit
Orbiter adalah elemen mengambang yang biasanya berisi kontrol yang dapat digunakan pengguna untuk berinteraksi. Orbiter dapat ditambatkan ke panel spasial atau entitas lain seperti tata letak spasial. Orbiter memungkinkan konten memiliki lebih banyak ruang dan memberi pengguna akses cepat ke fitur tanpa menghalangi konten utama.
Kolom samping navigasi yang tidak di-spasialisasi
Kolom samping navigasi spasial (yang diadaptasi untuk XR)
Contoh kode berikut menunjukkan cara memigrasikan komponen UI 2D ke pengorbit.
// Previous approach NavigationRail() // New XR differentiated approach Orbiter( position = ContentEdge.Start, offset = dimensionResource(R.dimen.start_orbiter_padding), alignment = Alignment.Top ) { NavigationRail() }
Poin penting tentang pengorbit
- Orbiter adalah komponen yang dirancang untuk melampirkan elemen UI yang ada ke panel spasial
- Lihat panduan desain aplikasi Android XR kami untuk memverifikasi elemen yang akan dimigrasikan untuk pengorbit, dan pola yang harus dihindari.
- Sebaiknya hanya sesuaikan beberapa komponen navigasi seperti kolom samping navigasi, panel aplikasi atas, atau panel aplikasi bawah.
- Pengorbit tidak muncul saat UI spasial tidak diaktifkan. Misalnya, aplikasi tersebut tidak akan muncul di Ruang Utama atau di perangkat seperti ponsel, tablet, dan perangkat foldable.
Memigrasikan komponen 2D ke Panel spasial
Panel spasial adalah elemen penyusun fundamental UI aplikasi Android XR.
Panel berfungsi sebagai penampung untuk elemen UI, komponen interaktif, dan konten imersif. Saat mendesain, Anda dapat menambahkan komponen seperti pengorbit untuk kontrol pengguna, dan meningkatkan elemen UI secara spasial untuk menarik perhatian pada interaksi tertentu.
Poin penting tentang kode
- Lihat Panduan desain aplikasi Android XR untuk memverifikasi elemen mana yang akan dimigrasikan ke panel, dan pola yang harus dihindari.
- Ikuti praktik terbaik untuk penempatan panel spasial:
- Panel harus muncul di tengah 1,5 m dari mata pengguna.
- Konten harus muncul di tengah 41° bidang pandang pengguna.
- Panel tetap berada di tempatnya saat pengguna bergerak. Penyusunan hanya tersedia untuk passthrough.
- Gunakan sudut lengkung 32 dp yang direkomendasikan sistem untuk panel.
- Target sentuh harus berukuran 56 dp dan tidak lebih kecil dari 48 dp.
- Pertahankan rasio kontras untuk keterbacaan, terutama jika Anda menggunakan latar belakang transparan.
- Ikuti prinsip Warna desain Android dan gunakan sistem warna Desain Material untuk menerapkan tema gelap dan terang untuk aplikasi Anda.
- Gunakan spatial panels API dengan elemen UI yang ada.
Memigrasikan UI 2D ke panel spasial tunggal
Secara default, aplikasi Anda ditampilkan dengan satu panel di Ruang Rumah. Pelajari cara
beralih antara Ruang Rumah dan Ruang Penuh. Untuk menampilkan konten tersebut di FullSpace, Anda dapat menggunakan SpatialPanel.
Berikut contoh cara melakukannya.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) { Subspace { SpatialPanel( dragPolicy = MovePolicy(), resizePolicy = ResizePolicy(), ) { AppContent() } } } else { AppContent() }
Memigrasikan UI 2D ke beberapa panel spasial
Anda dapat menggunakan satu panel spasial untuk UI aplikasi, atau memigrasikan
UI 2D ke beberapa panel spasial. Jika memilih untuk menggunakan beberapa panel untuk
UI aplikasi, Anda dapat memosisikan dan memutar panel (mirip dengan menata
UI dalam 2D). Anda akan memulai dengan visi desain yang jelas tentang apa yang ingin dicapai, lalu Anda dapat menggunakan Spatial UI Layout API (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) dan pengubah subruang untuk memosisikan dan memutar panel.
Ada beberapa pola utama yang harus Anda hindari saat menerapkan beberapa panel.
- Hindari panel yang tumpang-tindih yang akan menghalangi pengguna melihat informasi penting.
- Hindari membuat pengguna bingung dengan panel.
- Hindari menempatkan panel di penempatan yang tidak nyaman atau tidak terlihat. Contoh: panel yang ditempatkan di belakang pengguna sulit diperhatikan.
- Untuk mengetahui informasi selengkapnya tentang mengembangkan UI spasial, lihat panduan lengkap kami.
Konten yang tidak di-spatialisasi
Kontrol media spasial (yang diadaptasi untuk XR) dalam orbiter dan konten yang dibagi menjadi beberapa panel spasial
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() } }
Memeriksa kemampuan spasial
Saat memutuskan apakah akan menampilkan elemen UI tertentu, hindari memeriksa
perangkat atau mode XR tertentu. Memeriksa perangkat atau mode, bukan kemampuan, dapat menyebabkan masalah saat kemampuan pada perangkat tertentu berubah seiring waktu. Sebagai gantinya, gunakan
LocalSpatialCapabilities.current.isSpatialUiEnabled untuk memeriksa secara langsung
kemampuan spasialisasi yang diperlukan seperti yang ditunjukkan dalam contoh berikut.
Pendekatan ini memastikan aplikasi Anda beradaptasi dengan benar ke berbagai pengalaman XR tanpa memerlukan update setiap kali perangkat baru muncul atau kemampuan berubah.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) { SupportingInfoPanel() } else { ButtonToPresentInfoModal() } // Similar check for audio val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled
Menggunakan lingkungan untuk mengubah suasana di sekitar pengguna
Saat ingin menciptakan nuansa imersif dalam aplikasi dengan mengubah lingkungan pengguna, Anda dapat melakukannya dengan lingkungan. Menambahkan lingkungan dalam kode adalah perubahan sederhana yang dapat Anda lakukan tanpa memengaruhi UI aplikasi yang sudah ada secara signifikan. Untuk mengetahui informasi selengkapnya tentang cara menyetel lingkungan, pastikan untuk melihat panduan lengkap kami.
Menambahkan konten 3D
Konten 3D seperti model 3D dan video spasial dapat membantu menciptakan pengalaman yang lebih imersif dan menambahkan pemahaman spasial. Aplikasi Anda hanya dapat menampilkan konten 3D jika kemampuan spasial tersedia, jadi sebaiknya periksa apakah kemampuan spasial tersedia terlebih dahulu.
Lihat panduan yang sesuai untuk menambahkan model 3D, video spasial atau audio spasial.