Anda dapat membangun aplikasi Android XR menggunakan OpenXR, API Android native, atau WebXR. Rekomendasi desain visual yang diuraikan di halaman ini berlaku terlepas dari platform yang Anda pilih.
Untuk aplikasi Unity, OpenXR, atau WebXR: Anda bebas mengikuti bahasa desain apa pun yang Anda pilih. Meskipun library Material Design hanya dapat diakses oleh aplikasi Android, Anda tetap dapat mengikuti rekomendasi desainnya untuk membantu menerapkan warna, jarak, skala, tombol, dan tipografi.
Untuk aplikasi Android: Aplikasi Android 2D seluler atau layar besar dapat memanfaatkan kemampuan Ruang Penuh dengan sedikit pekerjaan pengembangan tambahan. Untuk dampak XR yang tinggi, pertimbangkan untuk menggunakan UI spasial. Untuk menciptakan pengalaman aplikasi yang lebih imersif, Anda juga dapat menambahkan model 3D dan lingkungan ke aplikasi Anda.
Anda dapat mempertahankan bahasa desain aplikasi Android yang ada di Android XR. Untuk aplikasi baru atau desain ulang, pertimbangkan untuk mengikuti panduan Desain Material untuk ukuran UI, aksesibilitas, tipografi, skema warna, dan komponen, yang akan memberikan manfaat desain dan kegunaan Android yang sudah dikenal dan terbukti kepada aplikasi Anda.
Jika Anda membangun aplikasi Android menggunakan library Material Design 3, Anda dapat dengan mudah menambahkan perilaku UI spasial ke komponen dan tata letak adaptifnya.
Cara menguji desain visual aplikasi Anda
Menguji desain visual aplikasi Anda sangat penting untuk memastikan pengalaman pengguna yang nyaman dan dapat diakses. Berikut cara menguji di berbagai platform dan lingkungan XR.
Menggunakan emulator, simulator, dan perangkat sebenarnya
- Jika Anda mengembangkan aplikasi Android, uji aplikasi Anda di emulator Android XR. Hal ini membantu Anda mengidentifikasi potensi masalah dan melakukan iterasi dengan cepat tanpa perangkat fisik.
Checklist pengujian desain visual
- Uji setiap gerakan atau animasi untuk memastikan tidak memicu mabuk perjalanan. Periksa transisi yang lancar, kecepatan frame yang stabil, dan gerakan yang dapat diprediksi.
- Coba passthrough dalam setelan dunia nyata untuk memastikan elemen virtual berpadu dengan lingkungan fisik.
- Uji aplikasi Anda dalam kondisi pencahayaan yang berbeda, termasuk lingkungan yang terang dan redup.
- Periksa keterbacaan teks pada jarak dan sudut yang berbeda.
- Evaluasi skema warna untuk aksesibilitas dan kenyamanan.
Mengumpulkan masukan pengguna
Lakukan pengujian pengguna untuk mengidentifikasi area yang perlu ditingkatkan. Sertakan pengguna dengan tingkat pengalaman XR dan kemampuan visual yang berbeda-beda untuk mendapatkan perspektif yang komprehensif.
Target di Android XR
Dalam aplikasi XR, target adalah area yang dapat diketuk atau ditunjuk yang digunakan pengguna untuk berinteraksi. Target yang lebih besar meningkatkan presisi, kenyamanan, dan kegunaan. Untuk membuat aplikasi Anda dapat diakses, ikuti panduan target Desain Material. Aplikasi ini akan berfungsi dengan aplikasi Android, Unity, OpenXR, dan WebXR. Jika aplikasi Anda sudah mengikuti rekomendasi Desain Material, ukuran target Anda memenuhi minimum, meskipun 56 dp adalah yang paling optimal.
Semua elemen UI interaktif harus mempertimbangkan:
- Target yang direkomendasikan: 56 dp x 56 dp atau lebih besar
- Afordans visual (ikon): 48 dp x 48 dp atau lebih besar
- Offset antara target dan affordance visual: 4 dp
- Untuk interaksi yang akurat, target penunjuk dari elemen UI yang berbeda tidak boleh tumpang-tindih
- Target dan ikon diskalakan dengan penampung atau label induk, sesuai kebutuhan.
Pastikan Anda menambahkan status pengarahan kursor
Untuk meningkatkan aksesibilitas, sertakan status fokus dan arahkan kursor selain status interaktif dasar untuk komponen interaktif. Status pengarahan kursor dapat membantu semua orang, dan sangat penting bagi pengguna yang mengandalkan input penunjuk untuk memilih elemen UI.
Status mengarahkan kursor memainkan peran penting dalam mengaktifkan fungsi pelacakan mata dalam sistem. Namun, saat pelacakan mata diaktifkan, status mengambang tidak dapat diakses oleh aplikasi untuk melindungi privasi pengguna dan mencegah berbagi data. Sistem akan menggambar status sorotan yang hanya terlihat oleh pengguna untuk menyampaikan komponen UI mana yang dapat berinteraksi.
Jarak antar-target
Desain Material merekomendasikan ruang minimum 8 dp di antara target, termasuk tombol. Jarak ini memastikan bahwa pengguna dapat dengan mudah membedakan elemen interaktif dan menghindari pemilihan yang tidak disengaja.
Jarak tertentu antara tombol dapat bervariasi, bergantung pada konteks dan ukurannya. Beberapa faktor yang perlu dipertimbangkan:
- Ukuran tombol: Tombol yang lebih besar mungkin memerlukan lebih banyak ruang di antaranya untuk mempertahankan kejelasan visual.
- Pengelompokan tombol: Tombol yang terkait erat secara fungsional dapat dikelompokkan lebih dekat, sementara tombol yang tidak terkait harus memiliki pemisahan yang lebih jauh.
- Tata letak: Tata letak layar secara keseluruhan dapat memengaruhi jarak antar tombol. Misalnya, tombol di toolbar mungkin berjarak lebih dekat daripada tombol dalam dialog.
Ukuran dan skala panel
Android XR dirancang agar aplikasi Anda nyaman, mudah dibaca, dan dapat diakses oleh audiens yang luas. Untuk pengalaman yang optimal, Android XR menggunakan 0,868 dp-ke-dmm.
Jika Anda menggunakan panel, aplikasi XR Anda kemungkinan akan lebih jauh dari pengguna dibandingkan layar fisik. Pertimbangkan pengguna sedang memakai headset. Untuk kenyamanan optimal, tempatkan konten utama dalam bidang pandang 41° agar pengguna tidak perlu menggerakkan kepala untuk berinteraksi.
Rekomendasi
- Panel memiliki sudut bulat 32 dp. Anda dapat mengganti default ini.
Perilaku kedalaman panel
- Ruang Rumah: Aplikasi diluncurkan 1,75 meter dari pengguna, dan developer tidak dapat mengganti setelan ini.
- Ruang Penuh: Secara default, aplikasi diluncurkan di posisi yang sama seperti saat berada di Ruang Utama. Anda dapat menggunakan logika spasial untuk menempatkan panel berdasarkan posisi pengguna, meskipun kami merekomendasikan jarak peluncuran 1,75 meter.
Saat aplikasi berjarak 1,75 meter dari pengguna:
- 1024 dp dianggap sebagai 1556,24 milimeter
- 720dp dianggap sebagai 1093,66 milimeter
- 1 meter dalam realitas fisik = 1 meter dalam XR
Tombol dan ikon
Jika sudah memiliki aplikasi Android, Anda tidak perlu mendesain komponen khusus untuk Android XR. Ikuti panduan Desain Material untuk tombol dan ikon. Jika memiliki aplikasi Unity, OpenXR, atau WebXR, Anda dapat mempertahankan tombol dan ikon seperti apa adanya, atau terinspirasi oleh Material Design.
Jika Anda memutuskan untuk membuat tombol atau ikon sendiri, pilih bentuk sederhana, garis bersih, bentuk dasar, dan palet warna terbatas. Hindari desain yang terlalu mendetail. Buat agar dapat diskalakan dan mudah dibaca di berbagai resolusi dan jarak pandang. Untuk aksesibilitas, pastikan kontras yang memadai antara komponen dan latar belakangnya, serta berikan deskripsi teks atau tooltip untuk pengguna dengan pembaca layar atau teknologi pendukung lainnya.
Warna
Android XR mengikuti sistem warna Desain Material untuk memastikan antarmuka yang konsisten dan menarik secara visual. Untuk menciptakan gaya visual imersif yang disesuaikan dengan XR, desain dengan kontras yang memadai, pilih palet yang seimbang, gunakan warna yang dapat diakses oleh pengguna dengan gangguan penglihatan warna, dan hindari kombinasi yang tidak serasi yang dapat menyebabkan ketegangan mata atau disorientasi.
Tema gelap dan terang di XR
Gunakan tema gelap dan terang seperti yang Anda lakukan di aplikasi seluler Android. Pengguna dapat beralih antara tema gelap dan terang di Android XR, memilih gaya visual yang paling sesuai dengan preferensi masing-masing.
Pelajari lebih lanjut skema warna Desain Material.
Tipografi XR
Keterbacaan font sangat penting untuk pengalaman pengguna yang nyaman di XR. Sebaiknya gunakan opsi skala huruf dengan ukuran font 14 dp atau lebih besar, dan ketebalan font normal atau lebih tinggi untuk meningkatkan keterbacaan.
Untuk membuat aplikasi yang mudah digunakan, pertimbangkan untuk mengikuti panduan tipografi Desain Material.
Praktik terbaik untuk tipografi dalam XR
- Ukuran untuk jarak yang bervariasi: Ingatlah bahwa pengguna akan bergerak dan melihat teks dari berbagai lokasi. Pastikan ukuran font cukup besar untuk dibaca dari jauh.
- Posisikan teks di bidang pandang alami pengguna: Hal ini akan menghindari gerakan kepala yang berlebihan dan ketegangan leher.
- Pertimbangkan kedalaman dan skala: Gunakan isyarat kedalaman dan skala untuk membuat hierarki di ruang 3D.
- Pastikan teks dapat dibaca dengan jelas di latar belakang pengguna: Ketebalan huruf yang lebih besar menawarkan kontras yang lebih baik. Sesuaikan berdasarkan warna, pencahayaan, dan kompleksitas lingkungan.
- Gunakan tipografi yang dapat disesuaikan: Panel mungkin terlalu dekat, terlalu jauh, dan berada pada sudut pandang yang tidak nyaman bagi pengguna.
- Batasi teks yang dilampirkan ke objek bergerak: Hal ini dapat menyebabkan mabuk gerak.
Tipografi yang aksesibel di XR
- Pilih font agar mudah dibaca: Utamakan font dengan bentuk huruf yang jelas pada ukuran kecil dan jarak jauh.
- Gunakan teks dengan kapitalisasi kalimat: Teks dengan kapitalisasi kalimat lebih mudah dibaca daripada teks huruf besar.
- Batasi panjang baris: Usahakan panjang baris lebih pendek untuk meningkatkan keterbacaan.
- Pilih warna yang mudah diakses: Gunakan kombinasi warna yang mudah dibaca oleh pengguna dengan perbedaan penglihatan warna.
- Hindari terlalu banyak teks: Beri ruang kosong yang cukup untuk teks.
- Izinkan penskalaan teks: Mengizinkan pengguna menyesuaikan ukuran teks agar sesuai dengan kebutuhan masing-masing.
OpenXR™ dan logo OpenXR adalah merek dagang yang dimiliki oleh The Khronos Group Inc. dan terdaftar sebagai merek dagang di China, Uni Eropa, Jepang, dan Inggris Raya.