Saat mem-build aplikasi Android XR yang terdiferensiasi, sebaiknya gunakan UI spasial untuk menempatkan konten di lingkungan fisik atau virtual pengguna. Anda dapat membagi aplikasi menjadi panel spasial, orbiter, dan menambahkan elevasi spasial (dijelaskan secara lebih mendetail di halaman ini).
Menggunakan komponen dan tata letak Desain Material
Manfaatkan library komponen Desain Material dan tata letak adaptif saat mendesain aplikasi Android XR. Blok pembangunan interaktif ini membantu mempercepat pengembangan sehingga Anda dapat berfokus pada fungsi inti dan inovasi.
Desain Material untuk XR meningkatkan komponen Material 3 dan tata letak adaptif dengan perilaku UI spasial. Hal ini dapat membuat aplikasi Anda terasa lebih native untuk platform dan mengoptimalkan ruang.
Anda juga dapat melakukan spasialisasi komponen UI yang ada dengan menempatkannya di orbiter dan menerapkan elevasi spasial, seperti yang dijelaskan di halaman ini.
Download Kit Desain Material 3 untuk memulai.
Panel spasial
Panel spasial adalah elemen penyusun dasar aplikasi Android XR. Anda dapat menggunakannya untuk membuat pengalaman yang berbeda dengan XR di layar tanpa batas, dengan konten yang diperluas di seluruh ruang pengguna. Panel spasial berfungsi sebagai penampung untuk elemen UI, komponen interaktif, dan konten imersif.
Memahami cara UI diskalakan dan dipindahkan
Panel spasial secara otomatis menyesuaikan ukurannya berdasarkan jarak dari pengguna. Penskalaan dinamis ini memastikan bahwa elemen UI tetap dapat dibaca dan interaktif saat dilihat dari berbagai jarak. Ukurannya tetap konsisten antara 0,75 meter dan 1,75 meter. Kemudian, rasio penskalaan tumbuh sebesar 0,5 meter per meter, dan elemen akan tampak lebih kecil.
Untuk menghindari konflik dengan UI sistem, tetap berada dalam batas gerakan panel default:
- Kedalaman minimum: 0,75 meter dari pengguna
- Kedalaman maksimum: 5 meter dari pengguna
Pengguna dapat menskalakan panel spasial ke atas atau ke bawah agar cukup besar untuk dilihat dengan jelas, terlepas dari jarak dari pengguna. Saat pengguna memindahkan panel spasial, Android XR akan otomatis menskalakan ukurannya.
Ukuran panel spasial
Android XR dirancang untuk membuat aplikasi Anda nyaman, mudah dibaca, dan dapat diakses oleh audiens yang luas. Untuk pengalaman optimal, sistem menggunakan 0,868 dp-to-dmm. Saat dilihat di headset, aplikasi Anda akan tampak lebih jauh dari pengguna daripada saat mereka melihat aplikasi di ponsel atau tablet, sehingga harus lebih besar agar mudah digunakan.
Di Ruang Penuh, tidak ada ukuran minimum untuk panel spasial, dan maksimumnya adalah 2560dp x 1800dp karena batasan fisik.
Tempat untuk menempatkan panel spasial
Di Ruang Penuh, Anda dapat menentukan penempatan panel di lingkungan passthrough dan virtual. Saat pengguna beralih dari Ruang Beranda ke Ruang Penuh, elemen tetap berada di posisi yang sama dan dapat diprediksi, kecuali jika Anda menetapkan posisi kustom.
Buat pusat panel 1,75 meter dari garis pandang pengguna. Tempatkan pusat vertikal panel 5° di bawah tingkat mata pengguna untuk memaksimalkan kenyamanan, karena pengguna cenderung melihat ke bawah.
Untuk kenyamanan yang optimal, tempatkan konten di bagian tengah 41° dari ruang pandang pengguna. Hal ini akan memastikan visibilitas yang jelas dan meminimalkan kebutuhan untuk gerakan kepala atau tubuh yang berlebihan.
Pengguna dapat berpindah-pindah di ruangnya, dan panel spasial akan tetap berada di tempatnya.
Android XR menyertakan pola interaksi siap pakai untuk memudahkan pengguna memanipulasi elemen dan menyederhanakan proses pengembangan Anda. Pengguna dapat memindahkan elemen untuk menyesuaikan dengan ruang pribadinya. Anda dapat mengonfigurasi perilaku pemindahan dan pengubahan ukuran.
Untuk membantu pengguna merasa stabil dan berorientasi dengan baik, Anda dapat mengizinkan pengguna untuk melampirkan panel spasial ke lokasi tertentu di dunia nyata, seperti lantai, kursi, dinding, langit-langit, atau meja. Penyematan hanya tersedia dalam passthrough.
Membuat tata letak spasial Anda sendiri
Anda dapat menguraikan aplikasi menjadi beberapa panel spasial, dalam tata letak apa pun yang Anda pilih. API UI spasial tidak membatasi jumlah panel. Kemampuan ini mencakup kemampuan untuk membuat tata letak dengan baris dan kolom, serta baris datar dan melengkung. Posisi panel spasial dapat bersifat spesifik atau arbitrer. Pelajari cara mengembangkan tata letak UI spasial.
|
|
|
Tata letak baris datar |
Tata letak baris melengkung |
Tata letak posisi arbitrer |
Orbiter
Orbiter adalah elemen UI mengambang yang mengontrol konten dalam panel spasial. Hal ini memungkinkan konten memiliki lebih banyak ruang, dan pengguna dapat dengan cepat mengakses fitur saat konten utama tetap terlihat. Orbiter memberi Anda fleksibilitas untuk mengintegrasikan komponen UI yang ada atau membuat komponen baru.
Orbiter harus digunakan seperlunya dan dengan pertimbangan yang cermat terhadap kebutuhan dan niat pengguna. Banyaknya elemen UI yang di-spatialisasi dapat menyebabkan kelelahan konten dan membuat pengguna kewalahan dengan tindakan bersaing yang berlebihan. Sebaiknya sesuaikan beberapa komponen navigasi utama, seperti kolom samping navigasi atau menu navigasi.
Panduan
- Sesuaikan padding ke panel untuk menentukan posisi fleksibel atau persentasenya.
- Menentukan posisi sumbu Y orbiter. 20 dp adalah jarak visual yang direkomendasikan.
- Sesuaikan tingkat elevasi orbiter jika diperlukan melalui tingkat elevasi spasial. Secara default, kedalaman Z-nya dinaikkan 15 dp.
- Ukuran dapat bersifat tetap atau fleksibel saat panel diubah ukurannya.
- Tentukan apakah Anda ingin orbiter diperluas secara dinamis agar sesuai dengan konten.
Pola desain yang harus dihindari
- Hindari tumpang-tindih orbiter lebih dari 50% ukurannya.
- Hindari menempatkan orbiter terlalu jauh dari panel spasial.
- Jangan gunakan koordinat X atau Y absolut.
- Hindari menggunakan terlalu banyak orbiter.
Elevasi spasial
Saat Anda menambahkan elevasi spasial ke komponen, elevasi akan ditampilkan di atas panel spasial pada sumbu Z. Hal ini membantu menarik perhatian pengguna, menciptakan hierarki yang lebih baik, dan meningkatkan keterbacaan.
Pola desain yang harus dihindari
- Hindari melakukan spasialisasi atau mengangkat area dan bidang besar seperti sheet bawah dan sheet samping.
- Hindari mengangkat elemen UI dengan konten yang dapat di-scroll.
Mendesain ukuran target besar
Di aplikasi XR, target adalah area yang dapat diarahkan yang berinteraksi dengan pengguna. Android XR mematuhi panduan target Desain Material, dan merekomendasikan target yang lebih besar untuk meningkatkan presisi, kenyamanan, dan kegunaan.
Pelajari target dan status pengarahan kursor XR.
Membuat tipografi mudah diakses
Keterbacaan font sangat penting untuk pengalaman pengguna yang nyaman di XR. Sebaiknya gunakan opsi typescale dengan ukuran font 14dp atau lebih besar, dan ketebalan font normal atau lebih tinggi untuk meningkatkan keterbacaan.
Jika aplikasi yang ada mengikuti pedoman Desain Material, aplikasi tersebut sudah dioptimalkan untuk Android XR. Anda dapat menentukan tipografi aplikasi baru berdasarkan Desain Material.