电视上的导航

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

Navigation hero

重点

  • 控制器提供的导航功能有限 - 上、下、左、右 - 因此请注意这如何影响您的应用的 UI 设计。
  • 导航应感觉自然且熟悉。
  • 使用遥控器的返回按钮创建简单的导航体验。
  • 如果用户没有直接途径到达某个控件,请考虑将其重新定位。

原则

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

高效

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

可预测

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

直观

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

控制器

控制器有多种样式,从极简主义的遥控器到复杂的电子游戏控制器。所有控制器都包括方向键(D 键)以及选择、主页和返回按钮。其他按钮因型号而异。

Controller

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

D 键导航

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

要测试您的应用导航在电视设备上的 D 键上是否运行良好,请考虑以下事项

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

主页按钮

按下主页按钮始终会将用户带回 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。如果没有直接路径可以到达某个控件,请考虑将其重新定位。

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

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

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