智能电视应用的排行榜设计
一个取悦视觉的界面是美的界面，一个无需学习就能自然操作的界面是实用的界面。这次的目标是兼顾美和实用，为智能电视应用设计一个优秀的排行榜。
为什么要做排行榜
智能电视通过遥控器完成操控，这使得在电视机上输入内容成为非常糟糕的体验。输入内容的不便导致在PC/移动端常用的搜索和长列表太繁琐而不适合在电视上使用，所以需要有一种不那么繁琐方式提供用户需要内容，也就是内容推荐。
最好的情况是应用通过对我们喜好、习惯、环境、状态等信息的感知，个性化推荐我们这时最想要的内容。但现在的技术不能达到这样的高度，个性化推荐比较鸡肋。非个性化推荐通过覆盖广泛的需求来使大多数人可以从中获取想要的内容，当个性化推荐不能很好地作用时不失为值得使用的方式。
排行榜是一种很常见的非个性化内容推荐，通过对排名的比较，用户能明确的得知排行榜的分类下，哪个更好、哪个更热。并且排行本身就是由用户的行为产生的，天生就是覆盖了大多数人群喜好的内容推荐方式。
排行榜的元素
通过对主要视频网站的排行榜进行研究，得出排行榜的元素大致有五个：
- 排行榜分类：选择分类。
- 排序方式：最多播放、最多评论、最受欢迎等，满足不同维度的需求。
- 排名信息：提供排名，排名提供了对内容好坏的一种参考。
- 排行榜项：排行榜的内容。
- 视频信息：播放数、评分、简介等。在排名之外提供另一种参考。
考虑到遥控器操作不便，我们需要对这些元素做一些简化。
首先排行榜分类不应过多，因为滚动长列表在遥控器上意味着连续按N次方向键，显然是不好的体验。根据艾瑞咨询的数据，电视剧、电影、综艺是覆盖人数最多的三种内容，另外第四名动漫与前三差距不大。考虑到收看动漫内容的人群较少收看其他类型内容，为了更好地覆盖这些群体，将动漫也加入排行榜分类。于是最终我们得到了四项排行榜分类：电视剧、电影、综艺、动漫。
电视剧、电影和综艺覆盖了绝大多数人群
在同一分类下的内容具有很大的差异，用户往往只对其中一部分内容感兴趣。这要求我们对分类下的内容再进行一次细分。细分的标准主要有按地区和按类型两种。由于按类型进行细分的标准比较模糊，并且地区本身就包含一些类型上的暗示，我们采用按地区进行细分。对于可能存在的跨地区浏览需求，这种细分后的内容应该可以连续浏览。
排行榜项，同样基于遥控器操作的特点，不应太多。采用10项能提供较多的内容同时避免让用户丧失注意力，也比较符合用户的预期。
排序方式，排序方式给产品带来了不必要的复杂性。很少有用户在排行榜中有切换排序方式的需求。选用一种最常用的排序方式进行排序，不再提供其他排序方式的选择。观察数据发现按热度进行排名是最常用的方式。
视频信息，不应该在以一种方式排序的排行榜中引入其他含有排序意味的视频信息（如评分），这样会使用户困惑。典型的例子便是一些热播电视剧的低评分。可以提供描述性的信息来辅助用户判断。可以通过一段简介文字来提供描述性的信息，这种方式合并了在排行榜找视频-到影评网站判断是否观看视频两个步骤，减少了跳转和操作。
最后我们选用的元素为：
电视剧、电影、综艺、动漫四个一级分类
按地区的二级分类
十项排行榜项
视频对应的简介
交互设计
一个取悦视觉的界面是美的界面，一个无需学习就能自然操作的界面是实用的界面。我们的目标就是兼顾美和实用，做出一个优秀的界面。
Google的一篇文章指出，用户在0.05秒内就对一个页面的美观度形成一个第一印象。这个第一印象主要由复杂程度和标准程度两个因素来获得，复杂程度越低，标准程度越高，用户就认为这个页面越美。之前对元素的选择，我们控制了页面的复杂程度，接下来我们会通过对页面元素的排布来优化页面的标准程度。
复杂程度越低，标准程度越高，用户就认为这个页面越美
随着越来越多的网络使用，用户对元素的位置已经有了一定的心理预期。导航应该在页面上部或者左侧，主要内容位于中间靠下的区域，使用说明在页面的下部等心理预期已经建立，不应为了标新立异或者视觉效果而打破这些心理预期，尤其是这种行为还会破坏给用户的第一印象。
例如企鹅云视听选择将导航置于下侧，便违反了导航应该在上部的用户心理预期，导致了较低的标准程度；另外简介在内容上部也可能造成迷惑；还有，如之前所说，在排名中添加评分也可能产生迷惑。
企鹅云视听将导航放在下侧
排行榜的主要形式有入口式、页面式和展板式，但是考虑到入口式排行榜操作步骤较多、页面式排行榜过于复杂，最终使用展板式的排行榜并遵循下面规律：
- 在页面上部或左侧放置导航
- 主要内容放置在页面中部
- 对内容的说明放置在内容下侧
入口式
页面式
展板式
当然还有其他更多的形式，在这里不再赘述，但我想展示一个例子：
蜜蜂视频的排行榜，焦点移到内容时左侧导航隐藏
初看不错，页面感觉很舒服，使用了比较流畅的动效交代了导航与内容的关系，但是忽略了智能电视的一个特点：使用遥控器操作。
试想一下，如果你在电影分类下浏览到了第10项，然后想看电视剧分类下的内容，你需要怎样操作？不是在移动端上，屏幕左侧优雅地右划来调出导航，而是按10次左方向键。如果这个列表再长一点，20项、甚至50项，这样的操作你能接受吗？
在这个问题解决之前，最好不要在电视上使用这种纵横交错的导航方式，尤其是导航栏在页面一侧时。
现在来看这个问题有两种解决方式，其一是让焦点在内容区域移动便可以切换分类，这种方式需要一定的引导让用户去学习。我想这个解决方式蜜蜂视频考虑过，但是蜜蜂视频的内容区域有一个『播放』的元素，按方向键上下，焦点会移动到播放上，如果再按方向键上下切换分类，这种同一种操作的不同响应会让用户非常迷惑。
另一种方式来自于PSP，固定焦点，让导航和内容移动到焦点上。
PSP的界面
PSP的设计更加适合用于一级和二级列表的选择，没有太多内容展示的区域。排行榜注重内容，不适合采用这种解决方式。
在对PSP的解决方式进行改进后，我决定在展板式排行榜的基础上，同一层级的内容用左右键切换，不同层级的内容用上下键切换。这对层级的清晰提出了比较高的要求，而我们选用的排行榜元素确实具有很清晰的层级。
- 一级：节目分类：电视剧、电影、综艺、动漫
- 二级：地区分类：大陆、欧美、港台、日韩
- 三级：排行榜内容以及内容简介
最终，排行榜的设计采用了这种方式
排行榜
- 不需要频繁切换入口，浏览行为在一个页面内完成，不产生页面跳转
- 用方向键上下来使焦点在层级间切换，左右来使焦点在同一层级内切换
- 焦点移动到分类上保持一段时间后切换分类，切换分类不需按确定键，也可以按确定键来加快这个时间
- 在内容上按确定键可以播放
- 每个一级分类的内容为一个长列表，焦点在二级分类移动时，内容长列表快速滚动到二级分类的第一项
- 当焦点在内容区域移动到电影-大陆的最后一项时，继续移动将会移动到电影-欧美的第一项，这时二级分类的选择项变为欧美，焦点向上移动也移到欧美
- 为保证可见性，在非焦点内容的封面上添加遮罩显示视频名
