浅谈：智能电视app和UI界面设计

为了共同推进智能电视行业的发展，我们愿意把智能电视app设计开发中、实践中所形成的一些经验和教训分享给大家。

作为对行业的回报，以及与同行的交流，我们会陆续就快投电视app的各方面内容，进行总结梳理，希望对后来者设计开发智能电视app时，提供参考。更初，快投的“优酷排行榜”，是通过web2tv的方式，将优酷播放排行榜，直接以文字形式展示在电视上。优点是直接明了，缺点则是画面感不够、缺少影片的详细信息。更近，我们以  操作依旧高效，界面更加美观 为标准，重新设计了这一模块。

为什么要做排行榜

智能电视通过遥控器完成操控，这使得在电视机上输入内容成为非常糟糕的体验。输入内容的不便导致在PC/移动端常用的搜索和长列表太繁琐而不适合在电视上使用，所以需要有一种不那么繁琐方式提供用户需要内容，也就是内容推荐。

更好的情况是应用通过对我们喜好、习惯、环境、状态等信息的感知，个性化推荐我们这时更想要的内容。但现在的技术不能达到这样的高度，个性化推荐比较鸡肋。非个性化推荐通过覆盖广泛的需求来使大多数人可以从中获取想要的内容，当个性化推荐不能很好地作用时不失为值得使用的方式。

排行榜是一种很常见的非个性化内容推荐，通过对排名的比较，用户能明确的得知排行榜的分类下，哪个更好、哪个更热。并且排行本身就是由用户的行为产生的，天生就是覆盖了大多数人群喜好的内容推荐方式。

视频排行榜的5项元素

基于我们的实践和研究，智能电视app上的排行榜，应该包括如下5项元素：

1. 分类：选择分类。

2. 排序方式：更多播放、更多评论、更受欢迎等，满足不同维度的需求。

3. 排名信息：提供排名，排名提供了对内容好坏的一种参考。

4. 排行榜项：排行榜的内容。

5. 详细信息：播放数、评分、简介等。在排名之外提供另一种参考。

每项元素的具体规范

考虑到遥控器操作不便，我们需要对这些元素的详略，做进一步的具体规范。

首先排行榜分类不应过多，因为滚动长列表在遥控器上意味着连续按N次方向键，显然是不好的体验。根据艾瑞咨询的数据，电视剧、电影、综艺是覆盖人数更多的三种内容，另外第四名动漫与前三差距不大。考虑到收看动漫内容的人群较少收看其他类型内容，为了更好地覆盖这些群体，将动漫也加入排行榜分类。于是更终我们得到了四项排行榜分类：电视剧、电影、综艺、动漫。

电视剧、电影和综艺覆盖了绝大多数人群

在同一分类下的内容具有很大的差异，用户往往只对其中一部分内容感兴趣。这要求我们对分类下的内容再进行一次细分。细分的标准主要有按地区和按类型两种。由于按类型进行细分的标准比较模糊，并且地区本身就包含一些类型上的暗示，我们采用按地区进行细分。对于可能存在的跨地区浏览需求，这种细分后的内容应该可以连续浏览。

排行榜项，同样基于遥控器操作的特点，不应太多。采用10项能提供较多的内容同时避免让用户丧失注意力，也比较符合用户的预期。

排序方式，排序方式给产品带来了不必要的复杂性。很少有用户在排行榜中有切换排序方式的需求。选用一种更常用的排序方式进行排序，不再提供其他排序方式的选择。观察数据发现按热度进行排名是更常用的方式。

视频信息，不应该在以一种方式排序的排行榜中引入其他含有排序意味的视频信息（如评分），这样会使用户困惑。典型的例子便是一些热播电视剧的低评分。可以提供描述性的信息来辅助用户判断。可以通过一段简介文字来提供描述性的信息，这种方式合并了在排行榜找视频-到影评网站判断是否观看视频两个步骤，减少了跳转和操作。

更后我们选用的元素为：
电视剧、电影、综艺、动漫四个一级分类
按地区的二级分类
十项排行榜项
视频对应的简介

交互设计

一个取悦视觉的界面是美的界面，一个无需学习就能自然操作的界面是实用的界面。我们的目标就是兼顾美和实用，做出一个优秀的界面。

Google的一篇文章指出，用户在0.05秒内就对一个页面的美观度形成一个第一印象。这个第一印象主要由复杂程度和标准程度两个因素来获得，复杂程度越低，标准程度越高，用户就认为这个页面越美。之前对元素的选择，我们控制了页面的复杂程度，接下来我们会通过对页面元素的排布来优化页面的标准程度。

