开发人员控制台

设计和用户体验指南


设计和用户体验指南

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

一般原则

应用的设计,采用以下原则。

10英尺用户界面(UI)

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

对于在台式机、平板电脑或手机上运行的应用或网页,设计有明显区别,因为用户通常从更近的距离看屏幕。

此外,看电视时,人们比使用计算机、平板电脑或手机时更放松,因此电视上的UI无需太高精确度。对于10英尺UI,可能需要重新考虑现有应用的设计、布局和导航。

清晰、简单、直观

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

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

将重要内容放最前面

优先将最重要内容或选项放在屏幕上,方便用户查看、导航。

关注消费体验

对于应用,重点考虑让用户迅速获得内容的方法。电视界面主要供娱乐用。用户在电视机前坐下时,不愿意进行复杂操作(额外操作)。观众需要的电视,应能满足以下目标: “能立即提供可观看、聆听的节目,或娱乐的节目”。

设计指南

在应用中设计单个屏幕和视图时,采用以下指南。

屏幕尺寸和分辨率

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

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

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

当应用运行时,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上导航时,不同UI元素突出显示,以便提示某元素已聚焦。应用应清楚显示,哪个元素获得了聚焦。用户目光从电视屏幕后,再次注视屏幕时,应清楚导航的选项。

聚焦到某UI元素时,按下“选择”按钮(或游戏控制器上的A按钮),则元素立即处于选定状态。

文本输入

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

屏幕、视图和流

本节介绍Amazon Fire TV的用户界面主屏幕和视图,以及控制方式。优化应用设计,将其与系统UI集成时,这些模式可供参考。

屏幕

主屏幕(启动器)

屏幕

主屏幕包括左侧全局导航菜单,以及右侧内容磁贴。

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

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

内容行

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

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

一维列表视图

一维列表

当用户从主视图中选择内容行时,将显示一维列表视图。一维列表包含单行项目。标题栏指示列表的标题(例如,“Most Popular”、“My Movies”、“Recommended for You”),以及两个数字,分别表示列表中项目的数量和焦点项目的位置。

浏览列表中的焦点项目时,列表下方显示项目简介。简单详情可以包括基本项目信息(名称、日期、评级)以及“Add to Watchlist(添加到播放列表)”等选项。

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

  • 通过左右方向按钮在项目之间导航。导航到列表末尾后面时,焦点重新回到第一个项目。
  • 通过“选择”按钮选择一个项目时,将显示项目详图。

详情视图

详情视图

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

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

屏幕左侧的发现菜单里,包含项目其他信息(例如,演员表、花絮或评论)。

通过主屏幕上的“搜索”菜单项,可打开搜索屏幕,用户可访问语音搜索或文本搜索。可通过Alexa Voice Remote上的“麦克风”按钮访问“搜索”,它显示在当前应用或内容上的叠加层中。

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

搜索

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

其他资源

对于10英寸屏幕设计,UX最佳实践的详情,请参阅Android TV