电视导航

电视设备为应用提供的导航控件非常有限。要为电视应用创建有效的导航方案,不仅需要理解这些受限的控件,还要考虑到用户在操作应用时的局限性。在构建 Android 电视应用时,请特别注意当用户使用遥控器按钮而非触摸屏进行操作时,他们是如何进行导航的。

原则

导航的目标是让操作感觉自然且熟悉,同时不影响用户界面或分散对内容的注意力。以下原则有助于为电视应用建立一致且直观的用户体验基准。

高效

确保能快速、轻松地获取内容。用户希望通过最少的点击次数快速访问内容。组织信息时应尽量减少所需的屏幕跳转次数。

可预测

遵循最佳实践和建议,使导航对用户而言是可预测的。不要无谓地重新发明导航模式,因为这会导致困惑和不可预测性。

直观

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

控制器

控制器种类繁多,从极简的遥控器到复杂的游戏手柄应有尽有。所有控制器都包含一个方向键 (D-pad) 以及选择、主页和返回按钮。其他按钮因型号而异。

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

方向键 (D-pad)
电视上的主要导航方式是通过方向键,它包括上、下、左、右硬件方向按钮。方向键会将焦点从一个对象转移到所按方向上最近的对象。

选择按钮
选中屏幕上当前获得焦点的项目。

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

返回按钮
为用户提供返回上一个视图的方式。

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

方向键导航

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

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

遵循以下指南来测试应用导航系统在电视设备上通过方向键能否良好工作:

  • 确保使用方向键控制器的用户能够导航到屏幕上所有可见的控件。
  • 对于有焦点的滚动列表,确保方向键的上、下按钮可以滚动列表,而选择按钮可以选中列表中的项目。验证用户能够选中列表中的元素,并确保在选中某个元素时列表仍能滚动。
  • 确保在不同控件之间切换的过程直接且可预测。

修改方向导航

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

以下代码示例展示了如何为 TextView 布局对象定义下一个获得焦点的控件:

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

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

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

要使用这些明确的导航属性之一,请将值设置为布局中另一个小部件的 android:id。请务必将导航顺序设置为循环,以便最后一个控件能将焦点导回第一个。

提供清晰的焦点和选中状态

电视设备上应用导航方案的成功与否,取决于用户识别当前获得焦点界面元素的难易程度。如果您未提供明确的焦点指示,导致用户不清楚当前可对哪个项目采取操作,他们很快会感到沮丧并退出应用。同样,在应用启动后或处于空闲状态时,始终让一个用户可立即操作的项目处于焦点状态非常重要。

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

Android 提供了可绘制状态列表资源 (Drawable state list resources) 来实现焦点和选中控件的高亮显示。以下代码示例演示了如何启用按钮的视觉行为,以指示用户已导航至该控件并将其选中:

<!-- 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 框架通常能很好地处理返回导航,就像处理方向键一样。如果您使用 Navigation 组件,则可以支持多种导航图。有时,您可能需要实现一些自定义行为,例如让返回按钮将焦点重置到长列表的开头。

ComponentActivityFragmentActivityAppCompatActivity 的基类,它允许您通过其 OnBackPressedDispatcher 控制返回按钮的行为,您可以通过调用 getOnBackPressedDispatcher() 来检索该调度程序。

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

TV 上的播放控制

视频播放是电视最重要的功能之一。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. 遍历。

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