陌北默

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

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

看一下爱乐视和暴风TV的最新版??仄鳎?/p>

453201

下面开始说按键:

主页键(home)

就是调出主页Launcher。

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

菜单键(Menu)

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

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

453204453207

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

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

(有点小跑题,继续回到菜单键?。?/p>

453267

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

453289

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

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

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

(注:在手机界,安卓的Menu键已经渐渐消失。因为没有办法告诉用户一款应用是否能够使用Menu键的功能,而且很多厂商的手机上没有Menu物理按键。但在电视和??仄魃暇筒淮嬖谡飧鑫侍?,因为自古以来,??仄魃暇鸵恢庇蠱enu键并且一直没有要被去掉的趋势。)

确定(ok)/返回(back)

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

453332453335

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

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

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

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

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

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

说完Menu键,就只?!干希拢螅摇估?。他们的常规功能就是上下左右移动焦点。非常规功能一个一个的说一下。

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

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

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

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

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

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

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

本篇内容只讲了??仄骰景醇慕换?,至于触摸板滑动条等新操作,每家厂商设备不一样,使用方法和场景也不一样,没办法统一讲解,但都是可以对应到八个基本按钮功能上面的?;褂行枰悸遣挥靡?仄饔檬蟊瓴僮鞯缡拥那榭?,那时候[鼠标左]=[确定键],[鼠标右]=[返回键],Menu键界面上有提示的时候支持点击,没有提示的时候,目前还不知道对应的具体方法,可能是用[鼠标中]来对应,但毕竟用鼠标操作电视的情况很少很奇葩,以后确认了我会更新相关内容。

文章来源:优设

作者:@卜卜胡萝卜1992

转载请注明:学UI网—UI设计师学习教程平台 » 智能电视用户体验设计之??仄髌?/a>

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
解析百度贴吧升级的故事I:用户洞察与交互升级解析百度贴吧升级的故事I:用户洞察与交互升级
「译」苹果官方 iPhone X 人机界面指南「译」苹果官方 iPhone X 人机界面指南
不会C4D与手绘的设计师还有出路吗?不会C4D与手绘的设计师还有出路吗?
从iOS 11看怎样设计APP图标从iOS 11看怎样设计APP图标
5 分钟交互设计指南:对话框5 分钟交互设计指南:对话框
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
移动端的长表单应该如何设计?移动端的长表单应该如何设计?
网易设计师复盘小程序轻设计网易设计师复盘小程序轻设计
移动UI进化中!10种创新的导航菜单实例移动UI进化中!10种创新的导航菜单实例
网易严选APP品牌设计流程详解网易严选APP品牌设计流程详解
?