复杂程度越低，标准程度越高，用户就认为这个页面越美

随着越来越多的网络使用，用户对元素的位置已经有了一定的心理预期。导航应该在页面上部或者左侧，主要内容位于中间靠下的区域，使用说明在页面的下部等心理预期已经建立，不应为了标新立异或者视觉效果而打破这些心理预期，尤其是这种行为还会破坏给用户的第一印象。

例如企鹅云视听选择将导航置于下侧，便违反了导航应该在上部的用户心理预期，导致了较低的标准程度；另外简介在内容上部也可能造成迷惑；还有，如之前所说，在排名中添加评分也可能产生迷惑。

排行榜的主要形式有入口式、页面式和展板式，但是考虑到入口式排行榜操作步骤较多、页面式排行榜过于复杂，更终使用展板式的排行榜并遵循下面规律：

● 在页面上部或左侧放置导航
● 主要内容放置在页面中部
● 对内容的说明放置在内容下侧

入口式

页面式

展板式

当然还有其他更多的形式，在这里不再赘述，但我想展示一个例子：

蜜蜂视频的排行榜，焦点移到内容时左侧导航隐藏

初看不错，页面感觉很舒服，使用了比较流畅的动效交代了导航与内容的关系，但是忽略了智能电视的一个特点：使用遥控器操作。

试想一下，如果你在电影分类下浏览到了第10项，然后想看电视剧分类下的内容，你需要怎样操作？不是在移动端上，屏幕左侧优雅地右划来调出导航，而是按10次左方向键。如果这个列表再长一点，20项、甚至50项，这样的操作你能接受吗？

在这个问题解决之前，更好不要在电视上使用这种纵横交错的导航方式，尤其是导航栏在页面一侧时。

现在来看这个问题有两种解决方式，其一是让焦点在内容区域移动便可以切换分类，这种方式需要一定的引导让用户去学习。我想这个解决方式蜜蜂视频考虑过，但是蜜蜂视频的内容区域有一个『播放』的元素，按方向键上下，焦点会移动到播放上，如果再按方向键上下切换分类，这种同一种操作的不同响应会让用户非常迷惑。另一种方式来自于PSP，固定焦点，让导航和内容移动到焦点上。

PSP的界面

PSP的设计更加适合用于一级和二级列表的选择，没有太多内容展示的区域。排行榜注重内容，不适合采用这种解决方式。
在对PSP的解决方式进行改进后，我决定在展板式排行榜的基础上，同一层级的内容用左右键切换，不同层级的内容用上下键切换。这对层级的清晰提出了比较高的要求，而我们选用的排行榜元素确实具有很清晰的层级。

● 一级：节目分类：电视剧、电影、综艺、动漫
● 二级：地区分类：大陆、欧美、港台、日韩
● 三级：排行榜内容以及内容简介

更终，排行榜的设计采用了这种方式

排行榜

● 不需要频繁切换入口，浏览行为在一个页面内完成，不产生页面跳转
● 用方向键上下来使焦点在层级间切换，左右来使焦点在同一层级内切换
● 焦点移动到分类上保持一段时间后切换分类，切换分类不需按确定键，也可以按确定键来加快这个时间
● 在内容上按确定键可以播放
● 每个一级分类的内容为一个长列表，焦点在二级分类移动时，内容长列表快速滚动到二级分类的第一项
● 当焦点在内容区域移动到电影-大陆的更后一项时，继续移动将会移动到电影-欧美的第一项，这时二级分类的选择项变为欧美，焦点向上移动也移到欧美
● 为保证可见性，在非焦点内容的封面上添加遮罩显示视频名

智能电视视频排行榜：UI设计

智能电视app的设计规范，与手机端app设计理念相同，是为了对界面元素的样式、颜色和字体大小的统一而设定的规范和使用原则。本文所分享的就是在设计规范下，具体到电视上的某一界面（本文以排行榜为例）时，如何结合规范去进行设计的经验。

在设计排行榜UI时，从背景、页面布局、一二级标题切换形式、字体大小、焦点框状态等进行了设计。当然，第一步是产品提供给我们原型图。（PS：以1280*720px为例）

排行榜原型图

一、背景设计

在设计背景时，我们首先要明白电视端与手机端与电脑端是有区别的，电视端屏幕的色彩对比度及饱和度都相对较高，且电视端屏幕尺寸较后两者都更大，所以电视端的背景色调偏暗、饱和度偏低，这样我们可以清晰而且舒适的阅览界面上的内容。

