TV 设备为应用提供了一组有限的导航控件。如需为 TV 界面创建有效的导航架构,请考虑这些有限的控件以及用户使用遥控器按钮(而不是触摸屏)进行导航的方式。

亮点
- 该控制器仅提供从左到右的导航功能,因此请注意这对应用的界面设计有何影响。
- 导航应让人感到自然和熟悉。
- 使用遥控器的返回按钮打造简单的导航体验。
- 如果用户前往某个控件没有直线路径,请考虑重新定位该控件。
原则
这样做的目标是让导航让用户感到自然和熟悉,而不会搞混界面或转移用户的注意力。以下原则有助于为各种 TV 应用提供一致且直观的用户体验设定基准。
高效
让用户能够轻松快速地获取内容。用户希望通过最少的点击来快速访问内容。以需要最少屏幕的方式整理信息。
可预测
遵循最佳实践和建议,以便用户能够预测导航方式。请勿重复创建导航模式,因为这会导致混淆和不可预测性。
直观易读
确保导航足够简单,以便无缝支持广泛采用的用户行为。不要添加不必要的导航层,使其变得过于复杂。
控制器
控制器有多种样式,从极简的遥控器到复杂的游戏控制器,不一而足。所有控制器都包含一个方向键,以及选择按钮、主屏幕按钮和返回按钮。其他按钮因型号而异。
- 方向键 - 电视上的主要导航方式是通过方向键,包括向上、向下、向左和向右方向键按钮。
- “选择”按钮 - 选择屏幕上获得焦点的项。 按住即可显示更多选项。
- 主屏幕按钮 - 将用户引导至系统主屏幕。
- 返回按钮 - 使用户能够返回上一个视图。
- 麦克风按钮 - 调用 Google 助理或语音输入。
方向键导航
在 TV 设备上,用户使用四向方向键(向上、向下、向左和向右)进行导航。 为了构建最佳的 TV 应用,请设计一个导航架构,让用户能够通过四个箭头键快速了解如何使用您的应用。方向键可将焦点从一个元素移动到相应方向上最近的元素。
如需测试您的应用导航是否能在电视设备上通过方向键顺畅运行,请考虑以下因素:
- 确保用户可以找到屏幕上所有可聚焦的元素。
- 确保导航方向简单明了且可预测。
- 对于滚动列表,请确保使用方向键的向上和向下按钮可滚动整个列表,并且可以选择每个列表项。
“主屏幕”按钮
按主屏幕按钮始终会将用户带回 Google TV 主屏幕或启动器。默认情况下,当前应用会在后台挂起。
长按主屏幕按钮可在 Google TV 上显示系统信息中心,在 Android TV 上显示应用网格。默认行为可能因制造商而异。
“返回”按钮
为了在平台上的应用之间保持一致,请确保返回按钮的行为遵循这些准则。
使用可预测的返回按钮行为
为了打造可预测的导航体验,当用户按遥控器的返回按钮时,应将其转到上一个目的地。最终,如果用户持续按返回按钮,则应进入 Google TV 主屏幕或启动器。
用户通过快速滚动返回页面顶部,并激活菜单的焦点。

系统会激活左侧菜单,并将用户的焦点转到处于活动状态的菜单项。

确保返回按钮不受确认屏幕或无限循环的一部分的限制。

错误做法
不显示返回按钮
与手持设备不同,遥控器上的返回按钮在电视上用于向后导航。无需在屏幕上显示虚拟返回按钮。

错误做法
根据需要显示“取消”按钮
如果只有确认、破坏性或购买操作是可见的操作,最好使用一个“取消”按钮,该按钮可返回到上一个目的地。

正确做法
导航架构
固定的起始目的地
用户从启动器启动应用时看到的第一个屏幕,也是用户在按下返回按钮后返回到启动器时看到的最后一个屏幕。
深层链接可模拟手动导航
无论是使用深层链接还是手动导航到特定目的地,用户可以使用返回按钮从应用中的任意位置导航到起始目的地。

从其他应用深层链接到某个应用可以模拟手动导航。例如,如果用户从 Google TV 直接前往 Moviestar 应用的详情页面,然后按返回按钮,便会进入 Moviestar 应用的首页。
所有可聚焦元素的清晰路径
让用户能够在界面中指明方向。如果没有直接的路径可以到达控件,请考虑重新定位该控件。

正确做法

错误做法
轴
设计布局以充分利用水平轴和垂直轴。 为每个方向提供特定函数,以便快速浏览大型层次结构。

正确做法
