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.
Ứng dụng là một trong những nền tảng chính trên Wear OS. Ứng dụng khác với chức năng hoặc thẻ thông tin, đó là những bản trình bày ngắn gọn của nội dung ứng dụng.
Ứng dụng hiển thị nhiều thông tin hơn và hỗ trợ tương tác phong phú hơn. Người dùng thường truy cập vào ứng dụng từ một nền tảng khác, chẳng hạn như thông báo, chức năng, Thẻ thông tin hoặc thao tác bằng giọng nói.
Nguyên tắc
Hãy lưu ý các nguyên tắc sau khi thiết kế ứng dụng:
Tập trung: Tập trung vào những nhiệm vụ quan trọng để giúp mọi người hoàn thành công việc chỉ trong vài giây.
Nông và tuyến tính: Tránh tạo hệ phân cấp sâu hơn 2 cấp.
Hãy cố gắng hiển thị nội dung và điều hướng cùng dòng khi có thể.
Cuộn: Ứng dụng có thể cuộn. Đây là một cử chỉ tự nhiên giúp người dùng xem thêm nội dung trên đồng hồ.
Nguyên tắc
Hãy tuân theo các nguyên tắc sau khi thiết kế ứng dụng.
Tối ưu hoá cho bố cục dọc
Đơn giản hoá thiết kế của ứng dụng bằng cách dùng bố cục dọc, cho phép người dùng cuộn theo một hướng để di chuyển qua nội dung.
check_circle
Nên
Mục tiêu của ứng dụng này là đưa người dùng từ điểm A đến điểm B.
cancel
Không nên
Đừng dùng cả thao tác cuộn dọc lẫn cuộn ngang vì việc này có thể khiến người dùng khó hiểu. Ngoại lệ là một số trường hợp sử dụng cụ thể, bao gồm cả phát nội dung nghe nhìn, có thể hỗ trợ cả thao tác cuộn theo chiều dọc và chiều ngang.
Hiển thị thời gian
Người dùng thường dành nhiều thời gian hơn cho các ứng dụng, vì vậy, điều quan trọng là bạn phải cung cấp khả năng xem nhanh thời gian.
check_circle
Nên
Hiển thị thời gian ở đầu ứng dụng để người dùng có thể xem thời gian ở một nơi nhất quán.
cancel
Không nên
Hiện thời gian trong hộp thoại, màn hình xác nhận hoặc bộ chọn vì người dùng có thể chỉ dành vài giây trên các màn hình đó.
Để biết thêm thông tin về thiết kế và cách sử dụng, hãy xem bài viết Văn bản thời gian.
Điểm truy cập cùng dòng có thể truy cập được
Đảm bảo tất cả các thao tác đều hiển thị cùng dòng, sử dụng nhãn và biểu tượng rõ ràng để hỗ trợ tiếp cận. Điều này bao gồm điểm truy cập vào các chế độ cài đặt và lựa chọn ưu tiên.
check_circle
Nên
Sử dụng cả biểu tượng và nhãn khi có thể.
cancel
Không nên
Dựa vào các biểu tượng để nhắc người dùng hành động.
Thúc đẩy hành động chính
Giúp người dùng thực hiện hành động trong ứng dụng bằng cách kéo các hành động chính lên đầu ứng dụng. Nâng các hành động chính không rõ ràng lên đầu ứng dụng.
Sử dụng nhãn để định hướng người dùng
Đối với các ứng dụng dài hơn, hãy dùng nhãn để giúp định hướng người dùng khi họ cuộn qua nội dung.
check_circle
Nên
Sử dụng các dấu ngắt mục, nhãn và các tín hiệu khác để sắp xếp nội dung và giúp định hướng người dùng khi họ di chuyển qua các chế độ xem dài hơn bằng nội dung hỗn hợp.
cancel
Không nên
Thêm nhãn cho các ứng dụng chứa một loại nội dung duy nhất.
Hiện thanh cuộn
Hiện thanh cuộn nếu toàn bộ khung hiển thị cuộn được, như trong hình sau.
Để biết thêm thông tin, hãy xem bài viết Chỉ báo vị trí.
Vùng chứa nội dung
Xem các ví dụ sau về vùng chứa nội dung.
Hình 1. Vùng chứa có chiều cao cố định.
Hình 2. Vùng chứa có chiều cao thay đổi.
Hình 3. Vùng chứa có chiều cao và chiều rộng lớn hơn khung nhìn.
Hình 4. Vùng chứa được phân trang.
Hình 5a. Các trang nội dung có kích thước toàn màn hình và được phân trang theo chiều dọc.
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,["# App design principles\n\nAn app is one of the primary surfaces on Wear OS. Apps are different from\ncomplications or tiles, which are glanceable representations of app content.\nApps display more information and support richer interactivity. The user often\nenters an app from another surface, such as a notification, complication, Tile,\nor voice action.\n\nPrinciples\n----------\n\nKeep the following principles in mind when designing apps:\n\n- **Focused:** Focus on critical tasks to help people get things done within\n seconds.\n\n- **Shallow and linear:** Avoid creating hierarchies deeper than two levels.\n Aim to display content and navigation inline when possible.\n\n- **Scrolling:** Apps can scroll. This is a natural gesture for users to see\n more content on the watch.\n\nGuidelines\n----------\n\nFollow these guidelines when designing apps.\n\n### Optimize for vertical layouts\n\nSimplify your app's design by using vertical layouts, which allow users to\nscroll in a single direction to move through content. \ncheck_circle\n\n### Do\n\nThis app's goal is to take the user from point A to point B. \ncancel\n\n### Don't\n\nDon't use both vertical and horizontal scrolling, as this can make your app experience confusing. The exception is some specific use cases, including media playback, which can support both vertical and horizontal scrolling.\n\n### Show the time\n\nUsers tend to spend more time in apps, so it's important to provide\nquick access to the time. \ncheck_circle\n\n### Do\n\nDisplay the time at the top of the app, as this provides a consistent place for the user to view the time. \ncancel\n\n### Don't\n\nDisplay the time in a dialog, confirmation screen, or picker, as users are likely to spend only a few seconds on those screens.\n\nFor more information about design and usage, see\n[Time text](/training/wearables/compose/time-text).\n\n### Accessible inline entry points\n\nEnsure all actions are displayed inline, using clear iconography and labels for\naccessibility. This includes entry points to settings and preferences. \ncheck_circle\n\n### Do\n\nUse both icons and labels when possible. \ncancel\n\n### Don't\n\nRely solely on icons to prompt the user to take action.\n\n### Elevate primary actions\n\nHelp users take action in your app by pulling primary actions to the top of the\napp. Elevate non-ambiguous primary actions to the top of the app.\n\n### Use labels to orient users\n\nFor longer apps, help orient the user with labels as they scroll through the\ncontent. \ncheck_circle\n\n### Do\n\nUse section breaks, labels, and other cues to organize content and help orient users as they scroll through longer views with mixed content. \ncancel\n\n### Don't\n\nAdd a label for apps that contain a single content type.\n\n### Show the scrollbar\n\nShow the scrollbar if the entire view scrolls, as shown in the following image.\nFor more information, see [Position indicator](/training/wearables/compose/position-indicators).\n\nContent containers\n------------------\n\nSee the following examples of content containers.\n\n\n**Figure 1.** Container of fixed height. \n\n**Figure 2.** Container of variable height.\n\n\u003cbr /\u003e\n\n\n**Figure 3.** Container of height and width greater than the viewport. \n\n**Figure 4.** A paginated container.\n\n\u003cbr /\u003e\n\n\n**Figure 5a.** Content pages that take the full dimension of the screen and are\npaginated vertically. \n\n\u003cbr /\u003e\n\n| **Note:** Users find vertical layouts much easier to navigate than paginated UI's. Paginated UI's are best for situations when the user needs to navigate content using gross gestures, such as when working out or on the go. Because of this, they are generally used in workout and media app UIs."]]
