设计和用户体验指南


设计和用户体验指南

电视用户界面设计与台式计算机、平板电脑或手机的设计有很大的不同。这些指南将帮助您熟悉 10 英尺用户界面的设计原则,并帮助您将应用及其设计集成到 Amazon Fire TV 用户界面中。

一般原则

使用这些原则来指导整个应用的设计。

10 英尺用户界面

电视界面通常称为 10 英尺用户界面(10 英尺 UI),因为用户从 10 英尺外或更远距离观看屏幕。虽然屏幕本身可能很大,但屏幕分辨率较低,距屏幕的距离意味着视角较小。

对于在台式计算机、平板电脑或手机上运行的应用或网页,您将做出的设计选择具有根本性不同,因为用户通常会从更近的距离查看这些屏幕。

此外,由于人们看电视时以使用计算机、平板电脑或手机时更为放松,因此电视上的 UI 应该不需要太多注意力和精确度。10 英尺 UI 可能需要您全面重新考虑现有应用的设计、布局和导航。

清晰、简单、直观

10 英尺 UI 中的屏幕设计需要简单和清晰,信息密度低。限制屏幕上的设计元素或 UI 组件(菜单、按钮、图像)的数量,并确保这些元素足够大且间距足够远,以便于从远处读取。为每个屏幕呈现一组明确的操作或选项。

尽量减少文本量,因为用户不会在电视屏幕上阅读大量文本。避免要求用户输入大量信息,并尽可能提供合理的默认值。

将重要内容放在第一个位置

将最重要的内容或选项放在屏幕上的第一个位置,以便用户可以轻松查看和导航。

专注于使用

应用应该明确专注于让用户快速获取内容。电视界面主要用于提供娱乐。当用户坐在电视机前时,他们不想做额外的工作。他们需要与其主要目标相匹配的简单用户界面: “立即给我一些东西看、听或玩。”

设计指南

在应用中设计单个屏幕和视图时,请使用这些指南。

屏幕尺寸和分辨率

为平板电脑或手机屏幕设计应用时,您处理的是具有固定大小和分辨率的屏幕。电视设计的不同之处在于,同一个应用可能以 720p 或 1080p 分辨率出现在任何尺寸的屏幕上。

我们建议您为完整的 1080p 电视屏幕设计应用及其资源,以获得最佳体验。Amazon Fire TV 平台会根据适当的电视输出缩放您的资源。对于 1080p,屏幕大小为 1920x1080px,密度为 320 dpi(“xhdpi”),输出分辨率为 960x540dp(“大”)。

Amazon Fire TV 平台还支持标准安卓配置,用于为不同的输出参数启用多个资源目录,如支持多屏幕的安卓开发者指南中所述。

当您的应用运行时,Fire TV 会从相应的文件夹加载您的资源。有关 Amazon Fire TV 可用资源配置的更多信息,请参阅显示和布局

过扫描和安全区

无论其物理尺寸如何,电视硬件制造商都会在屏幕的可显示区域周围保留空间。此保留空间称为过扫描。电视机用作过扫描的空间量因制造商而异。您的应用不能使用该空间。

虽然 Amazon Fire TV 平台为用户提供了一种方法来调整设置中的电视过扫描,但为了实现尽可能安全的行为,我们建议您避免将应用的任何 UI 元素放在屏幕上任一边缘外侧 5% 的空间内。特别是焦点项目和屏幕文本应完全位于用户界面内侧 90% 的空间(安全区)内。

过扫描

您可以通过“开发者选项”在 Fire TV 上显示过扫描。请参阅 System X-Ray

颜色

电视屏幕比电脑屏幕具有更高的对比度,这可以使颜色看起来更饱和、更亮、更鲜艳。色域(可以显示的颜色范围)也小于 PC 屏幕。在您的应用中,使用不太饱和的颜色。冷色(蓝色、紫色、灰色)比暖色(红色、橙色)效果更好。

颜色

排版

因为电视屏幕必须从整个房间读取,所以对正文文本使用较大的字体大小(至少 14sp,在 720p 上大约为 19px,在 1080p 上大约为 28px)。亚马逊使用 Helvetica Neue Regular 作为系统字体。

保持项目描述或其他文本块尽可能简短,包括内容和行宽方面。使用比在桌面或平板电脑屏幕上使用的更大的行间距。将文本分成段落或块,并用简短的声明性句子书写。

