抽屉式导航栏

抽屉式导航栏是任何 TV 应用中的基本组件，因为它们可让用户访问不同的目的地和功能。抽屉式导航栏是应用信息架构的支柱，提供清晰直观的应用导航方式。

与移动设备抽屉式导航栏相比，TV 上的抽屉式导航栏具有对用户可见的展开和收起状态。

资源

类型	关联	状态
设计	设计源代码 (Figma)	可用
实施步骤	Jetpack Compose (NavigationDrawer) Jetpack Compose (ModalNavigationDrawer)	可用

亮点

• 系统会根据用户重要性对目的地进行排序，将常用目的地和相关目的地组合在一起。
• 标准抽屉式导航栏和模态抽屉式导航栏在收起时都需要导航栏。

变体

抽屉式导航栏样式有两种：

1. 标准抽屉式导航栏 - 可展开即可产生额外的导航空间，从而将网页内容放在一边。
2. 模态抽屉式导航栏 - 显示为应用内容之上的叠加层，并配有纱罩，有助于提高抽屉式导航栏展开时的可读性。

标准抽屉式导航栏

解剖学

1. 顶部部分：显示应用徽标。用作切换资料或触发搜索操作的按钮。在收起状态下，只有图标在顶部容器中保持可见。
2. 导航项：侧边导航栏中的每个项都具有图标和文本的组合，在收起状态下仅显示图标。
3. 导航栏：侧边导航栏是一个显示 3 到 7 个应用目的地的列，可用作主菜单。每个目的地都有一个文本标签和一个可选图标，您可以选择对菜单项进行分组以获得更好的上下文。
4. 底部区域：可以包含 1-3 个操作按钮，非常适合设置、帮助或个人资料等页面。

行为

• 抽屉式导航栏展开：标准抽屉式导航栏会在展开时推动网页内容，为展开的导航栏腾出空间。
• 导航更新：从一个导航项移动到另一个导航项，页面会自动更新为新的目的地。

模态抽屉式导航栏

解剖学

1. 顶部部分：显示应用徽标。用作切换个人资料或触发搜索操作的按钮。在收起状态下，只有图标会在顶部容器中保持可见。
2. 导航项：侧边导航栏中的每个项都具有图标和文本的组合，在收起状态下仅显示图标。
3. 导航栏：显示 3 到 7 个应用目的地（用作主菜单）的列。每个目的地都有一个文本标签和一个可选图标，您可以选择对菜单项进行分组以获得更好的上下文。
4. Scrim：为了让导航项文本更易于阅读。
5. 底部区域：可以包含 1-3 个操作按钮，非常适合设置、帮助或个人资料等页面。

行为

• 抽屉式导航栏展开：显示为应用内容之上的叠加层，并配有纱罩，以提高抽屉式导航栏展开时的可读性。
• 导航更新：在用户选择导航项时发生。

纱罩

对于模态抽屉式导航栏，在抽屉式导航栏后面添加纱罩，确保抽屉式导航栏内容清晰可读。您可以在抽屉式导航栏后面使用渐变或纯色表面创建不同的界面变体。

规格

用法

徽章

标记是可添加到导航项中以提供更多信息的视觉提示。例如，标记可用于指示在线播放应用中提供的新电影的数量。应谨慎使用标记，并且仅在必要时使用标记，因为它们可能会使界面显得杂乱无章。使用标记时，应确保标记清晰易懂，且不会干扰用户在应用中导航的能力。

标签

抽屉式导航栏中的标签应简洁明了，以便于阅读。

抽屉式导航栏是表示应用层次结构的基础元素，应仅用于列出 5 到 6 个主要导航目的地。