TV on Victor42

Android电视应用：Amazon Fire TV版TVPlayer设计

hi@victor42.work (Victor42) — Sun, 25 Sep 2016 00:00:08 +0000

[国外设计第148期]

设计和研发、推广一道，是移动应用的成功要诀之一。定义用户操作应用的方式，与应用的功能和高效的盈利模式同等重要。而且，当涉及到为电视这样的新交互模式设计界面，许多在智能手机和平板上有效的模式，都需要重新思考，如何利用大屏幕和遥控带来的输入模式。

Fire TV上的TVPlayer

这个任务并没有吓到TVPlayer的开发者们，这是全英国在Fire TV和Fire TV Stick上最成功的电视应用之一。

TVPlayer是一款Android原生流媒体应用，可以让你在Amazon和Android设备上免费观看电视直播，它掌握了英国许多收视率最高的频道。TVPlayer在2014年作为Fire TV的一部分同时发布，它的成功一直延续至2015年、2016年。

Simplestream，TVPlayer背后的研发与设计团队，接受了打造电视优先体验的艰巨任务。

我们采访了运营总监Lewis Arthur和Simplestream的Android开发Michael Jordan，请他们分享Fire TV应用设计过程中的真知灼见，下面是他们的分享。

设计过程：从手机到电视

在登陆Fire TV前，TVPlayer已经可以在Fire Tablets和Android设备的Amazon Appstore中下载。移动端版本的设计师，将关注点聚焦于可用性与内容的易达性。他们在欢迎界面采用了大胆醒目的图片布局，主标签内有可滚动的直播电视频道列表。设计师决定坚持“浅色”主题，为了使内容突出，也保持各平台的主题一致。

当进行平板端的支持时，设计师需要重新思考，更好地利用大屏幕。主体布局有所改动，在主界面上直接为用户呈现更多内容。这是个很好的策略，既能吸引用户注意，并且为多种相关内容提供快捷入口。

至于第一版Fire TV应用，主界面需要呈现新的面貌。电视的设计，与手机平板的界面和用户体验设计有两大不同，这都来源于TV自身的天性：它有巨大的显示器，也不提供触摸式界面，因为所有的操作都发生在遥控器上。

Simplestream在第一版Fire TV应用的主界面上，尽数使用了大胆醒目的图片。“主页”、“正在直播”和“频道”标签都移到左边，字号成倍放大，使得从远处看也清晰可辨。

第一版Fire TV应用主界面，感觉像平板端那样清爽，栅格布局中承载各类主要频道。

为Fire TV开发简单而迅速：4周就从移动端迁移到电视

当我们询问Simplestream团队，从移动版到第一版Fire TV应用花了多长时间，他们告诉我们大约4周。由于Fire TV是一款完全成熟的Android设备，搭载了基于Android Lollipop的Fire OS 5，改版迅速而流畅：移动端和电视版的核心组件相同，保持界面与应用底层结构分离，能让开发者拥有足够的灵活性快速迭代，在几周内成就完整的电视应用。

Fire TV的界面革新

这款Fire TV应用发布一年多以后，从应用数据中收集了足够的用户操作反馈，TVPlayer开发者与设计师们决定，是时候为Fire TV应用创造一套新界面了。目的在于使应用更加高效，为电视用户提供最佳的内容呈现形式，同时在应用中加入新功能。

新的一版加入了按月订阅的应用内购——包含免费与付费内容，使应用更多样化。Simplestream的设计师进行了深入的竞品分析，理解流媒体应用设计当前的趋势，掌握了如何设计统一一致的界面，甚至是跨越多平台与设备。

选用合适的配色方案，确保应用对眼睛友好

首先，设计师决定探索Fire TV的深色配色方案。在设计上一版Fire TV应用时就做出了个决策，不过在这版界面更新中更进一步，把多数UI组件都加深了。深色主题主要是为了防止浏览内容时眼睛疲劳，因此能创造更轻松的用户体验。这对于应用的启动界面尤其重要，把它改成黑色，避免“亮瞎眼”。

