电视导航

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

原则

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

高效

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

可预测

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

直观

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

控制器

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

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. 遍历。

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