电视导航

电视设备为应用提供了一组有限的导航控件。为您的电视应用创建有效的导航方案取决于了解这些有限的控件以及用户操作应用时的限制。在为电视构建 Android 应用时,请特别注意用户在使用遥控器按钮而不是触摸屏时如何导航。

原则

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

高效

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

可预测

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

直观

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

控制器

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

Sample Remote
图 1. 电视遥控器的示例。

方向键
电视上的主要导航方法是通过方向键,其中包括向上、向下、向左和向右方向硬件按钮。方向键将焦点从一个对象转移到按下的按钮方向上最近的对象。

选择按钮
选择屏幕上具有焦点的项目。

主页按钮
将用户带到系统主屏幕。

后退按钮
为用户提供返回上一视图的方法。

麦克风按钮
调用 Google 助理或语音输入。

方向键导航

在电视设备上,用户使用方向键或箭头键进行导航。这种控制方式将移动限制为上、下、左、右。为了构建一个出色的针对电视优化的应用,您必须提供一种导航方案,使用户能够快速学会使用这些有限的控件来浏览您的应用。

Android 框架会自动处理布局元素之间的方向导航,因此通常您无需为您的应用做任何额外操作。但是,您应该使用方向键控制器彻底测试导航,以发现任何导航问题。

请遵循以下指南测试您的应用导航系统在电视设备上的方向键下是否运行良好

  • 确保使用方向键控制器的用户可以导航到屏幕上所有可见的控件。
  • 对于具有焦点的滚动列表,请确保方向键的上键和下键可以滚动列表,并且选择键可以选择列表中的项目。验证用户是否可以选择列表中的元素,以及在选择元素时列表是否仍然可以滚动。
  • 确保控件之间的切换简单明了且可预测。

修改方向导航

Android 框架会根据布局中可聚焦元素的相对位置自动应用方向导航方案。使用方向键控制器在您的应用中测试生成的导航方案。测试后,如果您决定希望用户以特定方式浏览您的布局,则可以为您的控件设置显式方向导航。

以下代码示例演示了如何为TextView布局对象定义下一个接收焦点的控件

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

下表列出了 Android 用户界面小部件的所有可用导航属性

属性 功能
nextFocusDown 定义用户向下导航时下一个接收焦点的视图。
nextFocusLeft 定义用户向左导航时下一个接收焦点的视图。
nextFocusRight 定义用户向右导航时下一个接收焦点的视图。
nextFocusUp 定义用户向上导航时下一个接收焦点的视图。

要使用这些显式导航属性之一,请将值设置为布局中另一个小部件的android:id。确保将导航顺序设置为循环,以便最后一个控件将焦点重新定向到第一个控件。

提供清晰的焦点和选择

应用在电视设备上的导航方案的成功与否取决于用户确定哪个用户界面元素处于焦点状态的难易程度。如果您没有提供对焦点项目的清晰指示,因此用户无法知道可以对哪个项目采取操作,他们可能会很快感到沮丧并退出您的应用。出于同样的原因,在应用启动或任何空闲时间,始终需要有一个处于焦点状态的项目,以便用户可以立即对其采取操作。

在您的应用布局和实现中,使用颜色、大小、动画或这些属性的组合来帮助用户轻松确定下一步可以执行的操作。在整个应用中使用统一的方案来指示焦点。

Android 提供了可绘制状态列表资源来实现焦点和选中控件的突出显示。以下代码示例演示了如何为按钮启用视觉行为,以指示用户已导航到该控件并选择了它

<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

以下布局 XML 示例代码将前面的状态列表可绘制对象应用于Button

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

确保在可聚焦和可选择的控件内提供足够的填充,以便其周围的突出显示清晰可见。

后退按钮导航

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

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

为了创建简单且可预测的导航体验,当用户按下遥控器上的后退按钮时,将其带到上一个目的地。

An image describing the flow of navigation when using top navigation
图 2. 使用顶部导航的流程。
An image describing the flow of navigation when using side navigation
图 3. 使用侧面导航的流程。

如果用户从菜单项导航到页面中间的卡片,然后按下后退按钮,则结果取决于应用是使用顶部导航还是左侧导航

  • 应用使用顶部导航:通过快速滚动并激活菜单上的焦点将用户带回到页面顶部。
  • 应用使用左侧导航:激活左侧菜单并聚焦于当前活动的菜单项。

确保后退按钮不受确认屏幕或无限循环的影响。

Screenshot showing a dialog asking users if they want to exit
图 4. 退出限制

不要。
避免退出限制。让用户无需确认即可退出应用。


Screenshot showing navigation looping
图 5. 导航循环