让用户的眼睛免于疲劳。

设计电视应用时，浅色与亮色的主题需要慎重考虑，因为多数可能的使用场景都发生在夜晚，没有自然光，因此明亮的界面会损害用户体验，久而久之导致应用被抛弃。通过色彩来展现品牌也非常重要。对于TVPlayer，蓝色作为高亮色彩，相比前一版，更有助于保持多平台的品牌一致性。蓝色表示免费内容，而粉色表示付费内容。

通过ViewPager进行内容翻页

TVPlayer的开发者们想要一套极具表现力的界面，但也希望保持品牌辨识度，并提供独一无二的用户体验。因此他们决定不遵循标准的Android Leanback界面，他们建立了自己的布局与导航系统。

TVPlayer的主体布局对ViewPager组件进行了自定义。ViewPager是一种布局管理组件，可以在多页内容中轻松左右翻页。在TVPlayer中，通过ViewPager的自定义运用，实现了水平滚动翻页切换节目与频道，每一页都包含一系列自定义视图。

内容的快速入口增强粘性

上一版中创建的网格视图得到了改进，每项有更大的间距，并且用水平滚动替代了垂直滚动。同时也引入了快速内容导航：用户可以选中翻页导航指示器，在页面间快速滚动。翻页导航指示器与ViewPager相关联，决定了当前展现什么页面，下一页是什么。快速滚动意味着用户能更快触达更多内容，因此有助于增强用户粘性、加强记忆。

马赛克式界面：内容的快速入口，更加商业化

最终的结果是马赛克式界面，能快速到达各个频道。自定义Android视图和Adapter的使用，让开发者能在一个界面中完全掌控和融合免费与付费内容，改善了通向应用内购的高级内容入口，因此也创造了更多收入。TVPlayer从第一版完全免费的形式，变为包含付费内容的新版本。保持了干净的用户界面，将界面背后的逻辑与核心应用组件分离开，使得这次改版轻松而迅速，也保证了快速迭代来创造优秀的用户体验和加强商业化。

马上开始创造Amazon Fire TV应用吧！

Amazon Fire TV和Fire TV Stick给你提供了绝佳的机会，让你的Android或HTML5应用能触达更多用户。只要遵循Amazon Appstore的开发者文档，把Android移动应用迁移到Fire TV上非常简单！这些链接会非常有用：

Amazon Fire TV：把应用和游戏带到客厅，触达更多用户

Amazon Fire TV应用与游戏开发入门

为Amazon Fire TV开发应用与游戏

原文链接：https://medium.com/amazon-appstore/designing-native-android-apps-for-tv-how-tvplayer-designed-for-amazon-fire-tv-79c3801b60e7#.sinhtvmbx

作者信息：Mario Viviani Technology Evangelist, Amazon Appstore

为电视而设计

hi@victor42.work (Victor42) — Sun, 11 Sep 2016 15:45:52 +0000

[国外设计第147期]

一篇关于电视UI基本组成部分的介绍。

欢迎来到电视机的新黄金时代。不仅仅因为出现了更多比从前更棒的产品，我们在自己观看和喜爱的节目上也有了更多选择。虽然我们可以随时随地通过电脑、手机和平板观看，但电视在多数人家中仍然占据着一个特殊角色。

但我们对电视的控制，不再只局限于遥控和分线盒；我们开始使用智能电视，或者观看机顶盒的节目，例如Roku和Apple TV，或者使用电视游戏设备，例如Xbox和Playstation。这每一种设备的用户界面，都比老式的屏幕引导要强大百倍。

与电脑、甚至手机相比，为电视设计界面仍然是相对新的领域。它也是一个完全不同的平台。为TV设计需要完全不同的思考，包括屏幕尺寸和距离、技术局限、还有使用场景。

