以用户为中心的设计 |
这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。 推荐您进入文章源地址阅读和发布评论:http://cdc.tencent.com/?p=5520 |
||
随着国际市场上Google TV的发布和国内电视厂商纷纷推出定制Android TV的脚步,一时间智能电视平台成为了众多高科技企业争相抢占的新市场。较早的智能电视平台探索者有Google TV、Apple TV和Samsung Smart TV,还有传说中将要上市的iTV。 国外一些知名服务,如Youtube、Twitter、Netflix等,均在这些平台上发布了应用。国内电视厂商多使用Android平台,我们就来谈谈在Android TV上设计app的那些事儿。
智能电视的使用特点——距离远、光线暗、操作心态较被动
TV的使用环境较为特殊。智能电视尺寸大都大于42寸,其使用环境应该在2.7-3.5米之间。所以虽然TV的显示屏面积远大于多数PC,但因其操作距离远,导致单屏展示的信息量比PC要少。
因此在TV的界面设计上最好让用户通过方向键和OK能够进行操作,并提供返回键,避免用户低头看遥控器寻找按键而打断操作的任务流。 【图3】TV平台上的app应用 通常用户对TV发出的声音并不会感到反感或干扰,因为TV上的频道和app多为“消费性”内容,且TV标配音响系统(音量是默认开启的)。所以在app设计中,可以使用声音作为帮助提示和操作反馈提示。
导航设计——遥控器和导航结构 说到TV的UI设计,就不得不从导航开始。如上文所述,TV用户较为被动,所以需要清晰高效的导航系统来帮助用户快速定位到想要看的内容。 导航方式与输入设备息息相关,智能电视最主要的输入设备还是遥控器,有时还辅以鼠标和键盘。下面的图例是Google TV和Apple TV的输入设备。
由于智能电视平台app较新,这里我们参考较为成熟的电视平台游戏系统来进行讨论,上图分别是XBOX和PS3的操作界面,这两款产品能被借鉴因为它们的操作方式和使用环境和智能电视系统较为一致。它们都用了十字导航的结构。这种结构的优点在于主导航和二级导航同时展开,并且与十字方向键完美契合,可以通过方向键在主导航和二级导航间快速切换。使用这种结构时,二级导航中的item只能进行单一操作,因为方向键受到了主导航占用。如果对二级导航中item进行多维操作,则需要确认展开下一级列表.
上图为Google TV的操作界面,它采用了左右分栏的模式,左边是导航,右边是一个二级内容的容器。这种结构的逻辑其实和前面所述的十字导航区别并不是很大,不同的是容器里面的信息更加扁平、直观和可视化,容器里面item操作的方向不会受到限制。但相应地,如果想把焦点从容器中移回到左侧导航需要更高的操作成本。 【图7】Samnsung SmartTV的导航界面
【图9】导航项的三种状态 总而言之,导航设计原则如下:
焦点控制 导航架构完后,就是焦点移动的问题,下面几个图例简单介绍了一下在TV平台上焦点移动的问题。 【图10】导航焦点态响应面积
上图右示例相反,页卡不动,焦点移动选择。在这种方式下,当焦点移动到列表最右端继续滚动时,最好采用翻页效果。这种效果一是解决了上述视线停留边角问题,二是可以和page controller控件结合在一起,让用户知道在列表中所处位置。
1. 纯焦点移动路径最好平直且区域对齐,上图所示,如果从A沿绿线移动到B可以较好的被用户感知和理解;如果沿红线移动则不符合用户预期; 最后,就是焦点和控件的关系。PC和移动设备上很多控件都具有很强的点击感,因此用户可以较清楚的区分控件和非控件元素。在TV平台上因为输入设备是基于遥控器设计,失去了控件常见的点击感觉,用户区分哪些元素是说明性的和哪些是控件会产生困难。 因此在TV平台上控件设计尽量可以达到
颜色和分辨率 【图13】颜色错误使用 1. 纯白(#FFFFFF)在电视会产生图像拖影,如需使用白色,可以用#F1F1F1(hex) 或者240/240/240(RGB)进行代替; 【图14】分辨率和色彩模式 1. 高分辨率设计,可以使用android 9-patch切图进行低分辨率适配,在测试的时候选择用低分辨率测试可以更好的发现问题;
新的交互方式 【图15】TV平台新颖的交互方式 另一个新颖的交互点则是Samsung Smart TV的密码输入模块。众所周知,文本输入一直是遥控器的一个梦靥。在PC和移动设备上所有的输入都是一步,及所选即所得。在TV上的输入总是“选择—确认”,打断了用户连续输入的“任务流“。而上图电视上的软键盘则建立了和遥控器九宫数字键的映射,按遥控器上的数字键就会把电视上的软件盘的字母输入到输入框中,这种做法在“独占性”的任务流中可以增加文本输入效率。 文章部分图文参考了Google TV 和Samsung Smart TV的设计指引,感兴趣的话可以点击以下链接进行扩展阅读。 Samsung Smart TV User Experience Guidelines (本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5520) |