Hệ sinh thái Wear OS bao gồm các thiết bị có nhiều kích thước màn hình. Việc sử dụng các nguyên tắc giao diện người dùng thích ứng là yếu tố quan trọng để mang lại trải nghiệm chất lượng cao nhất cho tất cả người dùng.
Giao diện người dùng thích ứng là gì?
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.
Giao diện người dùng thích ứng thay đổi một cách linh hoạt, sử dụng các thành phần và phương thức được tích hợp trực tiếp vào logic bố cục. Các bố cục này cũng sử dụng các điểm ngắt kích thước màn hình – áp dụng một thiết kế khác nhau trên các kích thước màn hình khác nhau – để tạo ra trải nghiệm phong phú hơn cho người dùng.
Kích thước màn hình chính

Tìm hiểu về các kích thước tham chiếu chính cần lưu ý khi thiết kế trải nghiệm mới
Các loại bố cục
Khi thiết kế bố cục thích ứng trên màn hình tròn, chế độ xem cuộn và không cuộn đều có các yêu cầu riêng để điều chỉnh theo tỷ lệ các thành phần trên giao diện người dùng và duy trì bố cục và thành phần cân bằng.

Tất cả lề trên, dưới và bên phải phải được xác định theo tỷ lệ phần trăm để tránh cắt bớt và cung cấp tỷ lệ phần trăm tương ứng của các phần tử.

Tất cả lề phải được xác định bằng tỷ lệ phần trăm và các quy tắc 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 khu vực có sẵn.
Tăng giá trị thông qua các phương pháp thiết kế và bố cục thích ứng
Khi thiết kế bố cục thích ứng trên màn hình tròn, chế độ xem cuộn và không cuộn đều có các yêu cầu riêng để điều chỉnh theo tỷ lệ các thành phần trên giao diện người dùng và duy trì bố cục và thành phần cân bằng.
Những hình ảnh sau đây là đề xuất chung; các ví dụ chỉ nhằm mục đích minh hoạ. Xem từng thành phần hoặc trang giao diện để biết hướng dẫn chi tiết, theo bối cảnh và thích ứng.

Bố cục thích ứng cho phép nhiều khối, thẻ, dòng văn bản và nút hơn vừa với một màn hình

Sử dụng bố cục mới, được áp dụng tại các điểm ngắt kích thước màn hình đã xác định, để cho phép giới thiệu nội dung mới khi có thể, mang lại cho người dùng thêm giá trị trên các thiết bị có kích thước màn hình lớn hơn.

Sử dụng không gian màn hình bổ sung để cung cấp vùng chứa lớn hơn, văn bản lớn hơn, vòng tròn dày hơn và hình ảnh dữ liệu chi tiết hơn để giúp người dùng xem nhanh hơn.

Sử dụng không gian màn hình bổ sung để cung cấp các mục tiêu nhấn lớn hơn, hệ phân cấp hình ảnh lớn hơn và không gian bổ sung giữa các mục nội dung để giúp giao diện dễ dàng và thoải mái hơn khi tương tác.

Sử dụng các thành phần và mẫu mới cập nhật để mang lại giao diện tốt hơn cho giao diện người dùng trên mọi kích thước màn hình.
Chất lượng ứng dụng

Nguyên tắc về chất lượng của chúng tôi được sắp xếp thành 3 cấp. Cung cấp trải nghiệm tốt nhất có thể cho người dùng bằng cách đáp ứng các nguyên tắc trong cả ba cấp.
Sẵn sàng cho mọi kích thước màn hình |
Thích ứng và tối ưu hoá |
Thích ứng và khác biệt |
Sử dụng bố cục chuẩn đã thiết lập

Sử dụng các bố cục chuẩn đã thiết lập để giúp giao diện người dùng thích ứng liền mạch trên nhiều kích thước thiết bị.
Bố cục chuẩn của chúng tôi được phát triển một cách cẩn thận để mang lại trải nghiệm chất lượng cao trên mọi kích thước màn hình.