这是本系列的上篇，专注于开始思考电视的界面。我们也会特别关注游戏手柄，把它视作一种输入设备，还有手柄API的基本使用。在下篇中，我们会向你展示，如何构建TV界面原型与控件。

显示器

这就是电视不同于电脑、手机和平板的地方

市场上第一台电视是由阴极射线管制成（CRT），一种在电视上显示不连续画面的粗糙技术。在屏幕边缘处问题尤其明显，为了补偿，CRT电视只好运用过扫描。有了过扫描，图像自身稍微放大了，所以边缘超出屏幕可视区域的外延。

图片来源：Netflix

由于广播电视公司预先裁切掉了部分画面，他们想要避免任何重要信息过于靠近屏幕边缘。历史上，曾经有过标题安全区，文字在此处不会失真，还有画面安全区，图片再此区域内可以安全展示。

出于一些复杂且可笑的原因，过扫描在HDTV上仍然存在。现如今建议保留至少5%的外边距，作为通用的安全区，让所有界面保持在区域内。但是，这个百分比可以调整；Google的安全区更窄，而Apple的安全区则更宽厚。我们发现，建立布局栅格时往往要调节安全区。

以此开头，我们将画布设置为标准的HDTV分辨率：1920 x 1080px，上下60px外边距，左右90px外边距。后面我们会介绍4K。

硬件往往决定了设计模式。在移动端，标签栏作为一种导航的模式，兼顾了又小又高的屏幕尺寸。在电视上，扁宽的屏幕产生了横向排列、最大化展示信息量的布局方式。就像移动端的标签栏，这种模式在多数电视界面上非常普遍。

从左上图开始顺时针依次为：Netflix电视应用、Playstation上的Hulu Plus、Apple TV上的iTunes Store、Apple TV上的AMC

类似地，主流电视界面（除了超级萌、却也令人抓狂的LG Bean Bird），都由D面板控制，D是方向的英文首字母。无论是遥控或是游戏手柄，D面板把导航限制在四个方向上：上下左右。这使得网格成为电视应用最自然的界面结构。

Apple TV（上）用了阴影和z轴位置表现鼠标指针，而HBO GO（下）使用了蓝色的边框

电视界面另一个至关重要的元素是指针。没有触摸和鼠标，用户必须转到他们想要选择的元素上。指针高亮显示了当前选中的元素，随着D面板的输入变化而移动。应用通常使用边框、投影、z轴或几种混合来呈现选中状态。屏幕上的每个元素都可以被指针选中，也要清晰表明指针可以向哪边移动。

在我们的原型中，我们重建了一套典型的电视界面布局，只有一行内容。我们在第一项上增加了指针状态。

输入

除了遥控器之外，人们还会如何控制电视

从左到右：Logitech Harmony、Samsung Smart TV、Apple TV、Roku、Amazon Fire TV

多数电视和流媒体设备都依赖某种形式的遥控器。有些平台在实验语音输入，而其他一些，例如新的Apple TV则在尝试触摸输入。无论如何，随着更多流媒体设备将他们的应用延伸到游戏平台，更多人开始使用游戏手柄操作电视界面。电视游戏设备非常强大，设备多功能，在我们的工作室，我们非常热衷于通过这种硬件来创造最佳的设计与原型。

用游戏手柄操作有许多优势。相对D面板，游戏手柄带有摇杆，提供了标准的四个方向移动，同时也能更加微妙的斜角移动。相比D面板，摇杆更快，更易响应，尤其对于电视游戏玩家。

Xbox One控制器（左）和Playstation 4控制器（右）

有些各个平台通用的惯例，例如选择和返回按钮，在不同控制器里位置相同。每个平台也有自己的惯例。在Xbox中，trigger提供了“上一页”和“下一页”功能，bumper则用来切换不同内容视图。各平台还有许多“高级用户”按钮，经验丰富的玩家都很熟悉。

