Thích ứng và được tối ưu hoá
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Các ứng dụng đáp ứng và được tối ưu hoá sử dụng bố cục thích ứng tự động thích ứng với nhiều kích thước màn hình, qua đó cung cấp thêm giá trị cho người dùng, đồng thời mang lại trải nghiệm hiệu quả và hấp dẫn cho người dùng.
Tăng thêm giá trị thông qua thiết kế thích ứ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à văn bản có thể nhìn thấy nhanh hơn, nhiều thao tác trên màn hình hơn hay đích nhấn lớn hơn và dễ tiếp cận hơn, các phương pháp thích ứng đều mang đến trải nghiệm nâng cao cho người dùng màn hình lớn hơn.

Tạo thẻ thông tin và ứng dụng thích ứng cho Wear OS
Giao diện người dùng thích ứng kéo dài và thay đổi để tận dụng tối đa tất cả không gian màn hình có sẵn, bất kể kích thước màn hình hiển thị. Khi thiết kế bố cục thích ứng trên màn hình tròn, mỗi khung hiển thị cuộn và không cuộn đều có những yêu cầu riêng để duy trì tỷ lệ phần tử trên giao diện người dùng, cũng như duy trì bố cục và cấu trúc cân bằng. Đối với khung 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, dưới cùng và bên cạnh để tránh bị cắt và cung cấp tỷ lệ tỷ lệ của các phần tử. Đối với khung hiển thị không cuộn, hãy sử dụng tỷ lệ phần trăm và các điều kiện 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 vùng có sẵn.
Xem hướng dẫn triển khai Compose và Thẻ thông tin cho bố cục thích ứng.
check_circle
Nên
- Sử dụng các thành phần tiêu chuẩn được thiết kế để thích ứng.
- Sử dụng bố cục thích ứng có khả năng điều chỉnh mượt mà trên các kích thước màn hình.
cancel
Không nên
- Kéo giãn các phần tử trên giao diện người dùng (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ừ phi các phông chữ đó chủ yếu phục vụ mục đích đồ hoạ).
Bước tiếp theo: thích ứng và khác biệt
Các ứng dụng thích ứng và khác biệt tạo ra một trải nghiệm người dùng không thể có trên các thiết bị có màn hình nhỏ hơn.
Bắt đầu
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-07-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-07-27 UTC."],[],[],null,["# Responsive and optimized\n\nApps that are **responsive and optimized** utilize responsive layouts that\nautomatically adapt to different screen sizes, offering some additional value to\nusers and providing a productive, engaging user experience.\n\nAdd value through responsive design\n-----------------------------------\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\n\nBuild responsive apps and tiles for Wear OS\n-------------------------------------------\n\nResponsive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on. When designing\nresponsive layouts on a round screen, scrolling and non-scrolling views each\nhave unique requirements to maintain UI element scaling, as well as preserve a\nbalanced layout and composition. For [scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#scrolling), use percentages to\ndefine all top, bottom, and side margins to avoid clipping and provide\nproportional scaling of elements. For [non-scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#non-scrolling), use percentages\nand vertical constraints for all margins. That way, the main content in the\nmiddle can stretch to fill the available area.\n\nSee the [Compose](/training/wearables/compose/screen-size#responsive-layouts) and [Tiles](/training/wearables/tiles/screen-size#responsive-layouts) implementation guidance for responsive\nlayouts. \ncheck_circle\n\n### Do\n\n- Use standard components which are designed for adaptation.\n- Utilize adaptive layouts which adapt smoothly across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space.\n- Increase the sizes of fonts (unless they're serving a primarily graphic purpose).\n\nNext step: adaptive and differentiated\n--------------------------------------\n\nApps that are **adaptive and differentiated** create a user experience that\nisn't possible on devices with smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)"]]