Menerapkan Desain Material untuk UI spasial Anda

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Mempelajari jenis perangkat XR →
Headset XR
Kacamata XR Berkabel
Mempelajari jenis perangkat XR →

Desain Material menyediakan komponen dan tata letak yang beradaptasi untuk XR. Dengan menggunakan library Material 3 yang ada, komponen dan tata letak adaptif ditingkatkan dengan perilaku UI spasial.

Panel navigasi di tata letak Compose apa pun, termasuk NavigationSuiteScaffold akan otomatis beradaptasi dengan XR Orbiter. Untuk mengetahui informasi selengkapnya, baca Pedoman Desain Material.

Kolom samping navigasi non-spasialisasi

Kolom samping navigasi yang tidak di-spasialisasi

Panel navigasi yang disesuaikan untuk XR

Kolom samping navigasi spasialisasi (yang diadaptasi untuk XR)

Panel navigasi di tata letak Compose apa pun, termasuk NavigationSuiteScaffold akan otomatis beradaptasi dengan pengorbit XR. Untuk mengetahui informasi selengkapnya, baca Pedoman Desain Material.

Menu navigasi yang tidak dispaialisasi

Menu navigasi yang tidak di-spatialisasi

Menu navigasi yang dispatialisasi (diadaptasi untuk XR)

Menu navigasi yang disesuaikan untuk XR

Dialog

BasicAlertDialog akan beradaptasi dengan XR, menambahkan elevasi ke komponen.

Pelajari lebih lanjut Dialog dan panduan desain adaptif.

Dialog non-spasial

Dialog non-spasialisasi

Dialog yang dispatialisasi (diadaptasi untuk XR)

Dialog yang disesuaikan untuk XR (spasialisasi)

Panel aplikasi atas

TopAppBar akan otomatis beradaptasi dengan pengorbit XR.

Pelajari lebih lanjut Panel aplikasi atas dan panduan desain adaptif.

Panel aplikasi atas yang tidak di-spasialisasi

Panel aplikasi atas yang tidak di-spasialisasi

Panel aplikasi teratas yang dispatialisasi (diadaptasi untuk XR)

Panel aplikasi atas yang disesuaikan untuk XR

Tata letak daftar-detail untuk XR

Compose Material 3 Adaptive Layouts di XR memiliki pemetaan 1:1 di mana setiap panel ditempatkan di dalam panel spasial XR-nya sendiri. Pelajari lebih lanjut ListDetailPaneScaffold dan panduan desain adaptif.

Non-spasialisasi ListDetailPaneScaffold

ListDetailPaneScaffold yang tidak di-spasialisasi

Spasialisasi (diadaptasi untuk XR) ListDetailPaneScaffold

ListDetailPaneScaffold yang dispatialisasi (diadaptasi untuk XR)

Tata letak panel pendukung untuk XR

Compose Material 3 Adaptive Layouts di XR memiliki pemetaan 1:1 di mana setiap panel ditempatkan di dalam panel spasial XR-nya sendiri. Pelajari lebih lanjut SupportingPaneScaffold dan panduan desain adaptif.

Non-spatialized SupportingPaneScaffold

Non-spatialized SupportingPaneScaffold

Spasialisasi (diadaptasi untuk XR) SupportingPaneScaffold

Spatialized (XR-adapted) SupportingPaneScaffold

Mulai mendesain dengan Kit Desain Material 3 untuk Figma

Kolase elemen dari Kit Desain Material 3

Download Kit Desain Material 3 untuk memulai

Lihat juga