以下是几款智能电视app所用的背景：

纯色渐变背景

天空背景

草原背景

从这三张背景中不难看出，对于背景较亮、饱和度较高的图，在设计时都会加上一层黑色蒙版，从而降低背景的亮度和饱和度。

其次，我们在设计背景时还需要考虑到当前背景是否需要与产品其它页面统一，此次排行榜与我们产品列表页其实属于一个层级的界面，所以直接使用了默认的背景。（当然，产品背景的设计与第一点要求也是相同的。）

排行榜背景

二、页面布局

页面布局图

由于部分电视在适配时会截屏，所以我们在进行页面布局时，主要信息（不可删减的）与四边之间需要留一些安全边距，如页面布局图中红色区域所表示的就是在设计时所留下的安全边距，需留的边距为30px或以上。
绿色区域为排行榜的海报显示区域，尺寸为：1280*342px

focus海报尺寸：224*334px
normal海报尺寸：186*278px
图片之间间距：24px

蓝色区域为标题栏，此次标题栏分为一级标题和二级标题，

一级标题：高：60px，宽：根据分类来定；文字之间间距：70px
二级标题：高：50px，宽：根据分类来定；文字之间间距：65px

黄色区域为文字显示区域，尺寸为：1160*138px

片名与简介之间间距：20px
简介文字之间间距：12px

因为海报为排行榜首要展示的内容，所以居于屏幕的中间，为主要显示区域；而类型作为标题则应放置于海报的上方，符合人从上至下观看东西的自然习惯；片名作为主要信息应该与海报相近，而简介作为次要信息则可稍微弱化。所以，这里各元素的大小、分布都以实际需求而呈现。

三、一二级标题切换形式

在电视端，由于我们是使用遥控器去操作的，与手机端不一样，当一个界面出现两个级别的标题时，一般情况下应该是将标题至于左侧（如下图所示），但是排行榜属于特殊的横版式的页面，所以将一二级标题置于页面上方。

电视直播菜单

由于同时出现两级标题，在视觉上会给用户带来困惑，所以在处理这种情况时，采取了弱化非当前选取的标题栏，如下图所示，当focus框在一级标题时，二级标题的色调会变暗，这样视觉上给人的感觉就比较清晰明了，能将焦点放在一级标题上。

focus框在一级标题时

四、字体大小

我们观看电视一般的距离为3m左右，而如今比较普遍的电视尺寸为50寸左右，以1280*720px为例，经过我们多次实践发现，当电视的字号小于20px时，人们比较难看清楚电视上的文字，而当标题文字大于32px时，文字会过大影响人们的观看。所以，在电视端设计时，更佳文字范围应该为：20px～32px，20px大小的文字可以应用于提示类的文字。

排行榜中的字体大小

五、焦点框状态

对于电视端上可选择的按钮来说，一般有三种状态：focus、normal、blur。通过遥控器去操控界面时，我们需要一个焦点框来表示当前的选择，也就是三种状态中的focus状态，除了按钮本身需要有色值或者大小的改变，我们的焦点框也需要通过变换位置来给用户反馈。

焦点框的设计与产品品牌的色值有关，通常我们会选取与品牌相近或一样的色值作为焦点框的主色值，其次，还得考虑在背景下能够体现得比较亮眼，这里并列同行的两个例子：

vst和泰捷的焦点框

同时，因为海报是无法控制的一个因素，所以我们会在焦点框的内部加1～2px的黑色边框，这样可以很好的应对与焦点框色值相似的海报所带来的影响；而在电视端中，焦点框带有外发光的效果，可以让当前选择呈现一个浮现的状态，让视觉焦点更好的关注于当前的选择上。

此次产品logo和海报焦点框

海报的状态只有normal和focus两种状态，处于normal状态时，海报栏无焦点框。
在排行榜中，标题栏的文字有以上所述的三种状态，如下图：

标题文字状态

文字焦点框的色值与海报焦点框色值相同，文字在focus状态下色值发生变化，与normal状态下有比较大的区别。而在burl状态下，我采取的是用一个三角符号来表示，同时字体色值也与focus状态下相同。

六、标准色值

这是在排行榜中的标准色值规范。

本文到这里就结束啦，作为电视行业年轻的一员，这里分享有限的经验以期抛砖引玉，更期待同行朋友们的切磋交流！