电视导航

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

原则

目标是让导航给用户带来自然和熟悉的感觉,同时又不会占据界面优势或将用户的注意力分散到内容上。以下原则有助于为各种 TV 应用提供一致且直观的用户体验设定基准。

高效

让用户能够轻松快捷地访问内容。用户希望通过最少的点击来快速访问内容。采用所需屏幕最少的方式整理信息。

可预测

遵循最佳实践和建议,以便用户可预测导航方式。请勿在没有必要的情况下重复创建导航模式,因为这会导致混淆和不可预测性。

直观

确保导航足够简单,以便无缝支持广泛采用的用户行为。不要添加不必要的导航层,使其变得过于复杂。

控制器

控制器有多种样式,从极简的遥控器到复杂的游戏控制器,不一而足。所有控制器都包含一个方向键,以及选择按钮、主屏幕按钮和返回按钮。其他按钮因型号而异。

示例遥控器
图 1:电视遥控器示例。

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

“选择”按钮
选择屏幕上获得焦点的项。

主屏幕按钮
将用户引导至系统主屏幕。

返回按钮
让用户可以返回到上一个视图。

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

方向键导航

在 TV 设备上,用户使用方向键或箭头键进行导航。这种控制方式将移动限定在上、下、左、右四个方向。如需构建一款针对 TV 优化的出色应用,您必须提供导航架构,让用户能够快速学会如何使用这些有限的控件在您的应用内进行导航。

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

请遵循以下准则来测试应用的导航系统是否可与 TV 设备上的方向键搭配使用:

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

修改方向导航

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

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

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

下表列出了 Android 界面 widget 的所有可用导航属性:

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

如需使用其中一个显式导航属性,请将值设置为布局中另一个 widget 的 android:id。请务必将导航顺序设置为循环,以便最后一个控件能够将焦点转回到第一个控件。

提供明确的焦点和选择

应用的导航架构能否在 TV 设备上发挥作用取决于用户判定获得焦点的界面元素的难易程度。如果您未提供明确指示获得焦点的项目(因而无法明确指示用户可以对什么项目执行操作),他们可能很快就会因失望而退出您的应用。出于同样的原因,请务必在应用启动后或处于空闲状态的任何时间,始终让某个项目获得焦点,让用户可以对其执行操作。

在应用布局和实现中,可以使用颜色、尺寸、动画或这些属性的组合,帮助用户轻松确定他们接下来可以执行的操作。使用统一的架构在整个应用中指示焦点。

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" />

请务必在可聚焦控件和可选择控件内提供足够的内边距,使其周围的突出显示内容清晰可见。

返回按钮导航

为了在平台上应用之间保持一致,请确保返回按钮的行为遵循这些准则。

使用可预测的返回按钮行为

为了打造简单且可预测的导航体验,当用户按遥控器的返回按钮时,应将其转到上一个目的地。

使用顶部导航时
描述使用顶部导航时的导航流程的图片
使用左侧导航栏时
描述使用左侧导航栏时的导航流程的图片

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

  • 应用使用顶部导航栏:快速滚动并激活菜单上的焦点,使用户返回页面顶部。
  • 应用使用左侧导航栏:激活左侧菜单,并将焦点置于当前处于活动状态的菜单项。

确保返回按钮不受确认屏幕或无限循环的一部分限制。

显示询问用户是否想要退出的对话框的屏幕截图

错误做法
避免退出门控。让用户无需确认即可退出应用。


显示导航循环的屏幕截图

错误做法
永远不要进入关闭和打开菜单的无限循环。理想情况下,按返回按钮会退出应用。不要在菜单上显示退出按钮,除非是特殊情况(例如儿童个人资料)。

不显示向上或返回按钮

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

显示在屏幕上软返回按钮的屏幕截图

错误做法

如有必要,显示“取消”按钮

如果仅可见的操作为确认、破坏性或购买操作,最好有一个可返回到上一个目的地的 Cancel 按钮:

屏幕上显示软取消按钮的屏幕截图

正确做法

实现返回导航

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

ComponentActivityFragmentActivityAppCompatActivity 的基类,可让您使用其 OnBackPressedDispatcher 控制返回按钮的行为,后者可通过调用 getOnBackPressedDispatcher() 进行检索。

如需了解详情,请参阅提供自定义返回导航

TV 上的播放控件

视频播放是电视上最重要的功能之一。请务必让 Android TV 各款应用中的视频播放器的行为保持一致。请参阅 TV 的播放控件准则

“直播”标签页导航

除了符合电视应用质量要求之外,在“直播”标签页中集成了直播电视 Feed 的应用还必须符合流畅播放和直接播放的要求,如以下部分所述。

流畅播放

流畅播放适用于点击 Google TV 和 Android TV 中的任何直播/线性频道深层链接后发生的应用内行为。

用户在 Google TV 和 Android TV 中点击直播/线性频道深层链接后,必须直接转到频道播放页面,目标应用中不会出现任何屏蔽或延迟屏幕。允许出现登录流程、注册流程、品牌推广视频以及其他延迟问题。

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

此外,如果调谐到深层链接频道需要几秒钟的时间,则允许显示频道和/或服务品牌信息。但是,其时长应该与加载频道所需的时间相同(并且与应用中的平均频道加载时间类似)。

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

直背式

当用户通过“直播”标签页上的深层链接启动应用,然后按返回按钮时,无论经过多长时间,用户都必须通过单次返回按钮返回到“直播”标签页。Google TV 和 Android TV 上的所有“直播”标签页深层链接都需要此直接返回行为。

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

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

例如,假设用户在点击某个深层链接后,按方向键的选择按钮,从而调出一个控件叠加层。用户等待叠加层消失,然后按返回按钮。由于在点击深层链接后按下的第一个按钮是方向键选择按钮,因此直接返回要求不适用。而是应用常规的应用返回堆栈逻辑。

重复按下返回按钮必须将用户引导至应用根目录,然后再返回到 Google TV 或 Android TV,而不会出现任何无限循环。如需了解详情,请参阅可预测的返回按钮行为部分。

固定的起始目的地

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

深层链接可模拟手动导航

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

显示指向应用内详情页面的深层链接的屏幕截图。按“返回”可返回该应用的主屏幕,再按“返回”可返回原始屏幕。

从其他应用深层链接到某个应用可以模拟手动导航。例如,如果用户从 Google TV 直接前往 Moviestar 应用中的详情页面,然后按返回按钮,便会进入 Moviestar 应用的首页。

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

让用户能够在界面中清晰地导航。如果没有简单的途径可以到达控件,请考虑重新放置控件。

可聚焦导航的示例

正确做法
请将控件(例如此处显示的搜索操作)放置在不与其他可点击元素重叠的位置。

可聚焦导航的示例

错误做法
应避免在布局不方便到达的位置使用包含控件的控件。使用方向键很难管理到达此处显示的搜索操作。

设计您的布局,以便同时利用水平轴和垂直轴。 为每个方向指定一个特定函数,以便快速浏览大型层次结构。

导航轴示例

正确做法
类别可以在纵轴上遍历,每个类别中的项都可以在横轴上浏览。

导航轴示例

错误做法
避免使用复杂的嵌套布局层次结构。