Amazon Fire TV 用户界面上的导航和用户输入都是通过其中一个 Fire TV 遥控器(Amazon Fire TV 遥控器或语音遥控器)或游戏控制器(Amazon Fire 游戏控制器或其他蓝牙游戏控制器)完成的。使用物理控制器,而不是使用鼠标、键盘或触摸输入使 Fire TV 应用的输入和控制方法不如其他设备灵活。

方向键定向导航

Amazon Fire TV 遥控器之一或游戏控制器上的左右上下方向键在应用的用户界面中导航。清楚指明用户应如何在应用的用户界面中进行移动。用户应立即看到清晰的上下和左右方向,并且每个可操作的屏幕元素都可以使用方向键进行访问。

焦点和选择

当用户使用遥控器或游戏控制器上的方向键在用户界面中导航时,不同的 UI 元素会突出显示以指示元素获得焦点。您的应用应清楚地指出哪个屏幕元素当前获得焦点。当用户的目光离开电视机然后重新注视电视机时,应该清楚地知道他们有哪些导航选项。

当用户在 UI 元素获得焦点时按“选择”键(或游戏控制器上的 A 按键)时,该元素应该立刻更改为选定状态。

文本输入

当用户将焦点移到文本字段时,会自动显示系统键盘。然后,用户可以通过使用遥控器或游戏控制器上的方向按键选择字母和数字来输入信息。将显示建议的完成项,可随时选择。

屏幕、视图和流

本节介绍 Amazon Fire TV 用户界面中主要屏幕和视图的模式,以及用于构建它们的控件的描述。如果您选择优化自己的应用的设计并将其与系统 UI 集成,请使用这些模式作为参考。

屏幕

主屏幕(启动器)

屏幕

主屏幕由左侧的全局导航菜单和右侧的一组内容磁贴组成。

全局导航菜单是主系统菜单。它出现在屏幕左侧的一排中。全局导航菜单允许用户选择主要内容类别或其他选项,包括搜索、主页、电影、电视、音乐、游戏、应用等。全局导航菜单中的每一项都可以通过上下方向按键进行选择。

当用户将焦点移到全局导航菜单中的任一项上时,该节点的主视图将显示在屏幕右侧。每个节点都有自己的主视图和自己的内容。通过 Fire TV 遥控器或游戏控制器上的“主页”键,或者通过从全局导航菜单中选择“主页”,可以访问整个系统主视图(有时称为启动器)。

内容行

每个主视图都包含多个水平内容行。行的标题磁贴指示内容类型(例如,“最热门”、“我的电影”、“为您推荐”)。其余磁贴显示该内容的示例。在这些内容行中,用户可以:

  • 使用上下方向按键在行之间导航。
  • 使用左键返回导航菜单。
  • 选择“选择”或右方向键可选择一行并查看该行的一维列表。

一维列表视图

一维列表

当用户从主视图中选择内容行时,将显示一维列表视图。一维列表包含单行项目。标题栏指示列表的标题(例如,“最热门”、“我的电影”、“为您推荐”),以及两个数字,分别表示列表中项目的数量和具有焦点的项目的位置。

浏览列表中具有焦点的项目将在列表下方显示该项目的简单详情。简单详情可以包括基本项目信息(标题、日期、评级)以及“添加到播放列表”等选项。

从一维列表中,用户可以:

  • 使用左右方向按键在项目之间导航。导航到列表末尾之后会将焦点重新回到第一个项目。
  • 使用“选择”按键选择一个项目,这将显示该项目的详情视图。

详情视图

详情视图

当用户从浏览列表中选择项目时,将显示“详情”视图。此图片显示了影片的“详情”视图。电视、音乐或其他内容的详情可能有所不同。“详情”视图显示与内容或其他项目相关的信息和操作。

描述下的操作提供了针对此项目的可能操作。可用的操作因用户的订阅状态(例如,他们是否是 Amazon Prime 会员)以及内容可用性而异。

屏幕左侧的发现菜单提供了有关项目的其他相关信息(例如,演员表、花絮或评论)。

主屏幕上的“搜索”菜单项将打开搜索屏幕,用户可以从中访问语音搜索或文本搜索。还可以通过 Alexa 语音遥控器上的“麦克风”按键访问“搜索”,它会显示在当前应用或内容上的叠加层中。

对于文本搜索,用户在字母表中左右移动,对每个字母按“选择”键可键入搜索查询。可能的结果显示在查询下方的列表中。

搜索

全局搜索在系统范围内提供,不能针对单个应用进行自定义。开发者可以实现自己的应用内搜索,但它不包含在全局搜索功能中。

其他资源

有关设计 10 英尺体验时用户体验最佳实践的更多信息,请参阅 Android TV