Jika memiliki aplikasi Android dan ingin mempertahankan gaya visualnya, Anda dapat mempertahankan bahasa desain tersebut di Android XR. Untuk aplikasi baru atau desain ulang, pertimbangkan untuk mengikuti panduan Desain Material untuk ukuran UI, aksesibilitas, tipografi, skema warna, dan komponen.
Aplikasi Android seluler 2D atau layar besar dapat memanfaatkan kemampuan Ruang Penuh dengan sedikit sekali pekerjaan pengembangan tambahan. Untuk dampak XR yang tinggi, pertimbangkan untuk membuat panel spasial dan membuat UI spasial. Untuk perjalanan pengguna yang lebih imersif, pertimbangkan untuk menambahkan model 3D dan lingkungan.
Jika memiliki atau mem-build aplikasi Unity, Open XR, atau WebXR, Anda bebas mengikuti bahasa desain apa pun yang Anda pilih. Rekomendasi desain yang diberikan oleh Desain Material dapat membantu Anda menerapkan warna, spasi, skala, tombol, dan tipografi.
Cara menguji desain visual aplikasi
Menguji desain visual aplikasi Anda sangat penting untuk memastikan pengalaman pengguna yang nyaman dan mudah 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 gerakan atau animasi apa pun untuk memastikannya 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 berbaur dengan lingkungan fisik.
- Uji aplikasi Anda dalam berbagai kondisi pencahayaan, termasuk lingkungan terang dan redup.
- Periksa keterbacaan teks pada berbagai jarak dan sudut.
- Evaluasi skema warna untuk aksesibilitas dan kenyamanan.
Mengumpulkan masukan pengguna
Lakukan pengujian pengguna untuk mengidentifikasi area yang perlu ditingkatkan. Sertakan pengguna dengan berbagai tingkat pengalaman XR dan kemampuan visual untuk perspektif yang komprehensif.
Target di Android XR
Di aplikasi XR, target adalah area yang dapat diketuk atau ditunjuk yang berinteraksi dengan pengguna. Target yang lebih besar meningkatkan presisi, kenyamanan, dan kegunaan. Agar aplikasi Anda dapat diakses, ikuti panduan target Desain Material. API ini akan berfungsi dengan aplikasi Android, Unity, OpenXR, dan WebXR. Jika aplikasi Anda sudah mengikuti rekomendasi Desain Material, ukuran target Anda memenuhi ukuran minimum, meskipun 56 dp adalah ukuran yang optimal.
Semua elemen UI interaktif harus mempertimbangkan:
- Target yang direkomendasikan: 56dp x 56dp atau lebih besar
- Affordance visual: 48dp x 48dp atau lebih besar
- Offset antara target dan affordance visual: 4dp
- Untuk interaksi yang akurat, target pointer dari elemen UI yang berbeda tidak boleh tumpang-tindih
Pastikan Anda menambahkan status pengarahan kursor
Untuk meningkatkan aksesibilitas, sertakan status pengarahan kursor dan fokus selain status interaktif dasar untuk komponen interaktif. Status pengarahan kursor dapat berguna untuk semua orang, dan sangat penting bagi pengguna yang mengandalkan input pointer untuk memilih elemen UI.
Status pengarahan kursor memainkan peran penting dalam mengaktifkan fungsi pelacakan mata dalam sistem. Namun, saat pelacakan mata diaktifkan, status pengarahan kursor tidak dapat diakses oleh aplikasi untuk melindungi privasi pengguna dan mencegah berbagi data. Sistem akan menggambar status sorotan khusus yang terlihat 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 spesifik antartombol 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, sedangkan tombol yang tidak terkait harus memiliki lebih banyak pemisahan.
- Tata letak: Tata letak layar secara keseluruhan dapat memengaruhi spasi antar tombol. Misalnya, tombol di toolbar mungkin memiliki jarak yang lebih rapat daripada tombol dalam dialog.
Ukuran dan skala panel
Android XR dirancang untuk membuat aplikasi Anda nyaman, mudah dibaca, dan dapat diakses oleh audiens yang luas. Untuk pengalaman yang optimal, Android XR menggunakan 0,868 dp-to-dmm.
Jika Anda menggunakan panel, aplikasi XR Anda kemungkinan akan lebih jauh dari pengguna daripada layar fisik. Pertimbangkan pengguna yang memakai headset. Untuk kenyamanan yang optimal, tempatkan konten utama dalam bidang pandang 41° sehingga pengguna tidak perlu menggerakkan kepala untuk berinteraksi.
Rekomendasi
- Panel memiliki sudut membulat 32 dp. Anda dapat mengganti setelan default ini.
Perilaku kedalaman panel
- Ruang Rumah: Aplikasi diluncurkan 1,75 meter dari pengguna, dan developer tidak dapat mengganti ini.
- Ruang Penuh: Secara default, aplikasi diluncurkan di posisi yang sama dengan posisinya di Ruang Beranda. Anda dapat menggunakan logika spasial untuk menempatkan panel berdasarkan posisi pengguna, meskipun kami merekomendasikan jarak peluncuran 1,75 meter.
Jika aplikasi berjarak 1,75 meter dari pengguna:
- 1024dp dirasakan sebagai 1.556,24 milimeter
- 720dp dianggap sebagai 1.093,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 Desain Material.
Jika Anda memutuskan untuk membuat tombol atau ikon sendiri, pilih bentuk sederhana, garis yang 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 membuat gaya visual imersif yang disesuaikan dengan XR, desain dengan kontras yang memadai, pilih palet yang seimbang, gunakan warna yang dapat diakses oleh pengguna dengan kekurangan penglihatan warna, dan hindari kombinasi yang mencolok 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, dengan 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 typescale dengan ukuran font 14dp 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 di XR
- Ukuran untuk jarak variabel: Perlu diingat 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 menghindari gerakan kepala dan ketegangan leher yang berlebihan.
- Pertimbangkan kedalaman dan skala: Gunakan kedalaman dan skala untuk membuat hierarki di ruang 3D.
- Pastikan teks dapat dibaca dengan latar belakang pengguna: Ketebalan yang lebih berat menawarkan lebih banyak kontras. Sesuaikan bergantung pada warna, pencahayaan, dan kompleksitas lingkungan.
- Gunakan tipografi yang dapat disesuaikan: Panel mungkin terlalu dekat, terlalu jauh, dan pada sudut tampilan yang canggung dari pengguna.
- Batasi teks yang dilampirkan ke objek yang bergerak: Hal ini dapat menyebabkan mabuk perjalanan.
Tipografi yang aksesibel di XR
- Memilih font untuk keterbacaan: Prioritaskan font dengan bentuk huruf yang jelas dalam ukuran kecil dan jarak jauh.
- Gunakan teks kapitalisasi kalimat: Teks kapitalisasi kalimat lebih mudah dibaca daripada teks huruf besar.
- Batasi panjang baris: Usahakan panjang baris yang lebih pendek untuk meningkatkan keterbacaan.
- Pilih warna yang mudah diakses: Gunakan kombinasi warna yang dapat dibaca oleh pengguna dengan perbedaan penglihatan warna.
- Hindari penumpukan: Berikan ruang yang cukup untuk teks.
- Izinkan penskalaan teks: Izinkan pengguna menyesuaikan ukuran teks untuk memenuhi kebutuhan masing-masing.