Triển khai Material Design cho giao diện người dùng không gian

Các thiết bị XR được hỗ trợ

Hướng dẫn này giúp bạn xây dựng các trải nghiệm cho những loại thiết bị XR sau.

Tìm hiểu về các loại thiết bị XR →

Tìm hiểu về các loại thiết bị XR →

Material Design cung cấp các thành phần và bố cục phù hợp với XR. Khi sử dụng thư viện Material 3 hiện có, các thành phần và bố cục thích ứng sẽ được tăng cường bằng các hành vi giao diện người dùng không gian.

Dải điều hướng

Thanh điều hướng trong mọi bố cục Compose, kể cả NavigationSuiteScaffold sẽ tự động điều chỉnh cho phù hợp với XR Orbiter. Để biết thêm thông tin, hãy đọc Nguyên tắc thiết kế theo ngôn ngữ Material.

Thanh điều hướng

Thanh điều hướng trong mọi bố cục Compose, bao gồm cả NavigationSuiteScaffold sẽ tự động điều chỉnh cho phù hợp với thiết bị XR. Để biết thêm thông tin, hãy đọc Nguyên tắc thiết kế theo ngôn ngữ Material.

Hộp thoại

BasicAlertDialog sẽ thích ứng với XR, thêm độ nâng cho thành phần.

Tìm hiểu thêm về Hộp thoại và nguyên tắc thiết kế thích ứng.

Thanh ứng dụng trên cùng

TopAppBar sẽ tự động thích ứng với thiết bị hỗ trợ thực tế mở rộng (XR).

Tìm hiểu thêm về Thanh ứng dụng trên cùng và nguyên tắc thiết kế thích ứng.

Bố cục danh sách-chi tiết cho XR

Bố cục thích ứng Material 3 trong XR có mối liên kết 1:1, trong đó mỗi ngăn được đặt bên trong bảng điều khiển không gian XR riêng. Tìm hiểu thêm về ListDetailPaneScaffold và nguyên tắc về thiết kế thích ứng.

Bố cục ngăn hỗ trợ cho XR

Bố cục thích ứng Material 3 trong XR có mối liên kết 1:1, trong đó mỗi ngăn được đặt bên trong bảng điều khiển không gian XR riêng. Tìm hiểu thêm về SupportingPaneScaffold và nguyên tắc về thiết kế thích ứng.

Bắt đầu thiết kế bằng Bộ công cụ thiết kế Material 3 cho Figma

Tải Bộ thiết kế Material 3 xuống để bắt đầu

Xem thêm

• Phát triển giao diện người dùng bằng Jetpack Compose cho XR
• Nguyên tắc thiết kế giao diện người dùng không gian