TV 设备为应用提供了一组有限的导航控件。如需为 TV 界面创建有效的导航架构,请考虑这些有限的控件以及用户使用遥控器按钮(而不是触摸屏)进行导航的方式。
![导航主打图片](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/cover-navigation.webp?authuser=9&hl=uk)
亮点
- 该控制器仅提供从左到右的导航功能,因此请注意这对应用的界面设计有何影响。
- 导航应让人感到自然和熟悉。
- 使用遥控器的返回按钮打造简单的导航体验。
- 如果用户前往某个控件没有直线路径,请考虑重新定位该控件。
原则
这样做的目标是让导航让用户感到自然和熟悉,而不会搞混界面或转移用户的注意力。以下原则有助于为各种 TV 应用提供一致且直观的用户体验设定基准。
高效
让用户能够轻松快速地获取内容。用户希望通过最少的点击来快速访问内容。以需要最少屏幕的方式整理信息。
可预测
遵循最佳实践和建议,以便用户能够预测导航方式。请勿重复创建导航模式,因为这会导致混淆和不可预测性。
直观易读
确保导航足够简单,以便无缝支持广泛采用的用户行为。不要添加不必要的导航层,使其变得过于复杂。
控制器
控制器有多种样式,从极简的遥控器到复杂的游戏控制器,不一而足。所有控制器都包含一个方向键,以及选择按钮、主屏幕按钮和返回按钮。其他按钮因型号而异。
- 方向键 - 电视上的主要导航方式是通过方向键,包括向上、向下、向左和向右方向键按钮。
- “选择”按钮 - 选择屏幕上获得焦点的项。 按住即可显示更多选项。
- 主屏幕按钮 - 将用户引导至系统主屏幕。
- 返回按钮 - 使用户能够返回上一个视图。
- 麦克风按钮 - 调用 Google 助理或语音输入。
方向键导航
在 TV 设备上,用户使用四向方向键(向上、向下、向左和向右)进行导航。 为了构建最佳的 TV 应用,请设计一个导航架构,让用户能够通过四个箭头键快速了解如何使用您的应用。方向键可将焦点从一个元素移动到相应方向上最近的元素。
如需测试您的应用导航是否能在电视设备上通过方向键顺畅运行,请考虑以下因素:
- 确保用户可以找到屏幕上所有可聚焦的元素。
- 确保导航方向简单明了且可预测。
- 对于滚动列表,请确保使用方向键的向上和向下按钮可滚动整个列表,并且可以选择每个列表项。
“主屏幕”按钮
按主屏幕按钮始终会将用户带回 Google TV 主屏幕或启动器。默认情况下,当前应用会在后台挂起。
长按主屏幕按钮可在 Google TV 上显示系统信息中心,在 Android TV 上显示应用网格。默认行为可能因制造商而异。
“返回”按钮
为了在平台上的应用之间保持一致,请确保返回按钮的行为遵循这些准则。
使用可预测的返回按钮行为
为了打造可预测的导航体验,当用户按遥控器的返回按钮时,应将其转到上一个目的地。最终,如果用户持续按返回按钮,则应进入 Google TV 主屏幕或启动器。
用户通过快速滚动返回页面顶部,并激活菜单的焦点。
![带有顶部导航栏的应用](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/back-top-navigation.webp?authuser=9&hl=uk)
系统会激活左侧菜单,并将用户的焦点转到处于活动状态的菜单项。
![显示左侧导航栏的应用](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/back-left-navigation.webp?authuser=9&hl=uk)
确保返回按钮不受确认屏幕或无限循环的一部分的限制。
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/back-gating.webp?authuser=9&hl=uk)
错误做法
不显示返回按钮
与手持设备不同,遥控器上的返回按钮在电视上用于向后导航。无需在屏幕上显示虚拟返回按钮。
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/back-no-button.webp?authuser=9&hl=uk)
错误做法
根据需要显示“取消”按钮
如果只有确认、破坏性或购买操作是可见的操作,最好使用一个“取消”按钮,该按钮可返回到上一个目的地。
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/show-cancel.webp?authuser=9&hl=uk)
正确做法
导航架构
固定的起始目的地
用户从启动器启动应用时看到的第一个屏幕,也是用户在按下返回按钮后返回到启动器时看到的最后一个屏幕。
深层链接可模拟手动导航
无论是使用深层链接还是手动导航到特定目的地,用户可以使用返回按钮从应用中的任意位置导航到起始目的地。
![深层链接可模拟手动导航](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/arch-deep-linking.webp?authuser=9&hl=uk)
从其他应用深层链接到某个应用可以模拟手动导航。例如,如果用户从 Google TV 直接前往 Moviestar 应用的详情页面,然后按返回按钮,便会进入 Moviestar 应用的首页。
所有可聚焦元素的清晰路径
让用户能够在界面中指明方向。如果没有直接的路径可以到达控件,请考虑重新定位该控件。
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/clear-ui-do.webp?authuser=9&hl=uk)
正确做法
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/clear-ui-dont.webp?authuser=9&hl=uk)
错误做法
轴
设计布局以充分利用水平轴和垂直轴。 为每个方向提供特定函数,以便快速浏览大型层次结构。
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/axis-do.webp?authuser=9&hl=uk)
正确做法
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/axis-dont.webp?authuser=9&hl=uk)