终于有教程了!智能电视用户体验设计分享之遥控器篇 - 优设网 - UISDC

终于有教程了!智能电视用户体验设计分享之遥控器篇

2016/02/21 32001评论区

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/smart-tv-ux-remote

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 扁平化设计 版式设计 交互设计师 界面设计 排版布局 优设大课堂 职场 优设专访 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里