不要。
切勿进入关闭和打开菜单的无限循环。理想情况下,按下后退按钮会退出应用。除非是特殊情况(例如儿童配置文件),否则不要在菜单上显示退出按钮。

不要显示向上或后退按钮

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

Screenshot showing a soft back button on the screen
图 6. 软后退按钮

不要。

如有必要,显示取消按钮

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

Screenshot showing a soft cancel button on the screen
图 7. 软取消按钮。

做。

实现后退导航

Android 框架通常可以很好地处理后退导航,就像处理方向键一样。如果您使用导航组件,则可以支持各种导航图。有时,您可能需要实现一些自定义行为,例如让后退按钮将焦点重置到长列表的开头。

ComponentActivityFragmentActivityAppCompatActivity 的基类,它允许您通过使用其OnBackPressedDispatcher 来控制后退按钮的行为,您可以通过调用getOnBackPressedDispatcher() 来检索它。

有关更多信息,请参阅提供自定义后退导航

电视上的播放控件

视频播放是电视上最重要的功能之一。Android TV 上的应用中的视频播放器必须具有相同的行为。请参阅电视播放控件指南

直播标签导航

除了遵守电视应用质量要求之外,在“直播”标签上集成了直播电视源的应用还必须满足无摩擦播放和直接返回要求,如下面的部分所述。

无摩擦播放

无摩擦播放适用于从 Google TV 和 Android TV 的任何直播/线性频道深层链接后的应用内行为。

从 Google TV 和 Android TV 点击直播/线性频道深层链接的用户必须直接进入频道播放,目标应用不得出现任何阻止或延迟屏幕。不允许出现登录流程、注册流程、品牌视频和其他延迟。

但是,如果深层链接从冷启动开始启动目标应用加载,则在播放之前允许此启动延迟。在这种情况下,也允许应用启动品牌视频或动画。这种冷启动体验每会话不太可能发生一次以上。

此外,如果调整到深层链接的频道需要几秒钟,则允许显示频道和/或服务品牌。但是,其持续时间应仅与加载频道所需的时间一样长(类似于应用内平均频道加载时间)。

如果用户已注销或未订阅,您可以阻止付费频道的播放,以完成登录或注册流程。

直接返回

当用户从“直播”标签上的深层链接启动应用,然后按下后退按钮时,无论经过多长时间,都必须通过一次后退操作返回到“直播”标签。对于 Google TV 和 Android TV 上的所有“直播”标签深层链接,都需要这种直接返回行为。

直播标签深层链接以附加的深层链接参数区分:?exit_on_back=[true|false]。应用必须解析此参数以确定应用是从“直播”标签启动的。如果exit_on_backtrue,则应用必须实现直接返回行为。

请注意,如果用户按下后退按钮以外的任何按钮作为深层链接后的第一个按钮按下,则直接返回要求不适用,并且只需要标准的后退按钮行为

例如,假设在遵循深层链接后,用户按下了方向键的选择按钮,这会弹出一个控件叠加层。用户等待叠加层消失,然后按下后退按钮。由于在遵循深层链接后按下的第一个按钮是方向键的选择按钮,因此直接返回要求不适用。相反,应用正常的回退堆栈逻辑适用。

重复按下后退按钮必须将用户引导到应用根目录,然后返回到 Google TV 或 Android TV,而不会出现任何无限循环。有关更多信息,请参阅可预测的后退按钮行为部分。

固定起始目的地

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

深层链接模拟手动导航

无论是深层链接还是手动导航到特定目的地,用户都可以使用后退按钮通过目的地导航返回到起始目的地。

Screenshots showing a deep link into a details page within an app.
            Pressing back goes to that app's home screen and pressing back again
            returns to the original screen.
图 8. 深层链接到详细信息页面。

从另一个应用到应用的深层链接模拟手动导航。例如,如果用户从 Google TV 直接转到 Moviestar 应用的详细信息页面,然后按下后退按钮,则他们将转到 Moviestar 应用的主页。

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

让用户以清晰的方向浏览您的 UI。如果没有直接路径可以到达控件,请考虑将其重新定位。

Navigation focusable example
图 9. 控件可聚焦性。

做。
将控件(如此处所示的搜索操作)放置在不会与其他可点击元素重叠的位置。

Navigation focusable example
图 10. 控制可聚焦性。

不要。
避免布局中包含难以触及位置的控件。使用方向键操作此处显示的搜索操作并不容易。

轴线

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

Navigation axes example
图 11. 遍历。

做。
可以在垂直轴线上遍历类别,并在水平轴线上浏览每个类别中的项目。

Navigation axes example
图 12. 遍历。

不要。
避免复杂和嵌套的布局层次结构。