抽屉式导航栏是任何 TV 应用中的基本组件，因为它们允许用户访问不同的目的地和功能。抽屉式导航栏是应用信息架构的支柱，提供清晰直观的应用导航方式。
与移动设备抽屉式导航栏不同，电视上的抽屉式导航栏同时具有用户可见的展开和收起状态。
资源
| 类型 | 关联 | 状态 |
|---|---|---|
| 设计 | 设计源代码 (Figma) | 可用 |
| 实现 |
Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer) |
可用 |
亮点
- 目的地将根据用户重要性进行排序，将常用目的地和相关目的地归为一组。
- 标准抽屉式导航栏和模态抽屉式导航栏在收起时都需要导航栏。
变体
抽屉式导航栏样式有两种：
- 标准抽屉式导航栏 - 此类抽屉式导航栏可展开，为导航创建额外的空间，将网页内容推送到一旁。
- 模态抽屉式导航栏 - 显示为应用内容上方的叠加层，并配有纱罩，在抽屉式导航栏展开时提高可读性。
标准抽屉式导航栏
解剖学
- 顶部部分：显示应用徽标。充当切换资料或触发搜索操作的按钮。在收起状态下，只有图标在顶部容器中保持可见。
- 导航项：侧边导航栏中的每个项都是图标和文本的组合，在收起状态下只有图标可见。
- 侧边导航栏：导航栏是用于显示 3 到 7 个应用目的地的列，可用作主菜单。每个目的地都有一个文本标签和可选图标，您还可以选择对菜单项进行分组，以更好地关联。
- 底部部分：可以有一到三个操作按钮，非常适合设置、帮助或个人资料等页面。
行为
- 抽屉式导航栏展开：标准抽屉式导航栏展开时，会推送页面内容，为展开版本的导航栏腾出空间。
- 导航更新：从一个导航项移到另一个导航项时，页面会自动更新到新的目的地。
模态抽屉式导航栏
解剖学
- 顶部部分：显示应用徽标。充当用于切换个人资料或触发搜索操作的按钮。在收起状态下，只有图标在顶部容器中保持可见。
- 导航项：侧边导航栏中的每个项都是图标和文本的组合，在收起状态下只有图标可见。
- 侧边导航栏：用于显示三到七个应用目的地的列，用作主菜单。每个目的地都有一个文本标签和可选图标，用户可以选择对菜单项进行分组，以获得更好的上下文。
- 纱罩：提高导航项文本的可读性。
- 底部部分：可以有一到三个操作按钮，非常适合设置、帮助或个人资料等页面。
行为
- 抽屉式导航栏展开：显示为应用内容顶部的叠加层，并配有纱罩，以提高抽屉式导航栏展开时的可读性。
- 导航更新：在用户选择导航项时发生。
纱罩
对于模态抽屉式导航栏，在抽屉式导航栏后面加上纱罩可确保抽屉式导航栏的内容清晰易读。您可以在抽屉式导航栏后面使用渐变或纯色表面来创建不同的界面变体。
渐变纱罩
固体纱罩
规格
用法
活动指示器
活动指示器是一种视觉提示，突出显示了显示的抽屉式导航栏目的地。指示符通常用在视觉上与抽屉式导航栏中的其他项目不同的背景形状表示。活跃指示器有助于用户了解他们在应用中的位置以及正在浏览的目的地。确保活动指示器清晰可见，并且更易于与抽屉式导航栏中的其他项区分开来。
分隔线（可选）
分隔线可用于分隔抽屉式导航栏中的多组目的地，以便更好地进行整理。但请务必谨慎使用，因为过多的分隔线可能会产生视觉干扰，并让用户感到不必要的认知过载。
徽章
标记是可添加到导航项以提供更多信息的视觉提示。例如，标记可用于指示影音在线播放应用中提供的新电影的数量。应谨慎使用标记，并仅在必要时使用标记，因为它们可能会使界面显得杂乱无章。使用标记时，请确保标记清晰易懂，且不会干扰用户在应用中导航的能力。
徽章已展开
徽章已收起
标签
抽屉式导航栏中的标签应简洁明了，以便于阅读。
注意
如果无法避免使用较长的标签，请使用省略号截断标签。
错误做法
避免使用需要换行的长文本标签。
错误做法
避免创建不含图标的抽屉式导航栏，因为这可能会导致用户难以在应用中导航。
错误做法
避免将图标导航项与非图标导航项混用，因为这可能会导致用户感到困惑。
抽屉式导航栏是表示应用层次结构的基础元素，应仅用于列出 5 到 6 个主要导航目的地。
正确做法
将抽屉式导航栏中主导航目的地的数量限制在 5 到 6 个以内，以提供更好的用户体验。
错误做法
避免添加过多的导航项，因为这可能会导致垂直滚动，使用户更难在应用中导航。