电视导航

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

Navigation hero

重点

  • 控制器提供有限的导航功能 - 上下左右 - 所以请注意这如何影响您的应用的 UI 设计。
  • 导航应该感觉自然而熟悉。
  • 使用遥控器的后退按钮创建简单的导航体验。
  • 如果用户没有直接路径到达控件,请考虑重新定位它。

原则

目标是让导航感觉自然而熟悉,不会主导用户界面或分散对内容的注意力。以下原则有助于为各种电视应用设置一致且直观的用户体验基线。

高效

使其快速简便地访问内容。用户希望快速访问内容,只需最少的点击次数。以需要最少屏幕的方式组织您的信息。

可预测

遵循最佳实践和建议,使导航对用户而言可预测。无需不必要地重新设计导航模式,因为这会导致混淆和不可预测性。

直观

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

控制器

控制器有多种样式,从极简遥控器到复杂的体感控制器。所有控制器都包括方向键 (D-pad) 以及选择、主页和后退按钮。其他按钮因型号而异。

Controller

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

D-pad 导航

在电视设备上,用户使用 4 向 D-pad 进行导航:向上、向下、向左和向右。要构建最佳的电视应用,请设计一个导航方案,使用户能够快速学习如何使用四个箭头键使用您的应用。D-pad 将焦点从一个元素移动到相应方向上最近的元素。

要测试您的应用的导航在电视设备上的 D-pad 上运行良好,请考虑以下几点

  • 确保用户可以导航到屏幕上所有可聚焦的元素。
  • 确保导航方向简单明了且可预测。
  • 对于滚动列表,请确保 D-pad 的向上和向下按钮滚动整个列表,并且可以选中每个列表项。

主页按钮

按主页按钮总是将用户带回 Google TV 主页或启动器。默认情况下,当前应用会在后台暂停。

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

Home button

后退按钮

为了平台上应用的一致性,请确保后退按钮的行为遵循以下准则。

使用可预测的后退按钮行为

要创建可预测的导航体验,当用户按下遥控器上的后退按钮时,将其带到之前的目的地。最终,如果用户继续按下后退按钮,则用户应该会到达 Google TV 主页或启动器。

带有顶部导航的应用

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

App with top navigation
带有左侧导航的应用

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

App with left navigation

确保后退按钮不会被确认屏幕或无限循环的一部分所限制。

避免退出限制。用户应该能够在没有任何确认的情况下退出应用。

不要显示后退按钮

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

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

如有必要,显示取消按钮

如果唯一可见的操作是确认、破坏性操作或购买操作,则最好提供一个取消按钮,以便返回到之前的目的地。

根据需要显示取消按钮,允许用户导航回上一页。

固定起始目的地

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

深度链接模拟手动导航

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

Deep linking simulates manual navigation

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

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

让用户以清晰的方向导航您的UI。如果没有直接路径可以到达一个控件,请考虑重新定位它。

将控件(如搜索操作)放置在不会与其他可点击元素重叠的位置。
避免包含难以触及位置的控件的布局。使用D-pad很难操作此处所示的搜索操作。

轴线

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

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