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.
Material 3 Expressive sử dụng ngôn ngữ hình dạng theo cách mở rộng và có ý nghĩa hơn nhiều bằng cách tận dụng các hình dạng vùng chứa linh hoạt để áp dụng việc làm tròn và làm sắc nét bán kính góc nhằm hỗ trợ danh sách biến đổi hình dạng và trạng thái nút.
Hệ thống thiết kế này cũng giới thiệu các nút ôm viền dưới dạng một mẫu thiết kế mang tính biểu tượng và có thể sở hữu cho các thiết bị tròn trên Wear OS.
Duy trì tỷ lệ của phần tử trên giao diện người dùng
Khi thiết kế bố cục trên màn hình tròn, mỗi khung hiển thị có thể cuộn và không thể cuộn đều có các yêu cầu riêng để duy trì việc điều chỉnh tỷ lệ phần tử giao diện người dùng và giữ nguyên bố cục cũng như thành phần cân đối.
Thành phần hiển thị có thể cuộn
Đối với các khung hiển thị có thể di chuyển, hãy sử dụng tỷ lệ phần trăm để xác định tất cả các lề trên, dưới và bên để tránh bị cắt và cung cấp khả năng điều chỉnh tỷ lệ tương ứng của các phần tử.
Bạn nên xác định tất cả các lề trên, dưới và bên bằng tỷ lệ phần trăm để tránh bị cắt và cung cấp khả năng điều chỉnh tỷ lệ tương ứng cho các phần tử.
Khung hiển thị không cuộn
Đối với các 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ả các lề. Bằng cách đó, nội dung chính ở giữa có thể kéo dài để lấp đầy vùng có sẵn.
Bạn nên xác định tất cả các lề theo tỷ lệ phần trăm và xác định các điều kiện ràng buộc theo chiều dọc sao cho nội dung chính ở giữa có thể kéo dài để lấp đầy vùng có sẵn.
Các cấp nguyên tắc về chất lượng
Nguyên tắc về chất lượng của chúng tôi được chia thành 3 cấp. Mang đến 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 ở cả 3 cấp.
Phù hợp với mọi kích thước màn hình
Đảm bảo ứng dụng của bạn mang lại trải nghiệm chất lượng trên mọi kích thước màn hình.
Tạo bố cục sử dụng đầy đủ không gian ứng dụng có sẵn.
Thích ứng và được tối ưu hoá
Cung cấp nhiều nội dung hơn cho người dùng trên những thiết bị cho phép và sử dụng bố cục thích ứng tự động điều chỉnh theo nhiều kích thước màn hình.
Thích ứng và khác biệt
Tận dụng tối đa không gian bổ sung bằng cách sử dụng các điểm ngắt để mang đến những trải nghiệm mới mạnh mẽ trên màn hình lớn mà không thể có trên các thiết bị có màn hình nhỏ hơn.
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-26 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-26 UTC."],[],[],null,["# Design quality tiers\n\nMaterial 3 Expressive leans into shape language in a much more expansive and\nmeaningful way by utilizing flexible container shapes to apply rounding and\nsharpening of corner radii to support shape morphing lists and button states.\nThe design system also introduces edge-hugging buttons as an ownable and iconic\ndesign pattern for round devices on Wear OS.\n\nMaintain UI element scaling\n---------------------------\n\nWhen designing layouts on a round screen, scrolling and non-scrolling\nviews each have unique requirements to maintain UI element scaling and preserve\na balanced layout and composition.\n\n\n**Scrolling views**\n\nFor scrolling views, use percentages to define all top, bottom, and side\nmargins to avoid clipping and provide proportional scaling of elements.\n\nAll top, bottom, and side margins should be defined in percentages to avoid\nclipping and provide proportional scaling of elements. \n**Non-scrolling views**\n\nFor non-scrolling views, use percentages and vertical constraints for all\nmargins. That way, the main content in the middle can stretch to fill the\navailable area.\n\nAll margins should be defined in percentages and vertical constraints should be\ndefined such that the main content in the middle can stretch to fill the\navailable area.\n\n\u003cbr /\u003e\n\nTiers of quality guidelines\n---------------------------\n\nOur quality guidelines are organized into three tiers. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n\n**Ready for all screen sizes**\n\nEnsure your app is delivering a quality experience across all screen sizes.\nCreate layouts that fully use the available app space. \n\n**Responsive and optimized**\n\nDeliver more content to users on devices which allow for it, and utilize\nresponsive layouts that automatically adapt to different screen sizes. \n\n**Adaptive and differentiated**\n\nMake the most of additional real estate by utilizing breakpoints to offer\npowerful new experiences on larger screens which are not possible on devices\nwith smaller screens.\n\n\u003cbr /\u003e\n\n| **Caution:** A larger display size should *never* display less information than ones that are smaller than it, this is especially relevant for custom behaviors added in at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less are the larger screens. Screens should always show \"more value\" and never \"less value\" with increasing size."]]
