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

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

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

下面开始说按键:

主页键(home)

就是调出主页Launcher。

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

菜单键(Menu)

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

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

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

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

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

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

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

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

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

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

确定(ok)/返回(back)

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

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

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

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

确定键: 调出下级菜单+执行更改+没有反应

返回键:收起本级菜单

左键:收起本级菜单

右键:展开下级菜单

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

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

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

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

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

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

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

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

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

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

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

文章来源:优设

登录收藏

css 遥控器界面,智能电视用户体验设计之遥控器篇相关推荐

  1. 用户体验设计之路(二):需求到界面的距离

    那么,当我们通过需求分析,获得了"功能"."内容"以及"优先级"之后,我们接下来是否就可以设计原型界面了呢? 答案是"非也&quo ...

  2. Web用户体验设计提升实践

    本文首发于微信公众号"Shopee技术团队". 前言 本文是基于 Shopee 供应链团队内部 WMS(Warehouse Management System,仓库管理系统) 项目 ...

  3. 《众妙之门——用户体验设计的秘密》一2.3 触摸至上的设计

    本节书摘来自异步社区<众妙之门--用户体验设计的秘密>一书中的第2章,第2.3节,作者[德]Smashing Magazine,更多章节内容可以访问云栖社区"异步社区" ...

  4. 产品经理之UED用户体验设计

    14.1用户体验设计UED -UED是针对用户心灵.眼睛耳朵.感触的设计 -用户体验就是用户在使用一款互联网产品的整体感受度 14.2UED的相关概念 -UE:用户体验 -UCD:以用户为中心的设计, ...

  5. 【破茧成蝶-用户体验设计】读书笔记

    第一篇:成为用户体验设计师的信念 01.什么是用户体验设计 以用户为中心的一种设计手段,以用户需求为目标,为提升用户体验而做的设计. 用户体验设计首先是要解决用户的某个实际问题,其次是让问题变得更容易 ...

  6. 2018年用户体验设计的10个趋势

    设计和体验从未像现在这么重要.在过去的10年当中,设计不断适应着用户的新需求,发生了翻天覆地的变化.虽然我们不大可能预测太远的未来,但是我们仍然可以对明年的设计趋势有一个基本的猜测.今天的文章,我们将 ...

  7. 精美网页设计案例_用户体验设计的精美艺术

    精美网页设计案例 There are interactive experiences that simply blow you away. You know it's been a positive ...

  8. 用户体验设计(UED)小知识---产品经理深入浅出课程

    本文主要针对刘文智老师"产品经理深入浅出课程"课时15.16总结,主要介绍用户体验设计(UED)相关知识. 1.UED(User Experience Design)是针对用户心灵 ...

  9. Web 用户体验设计提升指南

    转载自:https://juejin.cn/post/6932647134944886797 前端优秀实践不完全指南 一个 Web 页面,一个 APP,想让别人用的爽,也就是所谓的良好的用户体验,我觉 ...

最新文章

  1. ioc spring 上机案例_IOC(控制反转)—最后的爱,是放手
  2. 【Graph4NLP】阿尔伯塔大学博士毕业论文:基于图结构的自然语言处理
  3. 每一个C#开发者必须知道的13件事情
  4. IOS开发基础知识--碎片13
  5. ASP.NET Core使用Nacos SDK访问阿里云ACM
  6. 【WebRTC---源码篇】(一)全局初始化
  7. Java中文与ASCII码的转换
  8. mAP与IOU的简单介绍
  9. SQL Sever — 导入数据与导出数据到表的方法
  10. Flash 第十一章 引导层和遮罩层动画
  11. 复工复产到欧洲,深兰科技环卫产品亮相国际舞台
  12. phpspreadsheet文件下载
  13. ie11浏览器For win7 x64 官方下载 V9600 官方版
  14. C++ IO的简单用法
  15. 学习Vue3 第二十五章(TSX)
  16. 读卡器插电脑不显示盘符
  17. 深入 WEP和 WPA密码原理 1
  18. “Ballerina”可能成为集成的编程语言
  19. 第一卷清晨的帝国 第一百四十三章 辩难始
  20. 【YBT2023寒假Day3 C】樱桃莓莓(凸包)(线段树)

热门文章

  1. 使用JWT进行用户身份校验(基于token)
  2. 相关距离 matlab,你只有一个ArcGIS和Matlab的距离!
  3. 坚石诚信ETz201应用于ASP.NET项目中
  4. 【Oracle】Oracle简介
  5. 畅捷通T3、T6服务器系统环境重装工作流程
  6. 长生官网被黑:不搞你,对不起祖国的花朵;Chrome OS 初步支持 .deb 安装包文件...
  7. 【星辰傀儡线·命运环·卷一 血鸦】 6 四大长老
  8. C#学习笔记——sin函数
  9. Java多媒体框架JFM中的播放器
  10. UE4开发七:UE4打包