但是，为客厅设计时，场景很重要。虽然许多玩视频游戏的核心用户非常熟悉这些控制器，但客厅设备终究是分享设备。我们希望其他不太熟悉游戏手柄的用户，也用它们进行娱乐。为了核心功能，最好还是坚持标准的按钮惯例。

在下篇中，我们会通过Gamepad API，深入研究如何将游戏手柄控制器加入到界面中。

文字

从10英尺开外浏览界面

想象你坐在沙发上，看着一场电视节目。很容易看清画面的运动，但是开始播放演员表时会发生什么？或者弹出一个菜单呢？

电视应用通常都被称为10英尺的体验，这个术语表示你与电视间的通常距离。有了这个距离，我们对待界面的方式，要与网页和移动端稍有不同。界面要更加稀疏，设计元素要加大，才能从房间的另一头阅读。

在10英尺的体验中，文字的处理尤其棘手。毫无疑问，要放大。字号与字重都要增加。我们发现18px是可阅读的最小字号，只适合不重要的标签，例如页面顶部标签。在我们的设计中，我们把标题设为92px，而正文设置成24px。

优秀的电视文字设计，关键在于不断检验。纤细的小字体在显示器上看起来似乎干净清晰，但是一旦到了电视上，可能就被淹没或者无法理解。我们在电视屏幕上建立了一套测试模型，在流程早期就定义了字号。

颜色

了解电视屏幕的局限

HDTV的色彩范围比你的电脑显示器更局限。这意味着设计时，你就要使用更广的色彩范围，才能在电视上正常显示。在亮度、显示和其他设置方面，不同制造商和模型的电视千差万别。颜色应该尽早且经常在电视上测试。

开始设计前有些规范可以遵循：避免纯白，明亮的光线对眼睛有害。还要留意渐变和深度模糊，有限的颜色范围会导致色条出现。为了完成原型的设计，我们把背景色设置为#EEE，隐藏了安全区和参考线。

4K的未来

准备进入新时代

不像手机，多数消费者不会定期升级电视。越来越多4K电视正在出现，但我们的设计，仍在为一个基本局限于1080p的市场服务。

最终这些都会改变，就像移动端设计中的不同屏幕尺寸，设计师很快也要把电视设计做成2倍。除了更棒的画质，更高的像素密度意味着文字和界面更加清晰易辨识。

可能4K时代的界面设计，最有前途的会是色彩范围与深度的提升。如今的HDTV使用的是名为Rec. 709的色彩配置，色彩范围相当有限。有一种新的色彩配置，Rec. 2020，就是为4K电视而生，提供了更大的色彩范围。

图片来源

但是，色彩深度比范围更加重要。如今多数HDTV提供8位色彩。这就意味着每个RGB色彩通道只有256种颜色，总共可能的色彩只有1.678千万种。新的4K电视有10位甚至更高的色彩，每个通道能提供至少1024种色彩，总共可以产生10亿种色彩。有更大的色彩深度，渐变和模糊区域的条纹就不见了，设计师们得以有更多机会运用色彩和处理照片素材。

原型

一切设计最重要的部分

现在我们有了基本的设计，准备开始制作原型了。下周，我们会通过Gamepad API和一些基本的HTML/CSS/JS操纵手柄控制器，演示基本的导航原型。关注我们，一定要看看下篇。

同时，这里有些资源，帮你开始设计自己的界面：

下载案例(PSD)

tvOS人机界面指南

为Android TV而设计

Amazon Fire TV设计与用户体验指南

【译者注：本文的下篇核心内容为实际制作，介绍了电视手柄控制的具体开发过程与代码细节，关于用户体验的内容不多。所以有兴趣的朋友可以自己尝试，https://medium.com/this-also/designing-for-television-part-2-f31793e7d2e9?swoff=true#.k5m0pm2i1，下一期我们将关注其他题材。】

原文链接：https://medium.com/this-also/designing-for-television-part-1-54508432830f#.6vj0fdnsf

作者信息：Molly Lafferty Design Director @ThisAlso