TV 设备导航

TV 设备为应用提供了一组有限的导航控件。要为您的 TV UI 创建有效的导航方案,请考虑这些有限的控件以及用户如何使用遥控器按钮而非触摸屏进行导航。

Navigation hero

要点

  • 控制器提供的导航能力有限(上下左右),因此请注意这如何影响您应用的 UI 设计。
  • 导航应该感觉自然且熟悉。
  • 利用遥控器的返回按钮创建简单的导航体验。
  • 如果用户没有直接的路径来触达某个控件,请考虑重新放置它。

原则

目标是让导航感觉自然且熟悉,同时不支配用户界面或分散对内容的注意力。以下原则有助于为所有 TV 应用提供一致且直观的用户体验设定基准。

高效

快速轻松地触达内容。用户希望快速访问内容,且点击次数最少。以所需屏幕最少的方式组织您的信息。

可预测

遵循最佳实践和建议,使用户导航可预测。不要不必要地重新发明导航模式,因为这会导致混乱和不可预测。

直观

使导航足够简单,以便无缝支持广泛采用的用户行为。不要通过添加不必要的导航层来过度复杂化。

控制器

控制器有多种样式,从简约的遥控器到复杂的游戏控制器。所有控制器都包含方向键 (D-pad) 以及选择、主屏幕和返回按钮。其他按钮因型号而异。

Controller

  • 方向键 (D-pad) - TV 上的主要导航方法是通过方向键,其中包括向上、向下、向左和向右的方向硬件按钮。
  • 选择按钮 - 选择屏幕上具有焦点的项目。按住可用于显示更多选项。
  • 主屏幕按钮 - 将用户带到系统主屏幕。
  • 返回按钮 - 为用户提供返回上一个视图的方法。
  • 麦克风按钮 - 调用 Google Assistant 或语音输入。

方向键导航

在 TV 设备上,用户使用四向方向键(D-pad)进行导航:上、下、左、右。要构建最佳 TV 应用,请设计一个导航方案,使用户能够快速学会使用四个方向键操作您的应用。方向键将焦点从一个元素移动到相应方向上最近的元素。

要测试您的应用的导航是否能很好地与 TV 设备上的方向键配合使用,请考虑以下几点

  • 确保用户可以导航到屏幕上的所有可聚焦元素。
  • 确保导航方向直接且可预测。
  • 对于可滚动的列表,请确保方向键的向上和向下按钮可以滚动整个列表,并且每个列表项都可以被选中。

主屏幕按钮

按下主屏幕按钮总是会将用户带回到 Google TV 主屏幕或启动器。当前应用将默认在后台挂起。

长按主屏幕按钮会在 Google TV 上显示系统控制面板,在 Android TV 上显示应用网格。默认行为可能因制造商而异。

Home button

返回按钮

为了平台上的应用之间保持一致性,请确保返回按钮的行为遵循以下指南。

使用可预测的返回按钮行为

要创建可预测的导航体验,当用户按下遥控器的返回按钮时,将其带到上一个目标位置。最终,如果用户持续按下返回按钮,应该会回到 Google TV 主屏幕或启动器。

带顶部导航的应用

通过快速滚动将用户带回页面顶部,并将焦点激活到菜单。

App with top navigation

带左侧导航的应用

激活左侧菜单,并将用户的焦点带到活动菜单项。

App with left navigation

确保返回按钮不会被确认屏幕或无限循环所阻碍。

避免设置退出门槛。用户应该能够在没有任何确认的情况下退出应用。

不要显示返回按钮

与手持设备不同,遥控器上的返回按钮用于在 TV 上向后导航。没有必要在屏幕上显示虚拟返回按钮。

避免在屏幕上显示返回按钮。用户可以使用遥控器上的返回按钮。

如有必要,显示取消按钮

如果唯一可见的操作是确认、破坏性或购买操作,那么设置一个返回上一个目标位置的取消按钮是很好的做法。

如有需要,显示取消按钮,让用户导航回上一页。

固定的起始目标位置

用户从启动器启动应用时看到的第一个屏幕,也是他们在按下返回按钮后返回启动器时看到的最后一个屏幕。

深层链接模拟手动导航

无论是深层链接还是手动导航到特定目标位置,用户都可以使用返回按钮从应用中的任何位置导航到起始目标位置。

Deep linking simulates manual navigation

从另一个应用深层链接到某个应用会模拟手动导航。例如,如果用户从 Google TV 直接转到 Moviestar 应用上的详情页面,然后按下返回按钮,他们会被带到 Moviestar 应用的主页。

到所有可聚焦元素的清晰路径

让用户以清晰的方向导航您的 UI。如果无法直接触达某个控件,请考虑重新放置它。

将控件(如搜索操作)放置在不与其他可点击元素重叠的位置。
避免在难以触达的位置包含控件的布局。使用方向键管理此处显示的搜索操作并不容易。

设计您的布局以利用水平轴和垂直轴。为每个方向赋予特定功能,以便快速导航大型层次结构。

可以在垂直轴上遍历类别,并且可以在水平轴上浏览每个类别中的项目。
避免复杂和嵌套的布局层次结构。