Hipo日志
智能电视UI/交互分析
10/12/2013, 4:51:53 AM
toc
Intro
智能机顶盒现状分析
智能机顶盒的概述
随着智能设备的流行和家庭带宽的提速，智能电视也逐渐流行。智能电视，可以理解为搭载智能操作系统的电视，智能电视的操作系统主要有苹果系统和Android系统，因为apple TV 在国内不可用，以及Android系统本身的开放性，国内的智能电视操纵系统主要以Android为主。而智能电视从硬件上来看，又有一体式的智能电视（例如，apple TV、Google TV、小米电视等），和普通电视+智能机顶盒（譬如，小米盒子、乐视盒子、PPBox等）的组合。
总体来说智能电视无论是那种硬件方式，其硬件配置都较高，智能系统基于Android 4.0并针对电视做了优化，大多都支持在线更新，基础的输入设备为按键类遥控器，下面简单介绍下国内较为流行的几种智能电视。
小米盒子/小米电视
搭载了特别针对电视的MIUI TV操作系统，配合了极简的11键遥控器，并内置小米应用商店，小米游戏商店，可以下载海量应用游戏。
乐视盒子/乐视超级电视
搭载了LetvUI，乐视盒子配备了9键遥控器（乐视超级电视还可以实现语音输入，体感操控），同时内置了LetvStore。
阿里系智能电视
阿里系智能电视，指的是搭载了阿里TV操作系统的智能机顶盒和智能TV，比如，酷开TV和“华数彩虹”互联网电视盒。阿里TV操作系统最大的特点是整合了阿里强大的购物和支付功能，主要的操作设备为遥控器，同样内置应用商店。
其他智能电视机顶盒
较为有名的还有海信智能电视（4K级显示器），PPTV的PPBox盒子，TP-Link的TP-Link mini大眼睛盒子，以及其他众多杂牌智能机顶盒。
智能机顶盒应用的开发者生态
国内智能电视，不同的智能电视操作系统都有各自不同的自带的应用商店，用户可以直接在应用商店下载安装应用，而作为开发者，则需要同时照顾到各类应用商店，下面列举了几个主流的应用商店：
- 小米商店：http://app.xiaomi.com/，开发者：http://developer.xiaomi.com/
- LetvStore：http://www.letvstore.com/，开发者：http://open.letvstore.com/
- 海信应用商店：http://www.hismarttv.com/6/index.jhtml，开发者：http://www.hismarttv.com/developer/index.jhtml
- 阿里云OS商店：http://apps.yunos.com/，开发者：http://appdev.yunos.com/
智能机顶盒的交互特点及限制
智能电视和手机都是智能设备，大部分搭载的都是Android系统，但是两者使用场景，使用方式，都有很大的不同。
智能手机属于移动设备，有短距离、碎片化的特点，而智能电视的则有长距离、光线暗，操作心态较为被动的特点。
智能电视的尺寸，一般大于pc屏幕，用户与智能电视之间的视距较长，一般为2米~4米之间，因此智能电视的单屏信息量会少于pc，智能电视的操作需要简单而快速。而用户在使用电视的同时很可能会同时进行着其他的活动，譬如，同时吃零食、聊天，因此智能电视的多数应用都不会是“沉浸式”的应用。
目前智能电视主要的输入控制设备仍是遥控器，遥控器形式各异，但是都趋于简洁按键数量大大减少，以十字方向和OK键为交互核心，再配合极具Android风格的“home”、“menu”、“back”三个按键。
而Android手机中，用户可以通过触屏、语音、摄像头、陀螺仪等输入，控件容易选中，导航较为高效，交互也更加直接。
相对而言智能电视交互方式仍然较为原始，操作成本较高，不适合导航复杂的应用，文字输入尤为困难。
上图，ps3的导航方式即为经典的十字导航，十字导航是智能电视的基本导航方式，十字导航结构的最大优点是，主导航和次级导航同时展开，在契合了遥控器十字转盘的同时，用户更加易于掌控。
智能电视的用户群体肯能会偏大，部分人群被没有足够的电脑，手机操作经验，因此适当的提醒与帮助十分有必要。
未来的语音控制，体感操控可能会成为主流。
智能电视的UI特点
智能电视尺寸一般较大，使用遥控器控制，与用户有一定距离，因此其UI也有别于手机，平板，电脑。
交互方式决定了UI的布局，智能电视基本的导航方式为十字导航，因此UI的结构逻辑也需要符合这种导航模式。
一个好的TV UI可以由结构化的区块式的布局配合一定的模式。
智能电视垂直方向的空间较为珍贵，其基本的UI布局为从左到右三栏式的布局。
下面是在基本布局基础上的各种模式
书架式（Content Shelf or Cover flow）
网格式（Content Grid）
列表式（Content List]）
级联列表式（Cascading Content List）
扩展式（Extended Details）
次级标签式（Sub-section Tabs]）
UI移植分析
智能电视分辨率的问题
主流的智能电视的长宽比例为16：9，分辨率有三种，
- 高清电视(HD，720p）：1280 x 720 px
- 全高清电视（FHD，1080p）：1920 x 1080 px
- 4k电视：3840 x 2160 px
4k超高清电视尚未大面积普及，目前智能电视UI可以按照1920 x 1080 px的尺寸来设计，推荐使用点九图来适配。
不同电脑与移动终端可选址像素显示，电视采用信号模拟的方式显示图像，电视机（即使是最先进的电视）的显示机制是基于扫描线。由于历史原因，电视制造商们必须在正常屏幕尺寸外预留空白边，它能够被电路寻址，却无法显示电视信号，也就是电视显示屏独有的“过扫描（踩边）”现象，请为你的UI界面提供额外10%空白区，。
应用图标的适配需要根据不同智能电视操作系统来确定，在此需要设计人员查阅各个系统的相关设计文档，下图是小米电视图标的规范。
因为智能电视的视距较大，控件的大小可以适当的放大，控件间的间距留白也建议扩大，避免视觉上的混淆，也留有空间做一些交互上的动画（譬如，选中放大，闪烁的效果）。
智能电视UI布局的方式介绍
国内智能电视搭载的仍然是Android系统，因此具体的XML布局并无差别，但是UI布局却和手机端的布局有很大的区别，切不可生搬硬套。
当然因为电视的不同的显示方式在颜色和字体上还需要特别注意：
颜色
- 谨慎的使用纯白色（#FFFFFF）。纯白色在电视上显示会造成“颤动”或图片重影。将#F1F1F1 (hex) 或 240/240/240 (RGB)；
- 高饱和度颜色会导致显示失真，并且在高饱和度颜色向低饱和度颜色过渡时会产生边缘模糊；
- 大范围渐变会导致带状显示，无法平滑过渡，尽量不要使用大范围的渐变色；
- 电视可能拥有多种显示模式，包括标准、锐利、电影/剧场、游戏等等。请确保在各种模式中都测试你的应用。
- 电视的使用环境一般光线较暗，可以适当增加阅读项和背景颜色间的对比，优先考虑可读性。
文本
- 建议主文本不小22px，次文本不小18px,其他元素高不小34px;
- 避免使用纤细字体或者有过窄、过宽笔划的字体。使用简单的无衬线字体并选用抗锯齿功能来增强易读性；
- 为了增强易读性，可以设置比印刷文本更高的行高。
智能电视比电脑手机等更需要一个稳定快速的应用，智能电视的应用切不可影响到电视的其他功能，尤其是观影的功能。
智能电视用户心态上一般较为被动，在一个相对舒适，灯光昏暗，“后仰”的状态下使用电视，因此非游戏类应用需要尽量的减少与用户的主动交互。
电视用户对电视发出的声音并不会刚到反感或干扰，因此可以使用声音作为帮助提示和操作反馈提示。
智能电视主流的UI布局形式
智能电视在国内尚未得到大面积普及，不同盒子的系统UI相差不大。
上图为阿里TV操作系统截图，可以看出是两栏基本布局，左边是主导航区，内容区域采用网格布局的模式。
上图为小米MIUI TV操作系统的截图，使用标签式的布局作为基本布局，内容区域同样采用网格布局。
上图为乐视智能电视的操作系统UI截图，首页采用上下分栏的布局，上部分为cover flow的布局模式，突出了影视，下部分是导航区域，采用的也是网格布局，
需要注意的是，乐视系统中其他部分也采用了网格的布局，如下图示。
可以看出的网格布局在智能电视中最为流行，其次是cover flow的布局方式。
网格布局操作非常符合十字导航的结构，大块区域内配有分类相关的图文，信息更加扁平化，直观，一目了然，用户更容易选择，在横屏的屏幕上也显得美观大气。
而cover flow的布局传承于苹果iPod，多用于影音类的列表的展现。
智能电视的导航交互方式分析
遥控器是智能电视的主要输入控制设备，应用与遥控器的十字键的配合的好坏直接决定了应用的好用与否，从小处着眼，先用十字导航开始。
智能电视的导航
导航项三种状态
因为智能电视特殊的导航方式，和其特定的应用场景，在交互过程中 导航项的状态非常重要，有三种状态，“selected”，“focused”和“selected and focused“。
- “selected”状态指明了用户所处的页面，特别在多级导航中，selected”状态非常重要；
- “focused”状态指明了十字导航焦点所处的位置，“focused”状态处于随时移动的状态，需要时刻提示用户光标焦点的位置，因此建议在UI提示的同时配合一定的动画（放大，闪烁等）；
- “selected and focused“状态可是焦点移动到已经选中的导航项上时的状态，此时的状态需要和“selected”状态区别开来；
- 一言以蔽之，三种状态需要做到不丢失，易识别，有明显的区别。
导航项对应内容的切换
智能电视无论从交互还是从UI来看，更加倾向于是电脑而不是手机等移动设备，因此智能电视在使用十字导航时候的焦点移动，就类似于电脑中使用tab键控制，其路径的控制则显得尤为重要，当然在此值的提醒的是，避免过度设计，有时候符合用户预期的设计更加易用。
- 在导航较为复杂的场景中，两组（上下，左右）方向键的控制会有所不同，一组方向键用于主导航间的切换，另一组用于次导航间的切换，这样内容容易切换，也方面浏览。
- 当然在导航简单，单页控件较多的场景中，两组方向键也可不必分别对待，这样更加符合用户认知，也减少了用户的学习成本，同时也加快了控件的选择。
上图所示了，同样布局中两种不同的内容切换方式：
- 导航上如果有类别项（category）和动作项（action）那么导航获得焦点时，焦点移动不会切换右边容器中内容，切换内容需按OK键确认；
- 当导航上全部为类别项时，焦点可以和选中态一起移动，右边容器随焦点移动切换内容。
两种方式各有利弊，第一种方式，用户需要多次按键，但是焦点移动不会有页面切换，可以快速选择想要的导航项，而第二种方式，按键成本低，适用于tab类导航间的切换，但是焦点移动就会有页面切换，如果多次切换应用消耗较高。
焦点移动
再到具体的焦点移动，上图中提倡使用图中绿色的路径，避免使用红色的对角线路径：
- 焦点移动路径最好平直且区域对齐，根据十字键的特征绿色的路径符合用户的认知，可以更好的被用户感知和理解。
- 高焦点移动要避免大范围转移，大范围转移的焦点会让用户感到焦点丢失，特别是在页面切换的时候，不能丢失焦点；
针对不同的UI模式，焦点的移动也可能不同：
- 在书架式也就是Cover flow的模式中，需要注意的是，焦点固定在中间放正的页卡上，按左右键页卡移动，这也能也就避免了当列表中项目较多时，导航焦点一直停留在列表底部也就是屏幕边角（用户视线长时间停留边角）而造成的疲劳。
- 而在其他的UI模式中，则是页卡不动，焦点移动，但移动到边缘页面时候再点击按键，页面就会加载更多，这点有点类似手机APP中的上拉刷新。
- 在可能情况下，长按十字键，也可绑定事件，在这种情况下，焦点会快速移动，在控件较多的情况下，这样可以更加快速的定位。
智能电视普通控件，滚动等交互
除去用来导航分类的导航项之外，对于应用中其他“可点击”的元素，其 “hover” 状态也就是焦点移动到上面的状态需要特别对待，特别是对于一些按钮型的控件，其本身的样式较为醒目，即使焦点已经选中，但是“hover”的效果不明显，容易让人困惑，在此的建议是，可以设置更为醒目易识别的“hover”样式，若配合动画效果会更好。
智能电视更多是属于“横屏（landscape）”的状态，因此其滚动的方向建议为从左到右，这样更加符合电视的尺寸比例，也更符合用户的操作预期。
智能电视遥控器中一般还有“home”，“menu”，“back”三个按键。
- “home”键为系统级的按键，用来快速回到首屏。
- “menu”键带有强烈的Android风格，可以用来放置应用中很少用到的功能，不推荐频繁使用。
- “back”键用来返回应用上一层，或者关闭弹窗，取消键盘等，应用不建议过度依赖“back”键，在UI上应该提供明显返回控件。
