Saat membuat aplikasi yang berbeda untuk Android XR, Anda mungkin ingin menggunakan 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 detail di halaman ini). Anda juga dapat menggabungkan video spasial dalam desain Anda.
Panel spasial
Panel spasial adalah elemen penyusun fundamental dari aplikasi Android XR. Anda dapat menggunakannya untuk membangun pengalaman yang berbeda dengan XR pada 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 otomatis menyesuaikan ukurannya berdasarkan jaraknya dari pengguna. Penskalaan dinamis ini memastikan elemen UI tetap dapat dibaca dan interaktif saat dilihat dari jarak yang berbeda. Ukurannya tetap konsisten antara 0,75 meter dan 1,75 meter. Kemudian, rasio penskalaan bertambah 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 memperbesar atau memperkecil panel spasial agar cukup besar untuk dilihat dengan jelas, terlepas dari jaraknya 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 banyak audiens. Untuk pengalaman yang optimal, sistem menggunakan 0,868 dp-ke-dmm. Saat dilihat di headset, aplikasi Anda akan tampak lebih jauh dari pengguna dibandingkan saat mereka melihat aplikasi di ponsel atau tablet, sehingga aplikasi harus lebih besar agar mudah digunakan.
Di Ruang Penuh, tidak ada ukuran minimum untuk panel spasial, dan ukuran maksimumnya adalah 2560 dp x 1800 dp karena batasan fisik.
Tempat menempatkan panel spasial
Di Ruang Penuh, Anda dapat menentukan penempatan panel di lingkungan passthrough dan virtual. Saat pengguna beralih dari Ruang Utama ke Ruang Penuh, elemen tetap berada di posisi yang sama dan dapat diprediksi, kecuali jika Anda menetapkan posisi kustom.
Munculkan pusat panel 1,75 meter dari garis pandang pengguna. Tempatkan bagian tengah vertikal panel 5° di bawah ketinggian mata pengguna untuk memaksimalkan kenyamanan, karena pengguna cenderung melihat ke bawah.
Untuk kenyamanan optimal, tempatkan konten di tengah 41° ruang pandang pengguna. Hal ini akan memastikan visibilitas yang jelas dan meminimalkan kebutuhan akan gerakan kepala atau tubuh yang berlebihan.
Pengguna dapat bergerak di ruang mereka, 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 memosisikan elemen UI secara relatif terhadap objek dunia nyata di ruang mereka, Anda dapat mengizinkan mereka menambatkan panel spasial ke lokasi tertentu di dunia nyata, seperti lantai, kursi, dinding, langit-langit, atau meja. Penambatan hanya tersedia dalam passthrough.
Untuk membantu pengguna merasa stabil dan terorientasi dengan baik, Anda dapat mengizinkan pengguna menambatkan panel spasial ke lokasi tertentu di dunia nyata, seperti lantai, kursi, dinding, langit-langit, atau meja. Penambatan 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
Video spasial
Video spasial dapat menambahkan nuansa imersif dan berdimensi ke konten Anda. Anda dapat menggabungkannya ke dalam desain sebagai video monoskopis atau stereoskopis yang ditampilkan di permukaan datar, hemisferis 180°, atau sferis 360°.
Orbiter
Orbiter adalah elemen UI mengambang yang biasanya digunakan untuk mengontrol konten dalam panel spasial dan entitas lain yang dijadikan anchor. Orbiter 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 dengan hemat dan dengan mempertimbangkan kebutuhan dan niat pengguna secara cermat. Sejumlah besar elemen UI spasial dapat menyebabkan kelelahan konten dan membuat pengguna kewalahan dengan tindakan yang bersaing secara berlebihan. Sebaiknya adaptasikan beberapa komponen navigasi utama, seperti kolom samping navigasi atau menu navigasi.
Kolom samping navigasi non-spasial dari Desain Material di Ruang Utama
Kolom samping navigasi spasial dari Desain Material di Ruang Penuh
Menu navigasi non-spasial dari Desain Material di Ruang Utama
Menu navigasi spasial dari Desain Material di Ruang Penuh
Panduan
- Sesuaikan padding ke panel untuk menentukan posisi flex atau persentasenya.
- Menentukan offset pengorbit. 20 dp adalah jarak visual yang direkomendasikan.
- Sesuaikan tingkat elevasi orbiter jika diperlukan menggunakan tingkat elevasi spasial. Secara default, tombol ini ditinggikan 15 dp dalam kedalaman Z.
- 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 penggunaan terlalu banyak pengorbit.
Elevasi spasial
Saat Anda menambahkan elevasi spasial ke komponen, komponen tersebut akan ditampilkan di atas panel spasial pada sumbu Z. Hal ini membantu menarik perhatian pengguna, menciptakan hierarki yang lebih baik, dan meningkatkan keterbacaan.
| Tingkat Elevasi Spasial | Komponen | DP |
|---|---|---|
| 0 | Tidak Ditugaskan | .1dp |
| 1 | Orbit | 16dp |
| 2 | Tidak ditugaskan | 24dp |
| 3 | SpatialPopup | 32dp |
| 4 | Tidak ditugaskan | 40dp |
| 5 | SpatialDialog | 56dp |
Dialog Desain Material di aplikasi layar besar
Dialog yang menggunakan elevasi spasial di Android XR
Menu drop-down Desain Material di aplikasi layar besar
Menu drop-down yang menggunakan elevasi di Android XR
Pola desain yang harus dihindari
- Hindari memberikan efek spasial atau meninggikan area dan bidang yang besar seperti panel bawah dan panel samping.
- Hindari menaikkan elemen UI dengan konten yang dapat di-scroll.
Mendesain ukuran target yang besar
Di aplikasi XR, target adalah area yang dapat ditunjuk dan digunakan pengguna untuk berinteraksi. Android XR mematuhi panduan target Desain Material, dan merekomendasikan target yang lebih besar untuk meningkatkan presisi, kenyamanan, dan kegunaan.
Pelajari target dan status kursor XR.
Membuat tipografi dapat diakses
Keterbacaan font sangat penting untuk pengalaman pengguna yang nyaman di XR. Sebaiknya gunakan opsi skala jenis dengan ukuran font 14 dp atau lebih besar, dan ketebalan font normal atau lebih tinggi untuk meningkatkan keterbacaan.
Jika aplikasi yang sudah ada mengikuti pedoman Desain Material, berarti aplikasi tersebut sudah dioptimalkan untuk Android XR. Anda dapat menentukan tipografi aplikasi baru berdasarkan Desain Material.
Menggunakan komponen dan tata letak Desain Material
Manfaatkan library komponen Desain Material dan tata letak adaptif saat mendesain aplikasi Android XR. Elemen penyusun 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 di 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.