智能电视导航设计

随着国际市场上Google TV的发布和国内电视厂商纷纷推出定制Android TV的脚步，一时间智能电视平台成为了众多高科技企业争相抢占的新市场。较早的智能电视平台探索者有Google TV、Apple TV和Samsung Smart TV，还有传说中将要上市的iTV。

AD： 2013云计算架构师峰会精彩课程曝光

导航设计——遥控器和导航结构

说到TV的UI设计，就不得不从导航开始。如上文所述，TV用户较为被动，所以需要清晰高效的导航系统来帮助用户快速定位到想要看的内容。

导航方式与输入设备息息相关，智能电视最主要的输入设备还是遥控器，有时还辅以鼠标和键盘。下面的图例是Google TV和Apple TV的输入设备。

Google TV和apple TV的输入设备(图4)

从图中我们可以看出新的智能电视输入设备以十字方向键和OK键为核心，所以TV app的导航要基于上述方向键和OK键进行设计。

Xbox和PS3的导航界面(图5)

由于智能电视平台app较新，这里我们参考较为成熟的电视平台游戏系统来进行讨论，上图分别是XBOX和PS3的操作界面，这两款产品能被借鉴因为它们的操作方式和使用环境和智能电视系统较为一致。它们都用了十字导航的结构。这种结构的优点在于主导航和二级导航同时展开，并且与十字方向键完美契合，可以通过方向键在主导航和二级导航间快速切换。使用这种结构时，二级导航中的item只能进行单一操作，因为方向键受到了主导航占用。如果对二级导航中item进行多维操作，则需要确认展开下一级列表：

Google TV的导航界面(图6)

上图为Google TV的操作界面，它采用了左右分栏的模式，左边是导航，右边是一个二级内容的容器。这种结构的逻辑其实和前面所述的十字导航区别并不是很大，不同的是容器里面的信息更加扁平、直观和可视化，容器里面item操作的方向不会受到限制。但相应地，如果想把焦点从容器中移回到左侧导航需要更高的操作成本。

Samnsung SmartTV的导航界面(图7)

上图为最近发布的Samsung Smart TV，它采用了区块式的导航结构。这种结构中每个区块独立操作，信息组织更加扁平化，有的模块和widget概念比较相似，既是信息的呈现也可以作为操作的入口。不足之处是，各个模块中item的方向操作会有一定限制，不然会导致各个模块切换的操作成本增加。

Cover flow和list信息组织方式(图8)

另外还想介绍的两种信息展示方式，就是图8中的coverflow和list列表，这两种方式都采用了单方向导航。Cover Flow这种方式视觉冲击力较强，单屏信息承载有限，焦点的移动两种方式将在后文陈述; 右边这种列表方式视觉冲击力较弱，单屏信息量较大，但在TV平台处理List时候和PC上有所区别：TV app不需要滚动条，而且要控制List的长度，因为尽管遥控器方向键可以启用长按加速，不过始终无法达到像PC端鼠标拖拽滚动滑块控制浏览速度和定位的表现。

导航项的三种状态(图9)

在基于十字方向键上设计导航时，导航项一般存在三种状态，即“selected”，“focused”和“selected and focused“。导航上如果有类别项(category)和动作项(action)那么导航获得焦点时，焦点移动不会切换右边容器中内容。当导航上全部为类别项时，焦点可以和选中态一起移动，右边容器随焦点移动切换内容。

总而言之，导航设计原则如下：

导航设计的目标，是让用户快速定位，并且能够预测出操作结果。

文章转载：http://mobile.51cto.com/app-show-347762_1.htm