Thiết kế thích ứng (Adaptive design) là phương pháp thiết kế bố cục thích ứng với các điểm ngắt và thiết bị cụ thể.
Cách triển khai bố cục thích ứng một cách hiệu quả:
Trước tiên, hãy cân nhắc chiều rộng của lớp cửa sổ trên thiết bị để xác định các thay đổi về bố cục, sau đó điều chỉnh theo chiều cao. Hỗ trợ nhiều kích thước màn hình.
Android tận dụng các khái niệm về thiết kế thích ứng, tương tự như phát triển web, sử dụng lưới và hình ảnh linh hoạt để tạo bố cục phản hồi hiệu quả theo ngữ cảnh.
Cho phép bố cục phản hồi theo nhiều kích thước bằng các phương thức thích ứng: sắp xếp lại, hiển thị, thay đổi cách trình bày.
Tránh chỉ khoá ứng dụng ở chế độ dọc. Điều này sẽ gây ra hiện tượng đóng khung thư khi bạn đổi kích thước ứng dụng.
Không nên
Để biết nguyên tắc thiết kế về cách điều chỉnh bố cục theo kích thước màn hình mở rộng, hãy đọc hướng dẫn dành cho nhà phát triển Hỗ trợ nhiều kích thước màn hình trong Compose và trang Áp dụng bố cục M3. Bạn cũng có thể xem thư viện chuẩn về màn hình lớn của Android để lấy cảm hứng và triển khai bố cục màn hình lớn.
Thiết kế thích ứng
Bạn nên thiết kế thích ứng theo mặc định khi thiết kế ứng dụng. Thị trường thiết bị di động Android không ngừng phát triển, vì vậy, bạn không thể chỉ coi thiết bị di động là điện thoại cầm tay. Thay vào đó, bạn nên xem xét mọi thứ từ điện thoại cầm tay, thiết bị có thể gập lại, máy tính bảng và mọi thiết bị khác.
Mặc dù một số tính năng và trường hợp sử dụng có thể không phù hợp với mọi kích thước màn hình hoặc kiểu dáng. Thiết kế thích ứng giúp người dùng thoải mái hơn về công thái học, khả năng hữu dụng và chất lượng ứng dụng.
Phương thức và chất lượng
Bạn có thể bắt đầu bằng cách thiết kế các màn hình chính (truyền đạt các khái niệm thiết yếu hoặc ứng dụng của bạn) với các kích thước lớp làm điểm ngắt để đóng vai trò là nguyên tắc cho phần còn lại của ứng dụng. Những trải nghiệm nổi bật này có thể làm nổi bật các đặc điểm thích ứng và kiểu dáng khác biệt. Hoặc thiết kế nội dung để phản hồi ở cấp cơ bản bằng cách ghi chú cách nội dung cần bị hạn chế, mở rộng hoặc sắp xếp lại.
Trong ví dụ này, tính năng điều hướng và nội dung sẽ sắp xếp lại, điều chỉnh và điều chỉnh tỷ lệ để điều hướng công thái học tốt hơn. Lưới bố cục mở rộng từ hướng dọc sang nhiều cột. Địa chỉ trong thanh ứng dụng và bộ lọc sẽ sắp xếp lại và điều chỉnh để phù hợp với lưới bố cục.
Nên
Không nên
Nên
Nên
Không nên
Đảm bảo các trường nhập và nút không bị kéo giãn.
Cân nhắc về vùng chứa và ngăn.
Sử dụng khái niệm vùng chứa của ngăn để nhóm nội dung cho bố cục thích ứng. Ví dụ: ví dụ được sử dụng là màn hình chi tiết, một ngăn có thể xuất hiện trong bố cục chi tiết dạng danh sách.
Các kích thước nhỏ gọn phải tuân theo bố cục một ngăn.
Kích thước trung bình có thể sử dụng bố cục 1–2 ngăn.
Kích thước lớn và cực lớn có thể sử dụng bố cục nhiều ngăn.
Sử dụng vùng chứa nội tại và trực quan để nhóm các phần tử lại với nhau. Các ngăn có thể di chuyển vào, ẩn, mở rộng, bị hạn chế hoặc bật lên. Việc cân nhắc về các ngăn giúp thiết kế trên tất cả thiết bị di động dễ dàng hơn.
Mặc dù các ngăn không cần thiết trên màn hình lớn, nhưng bạn vẫn nên cân nhắc về nội dung trong các nhóm vùng chứa để có tính linh hoạt.
Cho phép các phần tử chuyển đổi và sắp xếp lại bằng cách tập trung vào cách các phần tử thích ứng với lưới. Cân nhắc về sự thay đổi theo chiều dọc đối với các phần tử và kết hợp với các hạn chế và thay đổi về cách trình bày.
Cân nhắc về tỷ lệ và lượng nội dung được hiển thị.
Một lưới video nhỏ trên điện thoại sẽ trở nên chật chội và quá tải trên máy tính bảng. Cập nhật tỷ lệ của phần tử trên giao diện người dùng dựa trên kích thước màn hình, mật độ và trường nhập.
Một ứng dụng chất lượng cao phải đáp ứng cấp độ khác biệt trong các nguyên tắc về chất lượng ứng dụng cốt lõi và màn hình lớn.
Để biết thêm thông tin về bố cục, hãy xem trang Tìm hiểu về bố cục trong Material Design 3 (M3) page.
Tận dụng các kích thước kiểu dáng độc đáo.
Đừng quên các kích thước màn hình nhỏ hơn cũng như các tỷ lệ khung hình khác nhau, vì điện thoại Android có nhiều kích thước và thiết bị có thể gập lại có thể có màn hình phụ nhỏ có thể hiển thị ứng dụng của bạn.
Đối với các bố cục dựa trên chế độ điều khiển, chẳng hạn như trình phát nội dung nghe nhìn, hãy cho phép các chế độ điều khiển sắp xếp lại và nội dung hiển thị.
Để giúp người dùng điều chỉnh, hãy sử dụng một phần tử neo, chẳng hạn như nút phát lớn, để điều chỉnh nội dung xung quanh và hình ảnh nổi bật sẽ trở thành hình nền trên màn hình phụ.
Ngoài các lớp kích thước
Mặc dù kích thước cửa sổ là một yếu tố phổ biến đối với thiết kế thích ứng, nhưng ứng dụng của bạn cũng phải sẵn sàng để người dùng cắm màn hình và thiết bị đầu vào, xem ở nhiều khoảng cách và thay đổi tư thế của thiết bị. Bạn có thể kiểm tra những thay đổi này
bằng API mediaQuery, cho phép bạn thêm sắc thái khi bạn
thiết kế cách ứng dụng điều chỉnh các phần tử cụ thể trên giao diện người dùng theo một số trường hợp sử dụng nhất định.
Điều chỉnh thiết kế của ứng dụng ở cấp thành phần hoặc ngăn, thay vì thiết kế toàn bộ màn hình theo từng kích thước, trường nhập, kiểu dáng và tư thế.
Để biết thêm thông tin về tương tác đầu vào, hãy đọc thêm trong hướng dẫn tương tác trên máy tính.
Hãy xem nghiên cứu điển hình mẫu, Pawparrazzi, được xây dựng và thiết kế bằng các API thích ứng và hướng dẫn thiết kế mới nhất.
