Các ứng dụng sử dụng bố cục thích ứng và tự động điều chỉnh theo nhiều kích thước màn hình sẽ mang lại thêm giá trị cho người dùng và mang đến trải nghiệm hiệu quả, hấp dẫn hơn cho người dùng.
Bố cục thích ứng tự động định dạng và định vị các phần tử như nút, trường văn bản và hộp thoại để mang lại trải nghiệm tối ưu cho người dùng. Tự động cung cấp thêm giá trị cho người dùng ứng dụng trên màn hình lớn bằng cách sử dụng các phương pháp thiết kế thích ứng. Cho dù đó là nhiều văn bản hiển thị nhanh hơn, nhiều thao tác hơn trên màn hình hay các mục tiêu nhấn lớn hơn, dễ tiếp cận hơn, các phương pháp thích ứng đều mang lại trải nghiệm nâng cao cho người dùng màn hình lớn.
Tăng giá trị thông qua thiết kế thích ứng
Nên
- Sử dụng thư viện thành phần Compose M3 có tích hợp sẵn hành vi thích ứng và thích ứng.
- Sử dụng bố cục thích ứng, tự động và mượt mà điều chỉnh để lấp đầy không gian có sẵn trên các kích thước màn hình.
Không nên
- Kéo giãn các thành phần trên giao diện người dùng (bao gồm cả trường văn bản, nút, hộp thoại) để lấp đầy không gian thừa.
- Tăng kích thước phông chữ, trừ khi phông chữ đó chủ yếu phục vụ mục đích đồ hoạ.
Xây dựng ứng dụng và thẻ thông tin thích ứng cho Wear OS
Giao diện người dùng thích ứng kéo giãn và thay đổi để tận dụng tối đa mọi không gian màn hình có sẵn, bất kể màn hình có kích thước như thế nào.
Khi thiết kế bố cục thích ứng trên màn hình tròn, các thành phần hiển thị cuộn và không cuộn đều có các yêu cầu riêng để duy trì tỷ lệ phần tử giao diện người dùng và duy trì bố cục và thành phần cân bằng. Đối với thành phần hiển thị cuộn, hãy sử dụng tỷ lệ phần trăm để xác định tất cả lề trên cùng, dưới cùng và bên để tránh bị cắt và cung cấp tỷ lệ phần trăm tương ứng của các phần tử. Đối với các thành phần hiển thị không cuộn, hãy sử dụng tỷ lệ phần trăm và các quy tắc ràng buộc theo chiều dọc cho tất cả lề. Bằng cách đó, nội dung chính ở giữa có thể kéo giãn để lấp đầy khu vực có sẵn.
Chế độ xem cuộn
Tất cả lề trên cùng, dưới cùng và bên phải đều phải được xác định theo tỷ lệ phần trăm để tránh bị cắt và cung cấp tỷ lệ phần trăm tương ứng của các phần tử.
Khung hiển thị không cuộn
Tất cả lề phải được xác định theo tỷ lệ phần trăm và các điều kiện ràng buộc theo chiều dọc phải được xác định sao cho nội dung chính ở giữa có thể kéo giãn để lấp đầy vùng có sẵn.
Ví dụ
Hình ảnh sau đây cho thấy ví dụ về các ứng dụng có khả năng thích ứng và được tối ưu hoá.
Nút ôm sát cạnh
Danh sách thẻ
Danh sách các nút chuyển và nút
Thẻ thông tin có thẻ hình ảnh
Danh sách thẻ có hình ảnh
Thẻ thông tin có biểu đồ
