抽屉式导航栏是任何 TV 应用中的基本组件,因为它们可让用户访问不同的目的地和功能。抽屉式导航栏是应用信息架构的支柱,提供清晰直观的应用导航方式。
与移动设备抽屉式导航栏相比,TV 上的抽屉式导航栏具有对用户可见的展开和收起状态。
资源
类型 | 关联 | 状态 |
---|---|---|
设计 | 设计源代码 (Figma) | 可用 |
实施步骤 |
Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer) |
可用 |
亮点
- 系统会根据用户重要性对目的地进行排序,将常用目的地和相关目的地组合在一起。
- 标准抽屉式导航栏和模态抽屉式导航栏在收起时都需要导航栏。
变体
抽屉式导航栏样式有两种:
- 标准抽屉式导航栏 - 可展开即可产生额外的导航空间,从而将网页内容放在一边。
- 模态抽屉式导航栏 - 显示为应用内容之上的叠加层,并配有纱罩,有助于提高抽屉式导航栏展开时的可读性。
标准抽屉式导航栏
解剖学
- 顶部部分:显示应用徽标。用作切换资料或触发搜索操作的按钮。在收起状态下,只有图标在顶部容器中保持可见。
- 导航项:侧边导航栏中的每个项都具有图标和文本的组合,在收起状态下仅显示图标。
- 导航栏:侧边导航栏是一个显示 3 到 7 个应用目的地的列,可用作主菜单。每个目的地都有一个文本标签和一个可选图标,您可以选择对菜单项进行分组以获得更好的上下文。
- 底部区域:可以包含 1-3 个操作按钮,非常适合设置、帮助或个人资料等页面。
行为
- 抽屉式导航栏展开:标准抽屉式导航栏会在展开时推动网页内容,为展开的导航栏腾出空间。
- 导航更新:从一个导航项移动到另一个导航项,页面会自动更新为新的目的地。
模态抽屉式导航栏
解剖学
- 顶部部分:显示应用徽标。用作切换个人资料或触发搜索操作的按钮。在收起状态下,只有图标会在顶部容器中保持可见。
- 导航项:侧边导航栏中的每个项都具有图标和文本的组合,在收起状态下仅显示图标。
- 导航栏:显示 3 到 7 个应用目的地(用作主菜单)的列。每个目的地都有一个文本标签和一个可选图标,您可以选择对菜单项进行分组以获得更好的上下文。
- Scrim:为了让导航项文本更易于阅读。
- 底部区域:可以包含 1-3 个操作按钮,非常适合设置、帮助或个人资料等页面。
行为
- 抽屉式导航栏展开:显示为应用内容之上的叠加层,并配有纱罩,以提高抽屉式导航栏展开时的可读性。
- 导航更新:在用户选择导航项时发生。
纱罩
对于模态抽屉式导航栏,在抽屉式导航栏后面添加纱罩,确保抽屉式导航栏内容清晰可读。您可以在抽屉式导航栏后面使用渐变或纯色表面创建不同的界面变体。

渐变纱罩

固体纱罩
规格
用法
活动指示器
活动指示器是一种视觉提示,会突出显示显示的抽屉式导航栏目的地。指示器通常以背景形状表示,在视觉上与抽屉式导航栏中的其他项目不同。活跃指示器有助于用户了解自己在应用中的位置以及正在浏览的目的地。确保处于活动状态的指示器清晰可见,并且更便于与抽屉式导航栏中的其他项区分开来。

分隔线(可选)
分隔线可用于分隔抽屉式导航栏中的各组目的地,以便更好地进行整理。但务必谨慎使用,因为过多的分隔线可能会造成视觉干扰,并让用户感到不必要的认知过载。

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

徽章已展开

标记已收起
标签
抽屉式导航栏中的标签应简洁明了,以便于阅读。

注意
如果无法避免使用较长的标签,请使用省略号截断标签。

错误做法
避免使用需要换行的长文本标签。

错误做法
避免创建不含图标的抽屉式导航栏,因为这可能会导致用户难以在应用中导航。

错误做法
避免将图标导航项与非图标导航项混用,因为这可能会让用户感到困惑。
抽屉式导航栏是表示应用层次结构的基础元素,应仅用于列出 5 到 6 个主要导航目的地。

正确做法
将抽屉式导航栏中主导航目的地的数量限制在 5 到 6 个以内,以改善用户体验。

错误做法
避免添加过多的导航项,因为这样可能会导致垂直滚动,使用户更难在应用中导航。