smart-tv-ux-remote-1

今天有请负责智能电视APP设计一年半的@卜卜胡萝卜1992 给大家分享一些实用的设计经验,科普智能电视用户体验的基础知识。接上一篇《电视用户体验第一元素:焦点》继续探讨问题,本篇关于遥控器。

那种一大条上面都是按钮的遥控器在互联网电视时代已经没有地位,现在不管是哪个品牌的电视,其遥控器上都有必有的8个按键:上/下/左/右/确定/返回/菜单/主页。一般厂商都会有自己单独的快捷键,乐视有Le键,暴风TV有Biu键,康佳有呼Bar键。音量加减键一般的遥控器也会有,频道加减也比较常见。这篇文章主要讲必有8个按钮的常用功能,要设计好用的电视端App,一定要充分利用遥控器按钮,同时,在给按钮设计功能的时候还要考虑到基于安卓系统的操作习惯。因为国内电视OS是安卓一家独大的,而且很多对智能电视没有使用经验的用户,他对电视操作的认知会处于手机与传统电视之间,让这种用户最快上手的方法就是,电视的操作也要满足安卓的习惯也要满足传统电视的习惯。

看一下爱乐视和暴风TV的最新版遥控器:

Image title

下面开始说按键:

主页键(home)

就是调出主页Launcher。

至于这个Launcher是什么样,那就各家各有不同啦,看一下乐视的悬浮式主页,阿里盒子的悬浮式主页,康佳YIUI 5.0的悬浮式主页,这些悬浮式主页本着不遮挡观看内容的设计理念,看似很流行。再看看暴风TV和小米的Launcher,就是安安静静地全屏界面,暴风TV的主界面尤其美美哒,还带动画呢。要是把各家的Launcher都分析一遍,那又是一篇文章啦,以后可以单开专题。至于悬浮式还是全屏式,各有各的喜好吧,试想有谁会在主页浏览内容的时候还看着后面的播放内容呢?一心不可二用啊!不过呼出悬浮式主页让人感觉没有离开界面,有一种稳定感,视觉上也更丰富。

菜单键(Menu)

相当于电脑的鼠标右键,可以塞你想塞的东西在里面,合理的利用菜单键可以让你的应用操作更流畅,但需注意使用场景及调出内容的一致性,不可有逻辑混淆同时还要有明显的视觉提示,引导用户调用Menu键的功能。

下面介绍一些电视OS和电视端主流App对菜单键的应用:

Image title

Image title

在小米电视的主界面按Menu,调出主页编辑模式,可以对主页面的App进行排序。这里我很好奇,既然调出来的菜单里只有一个功能,那为何还要设置一个一级菜单,直接按菜单键调出编辑模式不就行了?现在这样岂不是增加了操作的复杂度?大家可以看到小米的主页面为大家提供了应用编组功能,这在手机上是一个基本功能,但在电视上这个需求大么?因为这是一个涉及到电视输入的操作了,而且要操作很多步实现编组。

有很多类似的,在手机上的操作简单的基本功能移植到电视上却变的复杂无比的,对于这样的功能,在做需求的时候要重点斟酌,我在AppleTV盒子上就没发现什么编组功能,苹果只维持了遥控器能做到的简单的基本操作。那么问题又来了,主页上不提供对App的分组功能,那App太多了找不到怎么办?要如何管理应用和主界面?……接着问题又来了,把App都展示在主界面上这种做法好么?适合电视么?大家有没有发现,应用于移动端触屏操作的安卓系统,应用到电视上的时候,很多基本操作都不再适用了。这真的需要好好考虑,我们的电视到底要创造怎样的体验,在满足大众需求的同时,对专家用户要满足到什么程度,这在整个产品概念诞生的时候就要考虑清楚了,而大部分UX设计师都没有机会去参与产品概念期的决策。始终觉得真正以用户为中心的产品,在产品的各个阶段都必须有一个体验界的大佬来把持,而不是其他的”bOSS“,不然所谓的关怀用户,也只是徒有其表而已。

(有点小跑题,继续回到菜单键!)

Image title

上图是暴风TV的Launcher,按菜单键调出的是更多操作界面入口。因为暴风TV产品概念在诞生的时候,就本着“为观影而生”以观影为主的产品定位,所以整个电视系统的功能和操作都尽量保持简洁。但是如果功能太少操作太简单,又会因为过于傻瓜而流失掉一部分用户,这里我的想法就是:基本功能必须简单呈现,默认设置必须满足大部分用户,而高级功能/复杂操作要隐藏的够深,不会影响“傻瓜式”的操作。

Image title

这是当贝市场的截图,菜单键里隐藏着所有分类,并且有文字提示调出菜单功能。对于菜单键中包含的功能,如果是比较重要的,会影响到用户寻找东西的,建议给出页面文字提示,而类似于小米桌面管理应用这样的功能,不重要又复杂的操作,建议不要给出文字提示,让他藏的深一些,让非专家用户都找不到,是比较好的做法。

视频播放类各大App就不举例说明了,无非是调出一些剧集啊,清晰度啊之类的调节选项。当然还是有些App拒绝用菜单键,比如QQ音乐TV版,也许是本着所有功能都应该被用户看见的理念吧,但是加一个快捷键调出音乐列表也无可厚非啊,省了挪半天焦点到“播放列表”按钮上的功夫啦!这里还要注意,在一个App中尽量保持菜单键功能的一致性,不要在一个版块里是调出播放列表,而在另一个版块里又是调出设置选项,既然追求逻辑完整漂亮,不给用户造成认知混淆,那就做到完美,设计师还是要有点处女座的追求的!

总之对菜单键的使用,已经成为一种趋势,合理的使用菜单键,会让你的App更加灵活好用。

