导航抽屉是任何电视应用中必不可少的组件，因为它们允许用户访问不同的目的地和功能。导航抽屉是应用信息架构的支柱，提供了一种清晰直观的方式来浏览应用。
与移动导航抽屉相反，电视上的导航抽屉具有用户可见的展开和折叠状态。
资源
| 类型 | 链接 | 状态 |
|---|---|---|
| 设计 | 设计源（Figma） | 可用 |
| 实现 |
Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer) |
可用 |
重点
- 目的地按用户重要性排序，常用目的地排在前面，相关目的地分组在一起。
- 折叠时，标准导航抽屉和模态导航抽屉都需要导航栏。
变体
导航抽屉有两种样式
- 标准导航抽屉 — 展开以创建更多导航空间，将页面内容推到一边。
- 模态导航抽屉 — 作为应用内容顶部的覆盖层出现，并带有遮罩，有助于在抽屉展开时提高可读性。
标准导航抽屉
结构
- 顶部区域：显示应用徽标。用作切换个人资料或触发搜索操作的按钮。在折叠状态下，顶部容器中仅显示图标。
- 导航项目：导航栏中的每个项目都包含图标和文本的组合，在折叠状态下仅显示图标。
- 导航栏：导航栏是一个显示 3 到 7 个应用目的地的列，用作主菜单。每个目的地都有一个文本标签和一个可选图标，可以选择对菜单项目进行分组以获得更好的上下文。
- 底部区域：可以有 1 到 3 个操作按钮，非常适合“设置”、“帮助”或“个人资料”等页面。
行为
- 导航抽屉展开：展开时，标准导航抽屉会推动页面内容，为展开的导航版本腾出空间。
- 导航更新：从一个导航项目移动到另一个导航项目时，页面会自动更新到新的目的地。
模态导航抽屉
结构
- 顶部区域：显示应用徽标。用作切换个人资料或触发搜索操作的按钮。在折叠状态下，顶部容器中仅显示图标。
- 导航项目：导航栏中的每个项目都包含图标和文本的组合，在折叠状态下仅显示图标。
- 导航栏：显示 3 到 7 个应用目的地的列，用作主菜单。每个目的地都有一个文本标签和一个可选图标，可以选择对菜单项目进行分组以获得更好的上下文。
- 遮罩：提高导航项目文本的可读性。
- 底部区域：可以有 1 到 3 个操作按钮，非常适合“设置”、“帮助”或“个人资料”等页面。
行为
- 抽屉展开：作为应用内容顶部的覆盖层出现，并带有遮罩，有助于在抽屉展开时提高可读性。
- 导航更新：在用户选择导航项目时发生。
遮罩
对于模态导航抽屉，抽屉后面的遮罩可确保抽屉内容具有可读性。您可以在导航抽屉后面使用渐变或纯色表面来创建 UI 的不同变体。
渐变遮罩
纯色遮罩
规范
用法
活动指示器
活动指示器是一种视觉提示，用于突出显示显示的导航抽屉目的地。指示器通常由与抽屉中其他项目视觉上不同的背景形状表示。活动指示器帮助用户了解他们在应用中的位置以及他们正在浏览的目的地。确保活动指示器清晰可见，并且易于与导航抽屉中的其他项目区分开来。
分隔线（可选）
分隔线可用于分隔导航抽屉内的目的地组，以便更好地组织。但是，务必谨慎使用，因为过多的分隔线会产生视觉噪音，并给用户带来不必要的认知负担。
徽章
徽章是视觉提示，可以添加到导航项目中以提供其他信息。例如，徽章可用于指示流媒体应用中可用的新电影数量。谨慎使用徽章，仅在必要时使用，因为它们会使 UI 显得杂乱无章。使用徽章时，请确保它们清晰易懂，并且不会干扰用户浏览应用的能力。
徽章展开
徽章折叠
标签
导航抽屉中的标签应清晰简洁，以便于阅读。
注意
如果无法避免使用长标签，请使用省略号截断标签。
不要
避免使用需要换行的长文本标签。
不要
避免创建没有图标的导航抽屉，因为这会使用户难以浏览应用。
不要
避免将图标导航项目与非图标导航项目混合使用，因为这会使用户的导航体验变得混乱。
导航抽屉是代表应用层次结构的基础元素，应仅用于列出 5 到 6 个主要导航目的地。
做
为了获得更好的用户体验，请将导航抽屉中的主导航目的地数量限制在 5 到 6 个。
不要
避免添加过多的导航项，因为这会导致出现垂直滚动，并使用户难以浏览应用。