Ngăn điều hướng
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ăn điều hướng là thành phần thiết yếu trong mọi ứng dụng TV vì chúng cho phép người dùng truy cập vào nhiều đích đến và tính năng. Ngăn điều hướng là phần cốt lõi của cấu trúc thông tin của ứng dụng, cung cấp một cách rõ ràng và trực quan để điều hướng trong ứng dụng.
Ngược lại với ngăn điều hướng trên thiết bị di động, ngăn điều hướng trên TV có cả trạng thái mở rộng và thu gọn mà người dùng có thể nhìn thấy.
Tài nguyên
Điểm nổi bật
- Các đích đến được sắp xếp theo mức độ quan trọng đối với người dùng, trong đó các đích đến thường xuyên xuất hiện sẽ được hiển thị trước và các đích đến có liên quan sẽ được nhóm lại với nhau.
- Bạn cần có dải điều hướng cho cả ngăn điều hướng tiêu chuẩn và ngăn điều hướng mẫu khi thu gọn.
Biến thể
Có hai kiểu ngăn điều hướng:
- Ngăn điều hướng tiêu chuẩn – Mở rộng để tạo thêm không gian điều hướng, đẩy nội dung trang sang một bên.
- Ngăn điều hướng theo phương thức – Xuất hiện dưới dạng lớp phủ trên đầu nội dung của ứng dụng với một màn chắn giúp cải thiện khả năng đọc khi ngăn được mở rộng.
Ngăn điều hướng tiêu chuẩn
Phân tích
- Phần trên cùng: Thể hiện biểu trưng ứng dụng. Dùng làm nút để chuyển đổi hồ sơ hoặc kích hoạt thao tác tìm kiếm. Ở trạng thái thu gọn, chỉ biểu tượng mới hiển thị trong vùng chứa trên cùng.
- Mục điều hướng: Mỗi mục trong dải điều hướng có một tổ hợp biểu tượng và văn bản, trong đó chỉ biểu tượng hiển thị ở trạng thái thu gọn.
- Dải điều hướng: Dải điều hướng là một cột hiển thị 3 đến 7 đích đến của ứng dụng, đóng vai trò là trình đơn chính. Mỗi đích đến có một nhãn văn bản và một biểu tượng không bắt buộc, với tuỳ chọn nhóm các mục trình đơn để phù hợp hơn với ngữ cảnh.
- Phần dưới cùng: Có thể có từ một đến ba nút hành động, phù hợp với các trang như cài đặt, trợ giúp hoặc hồ sơ.
Hành vi
- Mở rộng ngăn điều hướng: Khi mở rộng, ngăn điều hướng tiêu chuẩn sẽ đẩy nội dung trang ra để tạo không gian cho phiên bản mở rộng của ngăn điều hướng.
- Cập nhật điều hướng: Khi di chuyển từ mục điều hướng này sang mục điều hướng khác, trang sẽ tự động cập nhật đến đích đến mới.
Ngăn điều hướng theo phương thức phương thức
Phân tích
- Phần trên cùng: Thể hiện biểu trưng ứng dụng. Dùng làm nút để chuyển đổi hồ sơ hoặc kích hoạt thao tác tìm kiếm. Ở trạng thái thu gọn, chỉ biểu tượng mới hiển thị trong vùng chứa trên cùng.
- Mục điều hướng: Mỗi mục trong dải điều hướng có một tổ hợp biểu tượng và văn bản, trong đó chỉ biểu tượng xuất hiện ở trạng thái thu gọn.
- Dải điều hướng: Cột cho thấy từ 3 đến 7 đích đến của ứng dụng, đóng vai trò là trình đơn chính. Mỗi đích đến có một nhãn văn bản và một biểu tượng tuỳ chọn, với tuỳ chọn nhóm các mục trong trình đơn để phù hợp hơn với ngữ cảnh.
- Lưới mờ: Để văn bản của mục điều hướng dễ đọc hơn.
- Phần dưới cùng: Có thể có từ một đến ba nút hành động, phù hợp với các trang như cài đặt, trợ giúp hoặc hồ sơ.
Hành vi
- Mở rộng ngăn: Xuất hiện dưới dạng lớp phủ trên nội dung của ứng dụng, với một màn chắn giúp cải thiện khả năng đọc khi ngăn được mở rộng.
- Cập nhật điều hướng: Xảy ra khi người dùng chọn một mục điều hướng.
Scrim
Đối với ngăn điều hướng theo phương thức, một màn chắn phía sau ngăn đảm bảo nội dung ngăn có thể đọc được. Bạn có thể sử dụng hiệu ứng chuyển màu hoặc nền đơn sắc phía sau ngăn điều hướng để tạo nhiều biến thể giao diện người dùng.
Màn chắn chuyển màu
Màn chắn đồng nhất
Thông số kỹ thuật
Cách sử dụng
Chỉ báo đang hoạt động
Chỉ báo đang hoạt động là một tín hiệu trực quan làm nổi bật đích đến của ngăn điều hướng đang hiển thị. Chỉ báo thường được biểu thị bằng một hình nền khác biệt về mặt hình ảnh với các mục khác trong ngăn.
Chỉ báo đang hoạt động giúp người dùng hiểu được vị trí của họ trong ứng dụng và đích đến mà họ đang duyệt xem. Đảm bảo rằng chỉ báo đang hoạt động hiển thị rõ ràng và dễ phân biệt với các mục khác trong ngăn điều hướng.
Dải phân cách (không bắt buộc)
Bạn có thể dùng đường phân chia để tách các nhóm đích trong ngăn điều hướng nhằm sắp xếp hiệu quả hơn. Tuy nhiên, bạn cần sử dụng các đường phân chia một cách tiết kiệm vì quá nhiều đường phân chia có thể tạo ra sự nhiễu thị giác và gây quá tải nhận thức không cần thiết cho người dùng.
Huy hiệu
Huy hiệu là các tín hiệu hình ảnh có thể được thêm vào các mục điều hướng để cung cấp thêm thông tin. Ví dụ: bạn có thể sử dụng huy hiệu để cho biết số lượng phim mới có trong ứng dụng phát trực tuyến. Hãy sử dụng huy hiệu một cách tiết kiệm và chỉ khi cần thiết, vì huy hiệu có thể khiến giao diện người dùng trở nên rối mắt và lộn xộn. Khi sử dụng huy hiệu, hãy đảm bảo rằng huy hiệu đó rõ ràng và dễ hiểu hơn, đồng thời không ảnh hưởng đến khả năng người dùng thao tác trong ứng dụng.
Mở rộng huy hiệu
Huy hiệu đã thu gọn
Nhãn
Nhãn trong ngăn điều hướng phải rõ ràng và ngắn gọn để dễ đọc hơn.
warning
Cảnh báo
Nếu không thể tránh việc sử dụng nhãn dài, hãy cắt ngắn nhãn bằng dấu ba chấm.
cancel
Không nên
Tránh sử dụng nhãn văn bản dài cần xuống dòng.
cancel
Không nên
Tránh tạo ngăn điều hướng không có biểu tượng vì điều này có thể khiến người dùng khó điều hướng trong ứng dụng.
cancel
Không nên
Tránh kết hợp các mục điều hướng bằng biểu tượng với các mục điều hướng không phải biểu tượng, vì điều này có thể khiến người dùng khó hiểu trải nghiệm điều hướng.
Ngăn điều hướng là các phần tử cơ bản đại diện cho hệ phân cấp của ứng dụng và chỉ nên được dùng để liệt kê từ 5 đến 6 đích đến điều hướng chính.
check_circle
Nên
Giới hạn số lượng đích đến điều hướng chính trong ngăn điều hướng từ 5 đến 6 để mang lại trải nghiệm tốt hơn cho người dùng.
cancel
Không nên
Tránh thêm quá nhiều mục điều hướng vì điều này có thể tạo ra một thanh cuộn dọc và khiến người dùng khó điều hướng ứng dụng 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-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,["# Navigation drawers are essential components in any TV app as they allow users\nto access different destinations and features. A navigation drawer is the\nbackbone of the app's information architecture, providing a clear and intuitive\nway to navigate through the app.\n\nIn contrast to the mobile navigation drawer, the navigation drawer on\nTV has both expanded and collapsed states visible to the user.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose (NavigationDrawer)](/reference/kotlin/androidx/tv/material3/package-summary#NavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,kotlin.Function0)) [Jetpack Compose (ModalNavigationDrawer)](/reference/kotlin/androidx/tv/material3/package-summary#ModalNavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,androidx.compose.ui.graphics.Brush,kotlin.Function0)) | Available |\n\nHighlights\n----------\n\n- Destinations are ordered according to user importance, with frequent destinations first and related destinations grouped together.\n- A navigation rail is required for both standard and modal navigation drawers when collapsed.\n\nVariants\n--------\n\nThere are two type of navigation drawer styles:\n\n1. **Standard navigation drawer** --- Expands to create additional space for navigation, pushing the page content aside.\n2. **Modal navigation drawer** --- Appears as an overlay on top of the app's content with a scrim that helps to improve readability when the drawer is expanded.\n\nStandard navigation drawer\n--------------------------\n\n### Anatomy\n\n1. **Top section:** Features the app logo. Serves as a button to switch profiles or to trigger search action. In the collapsed state, only the icon remains visible in the top container.\n2. **Navigation item:** Each item in the navigation rail features a combination of an icon and text, with only the icon visible in the collapsed state.\n3. **Navigation rail:** The Navigation Rail is a column that shows 3 to 7 app destinations, acting as the main menu. Each destination has a text label and an optional icon, with the option of grouping menu items for better contextuality.\n4. **Bottom section:** Can have one to three action buttons, which are ideal for pages like settings, help, or profile.\n\n### Behavior\n\n- **Navigation drawer expansion:** When expanded the standard navigation drawers pushes the page content making space for the expanded version for the navigation.\n- **Navigation updates:** Moving from one nav item to another, the page automatically updates to the new destination.\n\nModal navigation drawer\n-----------------------\n\n### Anatomy\n\n1. **Top section:** Features the app logo. Serves as a button to switch profiles or to trigger a search action. In the collapsed state, only the icon remains visible in the top container.\n2. **Navigation item:** Each item in the navigation rail features a combination of an icon and text, with only the icon visible in the collapsed state.\n3. **Navigation rail:** Column that shows three to seven app destinations, acting as the main menu. Each destination has a text label and an optional icon, with the option of grouping menu items for better contextuality.\n4. **Scrim:** For better readability of navigation item text.\n5. **Bottom section:** Can have one to three action buttons, which are ideal for pages like settings, help, or profile.\n\n### Behavior\n\n- **Drawer expansion:** Appears as an overlay on top of the app's content, with a scrim that improves readability when the drawer is expanded.\n- **Navigation updates:** Occur when the user selects a navigation item.\n\n### Scrim\n\nFor the modal navigation drawer, a scrim behind the\ndrawer ensures the drawer content is readable. You can\nuse a gradient or solid surface behind the navigation drawer to create different\nvariations of the UI.\n\n\nGradient scrim \n\nSolid scrim\n\n\u003cbr /\u003e\n\nSpec\n----\n\nUsage\n-----\n\n\n### Active Indicator\n\nThe active indicator is a visual cue that highlights the navigation drawer\ndestination that is displayed. The indicator is typically represented by a\nbackground shape that is visually distinct from the other items in the drawer.\nThe active indicator helps users understand where they are in the app and which\ndestination they are browsing. Ensure that the active indicator is clearly\nvisible and easier to distinguish from the other items in the navigation drawer. \n\n\u003cbr /\u003e\n\n\n### Dividers (optional)\n\nDividers can be used to separate groups of destinations within the navigation\ndrawer for better organization. However, it's important to use them sparingly as\ntoo many dividers can create visual noise and add unnecessary cognitive overload\nfor users. \n\n\u003cbr /\u003e\n\n### Badges\n\nBadges are visual cues that can be added to navigation items to provide\nadditional information. For example, a badge could be used to\nindicate the number of new movies available in a streaming app. Use\nbadges sparingly and only when necessary, as they can\nmake the UI appear busy and cluttered. When using badges, ensure that\nthey are clear and easier to understand and that they don't\ninterfere with the user's ability to navigate the app.\n\n\nBadge expanded \n\nBadge collapsed\n\n\u003cbr /\u003e\n\n### Labels\n\nLabels in the navigation drawer should be clear and concise so that they\nare easier to read. \nwarning\n\n### Caution\n\nIf it's impossible to avoid using long labels, truncate the label using an ellipsis. \ncancel\n\n### Don't\n\nAvoid using long text labels that require wrapping. \ncancel\n\n### Don't\n\nAvoid creating a navigation drawer without icons, as this can make it difficult for users to navigate the app. \ncancel\n\n### Don't\n\nAvoid mixing icon navigation items with non-icon navigation items, as this can make the navigation experience confusing for users.\n\nNavigation drawers are foundational elements that represent your app's\nhierarchy and should be used to list only five to six primary\nnavigation destinations. \ncheck_circle\n\n### Do\n\nLimit the number of main navigation destinations in the navigation drawer to five to six for a better user experience. \ncancel\n\n### Don't\n\nAvoid adding too many navigation items as this can create a vertical scroll and make it harder for users to navigate the app."]]