(注:在手机界,安卓的Menu键已经渐渐消失。因为没有办法告诉用户一款应用是否能够使用Menu键的功能,而且很多厂商的手机上没有Menu物理按键。但在电视和遥控器上就不存在这个问题,因为自古以来,遥控器上就一直有Menu键并且一直没有要被去掉的趋势。)

smart-tv-ux-remote-pic1

确定(ok)/返回(back)

关于这两个按键的普通功能就不多说,关于Android系统Back键的传统争议,也不属于这篇文章的范畴,关于电视的确定键和返回键的特殊应用场景,我想通过下面这个案例来表述。

Image title

Image title

我们在电脑上用播放器看视频的时候,鼠标右键可以发现各种调解选项,这些设置也是专业播放设备必须的调解选项。虽然复杂的调解菜单可以有三级四级那么深,操作也不便捷,但是还是必须要有!那么我们就来优化它的操操作体验吧。

上图是小米电视视频播放界面,按菜单键调出一级菜单图1进行设置调节,焦点在“播放设置”按钮上点[确定]或[右]键,调出二级菜单图2,此时按[返回]和[左]键,二级菜单都会收起回到图1,继续按[确定]或[左]键,则调出三级菜单如图3,此时焦点为半选中状态(上一篇文章中有介绍过这种状态)焦点在“运动模式”上按[确定],会执行更改,更改后再次按[确定]没有反应,按[返回]或[左]键,收起三级菜单回到图2, 在图2界面可以继续进入其他三级菜单,或者继续按[返回]或[左]键回到一级菜单。

我们来理顺一下这个过程中各个按键的功能:

  1. 确定键: 调出下级菜单+执行更改+没有反应
  2. 返回键:收起本级菜单
  3. 左键:收起本级菜单
  4. 右键:展开下级菜单

很多人对于确定键“没有反应”这个功能,在第一次接触的时候感到困惑,有些用户的直接反应就是“我调节完了,我按确定,你就把所有菜单给我隐藏啊!还在耽误我看电视要我按那么多次猜消失菜单!”如果我们在设计的时候满足了这部分用户的需求,那么马上就会有另一群用户跳出来说“老子好不容易调出来个菜单,我调节完「图像模式」还要调节「杜比音效」呢,你怎么就把菜单都给我收起来了呢!你这[确定键]又是展开下级菜单,又是收起所有菜单,到底要干嘛?”遇到这种情况的时候,就需要我们回归到调出菜单这个操作的根本目标了。调出菜单的目标是为了调节设置,这时候观影已经成了次要目标,既然调节设置是主要目的,那菜单逐步消失也是极其合理的,而第一个用户的需求就是比较无理取闹的了。做产品的人,对于需求要有足够的敏感度,不能什么样的需求都去满足。

所以我们在给[确定]和[返回]设定具体场景跳转的时候,要仔细考虑,保证操作合理的同时不失流畅性。我之所以把焦点的“焦点(获取焦点即执行)”与“半选中(只获取焦点不展开内容)”和遥控器的“确定”与“返回”抠的这么细,是因为这确实是会影响用户操作的流畅度,也是交互人员与程序开发人员的认知误差区。遥控器上每按下一个按键,都要有相应的程序反馈,而交互设计师在交互稿中,却往往忘记了标注清楚按键应该对应的操作,当产品流到测试环节的时候,如果测试人员的意识与程序员的意识是一致的,那就不会有问题被提出,如果对不上就回提出问题,给到交互确认,这时候就有交互人员的意识,程序人员的意识,测试人员的意识三种没有落实到确切语言上的“意识上的争论”,ohh~my god,你们在说什么能说明白点么?想想这种讨论场景就觉得崩溃……

说完Menu键,就只剩「上/下/左/右」啦。他们的常规功能就是上下左右移动焦点。非常规功能一个一个的说一下。

上:从界面上边调出菜单—对应场景:有些视频播放器的进度条是在屏幕上边的,这时上键可以触发;类似于手机顶部菜单的下拉功能,按上键调出更多设置

展开菜单—————对应场景:当子级菜单从父级菜单的上面展现出来的时候,这种快捷操作使人的手指与眼睛相对应,操作更流畅。

收起菜单—————对应场景:当子级菜单在父级菜单的下面,需要收起的时候。

执行内容更改(“获取焦点即执行”的焦点状态)

下:从界面下边调出菜单—对应场景:有些界面的工具栏是在界面下边调出的,这时下键可以触发;类似于苹果手机底部菜单的上拉功能,按下键调出更多设置

展开菜单,收起菜单,执行更改与[上]键类比呼应。

左/右:功能与上/下键类比呼应。

本篇内容只讲了遥控器基本按键的交互,至于触摸板滑动条等新操作,每家厂商设备不一样,使用方法和场景也不一样,没办法统一讲解,但都是可以对应到八个基本按钮功能上面的。还有需要考虑不用遥控器用鼠标操作电视的情况,那时候[鼠标左]=[确定键],[鼠标右]=[返回键],Menu键界面上有提示的时候支持点击,没有提示的时候,目前还不知道对应的具体方法,可能是用[鼠标中]来对应,但毕竟用鼠标操作电视的情况很少很奇葩,以后确认了我会更新相关内容。

「2016年设计趋势

  1. 色彩篇:《2016流行这2种色彩!附优秀网页设计案例》
  2. 设计篇:《再作印证!2016年网页设计领域11个流行趋势预测》
  3. 电商网站篇:《不学就落伍咯!2016年电商设计的9个热门趋势(附案例)》
  4. 插画设计:《画出个未来!帮你梳理2016年网页插画设计趋势》

作者:@卜卜胡萝卜1992

uisdc-hao

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量104万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

点赞
收藏 1
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