电视交互设计的一些事 | 设计基础15

两年前,我总结过《Apple Watch交互的一些事》,简单的分享了下手表小屏幕的交互设计。而在过去一年多的时间里,我有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。✨硬件+远距离操控——基本交互基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一、 遥控...

电视交互设计的一些事 | 设计基础15

两年前,我总结过《Apple Watch交互的一些事》,简单的分享了下手表小屏幕的交互设计。而在过去一年多的时间里,我有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。



硬件+远距离操控——基本交互


基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。


一、 遥控器输入


当我们用手指快速便捷地在手机屏幕上点击或滑动时,主流电视大屏及应用的操作还是:使用遥控器进行操作。而市面上不同电视生产商生产的遥控器也有着不同的造型和按键数量,如图1,分别展示了:苹果、谷歌、小米、乐视和中兴机顶盒的遥控器。


电视交互设计的一些事 | 设计基础15
图1 不同厂商的遥控器

 

尽管有着千奇百怪的造型和按键数量,但几乎全部的遥控器都有几个相同的按键:上、下、左、右、返回键和OK键,如图2。它们也够成了遥控器输入的基本交互方式:通过“上下左右键”移动焦点位置,选中界面元素,按“OK键”进行相关操作,按“返回键”返回。


电视交互设计的一些事 | 设计基础15
图2 遥控器的基本按键


而上图中还有一些按键,如数字键、菜单键,有些遥控器是没有它们的。这里强调下“菜单键”,比如之前的一个设计,将不常用的操作隐藏到菜单键中,当用户按菜单键时再唤出操作(如安卓端的“长按”,iOS端的“左滑”等)。后来,才发现并不是所有遥控器都有该按键,只能在后续版本中迭代优化。因此,在设计之前,不妨研究一下你的输入硬件设备,避免因“刻板印象”造成不必要的坑。


遥控器输入的特性决定了用户在输入时的效率和便捷程度都大打折扣,因此,在这样的局限下,设计师只能通过各种不同的方式来尽量减弱这种不便捷:


1. 减少用户输入:能不让用户输入就不输入,尽量只让用户去做“选择型”输入,避免大量“文字型”输入,比如电视上的搜索功能中,及时联想、热搜词就变得极为重要,如图3右图所示。


电视交互设计的一些事 | 设计基础15

图3 键盘输入的优化


2. 优化输入模式:结合项目情况,去尝试优化输入模式,比如充分利用遥控器数字键输入、重新设计键盘以减少用户操作,如图3所示。


3. 将输入转移:越来越多的产品开始将一些输入转移并引导到手机端进行操作,甚至将手机端直接做为遥控器,比如最常见的扫码登录和TV助手类APP。输入转移能大大提升用户操作效率,但设计时还是要结合具体场景,避免用户过多地在手机和遥控器间切换。


4. 创新的输入方式:随着各种技术的发展,在未来,电视端也会有越来越多的输入方式,而不仅限于遥控器输入,如智能语音输入,而我们也需要了解这些新技术,才能帮助我们不断的创新并给用户带来优秀的体验。


二、导航和菜单


电视端的导航和菜单大多数和手机端、PC端是类似的,但因遥控器输入的特性或多或少的有些差异,主要分为以下几类:


1.十字:十字导航在国内的产品中比较少见,但因它的主导航和二级导航同时展开,能与十字方向键完美契合,用户可通过方向键在主导航和二级导航之间以最高效的方式切换,如图4所示。但它最多展现2级菜单,即纵向菜单和横向菜单,又浪费了大量界面空白,因此针对国内大而全的产品而言,往往不是特别适用。


电视交互设计的一些事 | 设计基础15

图4 十字导航

2.磁贴:磁贴广泛应用于各种电视应用产品,一般包含主导航和二级磁贴,往往二级磁贴的展现能使信息更加扁平、直观及可视化,且相比于十字导航,操作的方向不会受到限制;但往往焦点从磁贴移回到左侧/上侧导航需要更多的操作成本,如图5所示。磁贴的信息展现能够充分利用界面空间,并把信息前置,因此,对很多内容型产品而言,磁贴可以很好的适用内容露出,吸引用户进入。


电视交互设计的一些事 | 设计基础15
图5 磁贴信息展示


3.Tab:广泛应用于手机端和PC端,当然在电视端中也经常使用,往往起到一级导航的作用,在告知用户所处位置的同时,很好的引导用户进行模块间的切换,如图6所示。然而,Tab导航也有一些基本的设计要求,比如尽量不使用多层Tab套用,即使不得已套用也需尽量保证表现形式不同;另外,在“焦点”的章节,也还会提到Tab切换时的加载问题。


电视交互设计的一些事 | 设计基础15
图6 Tab导航


4.列表:列表也是手机端最常用的菜单展现形式,在电视端同样适用,如电视直播类产品,主功能就利用了多层列表套用的展现形式,详见图7所示。而在电视端,列表的样式也是多种多样的:如纯文字列表(可配按钮)、图文列表(可配按钮)、展示型列表(不可操作)、横向列表(选集列表)等。


电视交互设计的一些事 | 设计基础15

图7 图文列表和展示型列表


5.其他:电视产品上最常用的菜单和导航模式一般都可以总结为以上4种,当然还有一些其他的方式。随着用户多设备的使用,越来越多的手机端和PC端的设计模式开始在电视上出现;而更多的产品界面因其复杂的功能无法只使用1种菜单和导航模式,往往是混合型设计,如图8所示。不过,无论使用何种导航和菜单类型,电视大屏幕的菜单和导航的设计目标终归是:用户可以快速定位,并且能够预测出操作结果。因此,灵活使用导航和菜单,使用户不会迷失在功能繁多的界面信息中就尤为重要。


电视交互设计的一些事 | 设计基础15
图8 其他类型的导航和菜单


三、信息展现


在前面的文字中,我在“电视”这个词后面都紧跟了“大屏”这个词,电视的屏幕是比PC还要大的屏幕;而用户也因为如此大的屏幕,往往是坐在两三米之外。因此,电视端的信息设计有着两个显著的特质:为大屏幕而设计和为远距离而设计,有着以下几个注意事项:


1.重视信息的识别性和简洁易懂:文字、图标和按钮,乃至toast提示,在电视端的识别性问题比手机和PC端更为凸显。因为远距离、大屏幕,加上电视本身的休闲属性,使得用户的注意力较为分散,因此,界面中的信息和元素就需要适当放大,至少保证用户能够在两三米之外能清晰看到,如图9所示。


电视交互设计的一些事 | 设计基础15
图9 信息识别案例


2.提前露出信息和多露出点信息:在“遥控器输入”章节中有提到,提前露出信息能够在一定程度上减少用户输入,并在产品层面吸引用户进入。不过,和手机端设计类似,还是需要甄别哪些信息需要提前露出、怎么露出以及露出信息后对产品稳定性和性能的影响;这些都需要基于产品特点,并与产品、视觉和开发共同协商确定。而“多露出点信息”却相对容易理解,主要是告知用户右边/下边“还有一些内容,快去看看”,如图10所示。


电视交互设计的一些事 | 设计基础15
图10 信息露出案例


3.避免过多无模块信息的展示:相比于手机端,因屏幕较大,与PC端类似,往往需将屏幕划分为多个排列整齐的小屏幕来进行设计,即模块化、区域化的设计信息展现。通过这种方式,可以使信息布局更为规整,用户不容易迷失在繁杂的信息中,如图11所示。


电视交互设计的一些事 | 设计基础15
图11 信息模块化案例


四、控件位置


控件的位置问题是初期开始电视产品设计时非常容易犯的错误,如图12所示。左图中的“添加股票”按钮,当已添加的股票过多时,可能会看不到该按钮,或需用户按很多下才能使焦点移动到“添加股票”;右图中的文字浏览,完全不知道如何浏览,也不知道如何将焦点从文字移动到“查看票种”按钮。这两个案例阐述了:按钮的位置导致按钮丢失或操作效率较低;电视端文字阅读也得遵守焦点浏览原则,如每行1个焦点或整篇1个焦点,若是后者,就得保证可见范围内文字已展示全。因此,在电视大屏中放置交互控件,需充分考虑是否符合电视端的使用方式以及用户的操作效率。


电视交互设计的一些事 | 设计基础15
图12 控件位置案例


五、焦点状态


前文提到过很多次的“焦点”,它其实是电视大屏用户体验的第一要素,而在交互说明中最常出现的也是“焦点怎么样了”。无论是交互还是视觉,在初期接触电视产品设计时,可能都会因为“焦点”的设计失误引发用户体验问题,比如:焦点的移动顺序不一致(从哪里来未回到哪里去,焦点在界面中乱跳)使用户认知错乱;焦点的不够醒目或样式不统一使用户无法找到焦点等,如图13所示。


电视交互设计的一些事 | 设计基础15
图13 不统一的焦点样式


电视端焦点也是有着各种不同的状态的,如图14所示,“焦点状态”一般采用“描边、放大、高亮等”方式使其明显,而“按下状态”可能不一定有,或者是和其他几个状态相同。


电视交互设计的一些事 | 设计基础15
图14 焦点状态种类


可能需要简单讲述一下“标记状态”和“半选中状态”:“标记状态”在PC和手机端也非常常见,比如告知用户所在位置在哪里的Tab标记;而“半选中状态”是“焦点状态”的一种情况,即移动到某个焦点后,不进行加载或触发操作,需按“OK键”才触发,如图15所示。这种状态在早期电视盒子性能不足、在Tab切换时经常需要使用,因为如果直接切换焦点时就加载,可能会造成卡顿。


电视交互设计的一些事 | 设计基础15
图15 标记状态和半选中状态案例


六、结语


我总结和归纳的这些基本知识和注意事项,虽然它们能够帮助我们快速了解电视大屏的基本交互知识,避免一些不必要的坑;但还远远不够,更多的是需要在实际参与项目中快速学习、快速应用,因此,之后我将会基于我参与的项目再次进行电视大屏的实战总结,欢迎下次再与大家一同交流和成长。



 撰文 ✎ 张书超

图片 ✎ 来源于网络,再编辑

未 经 允 许 请 勿 转 载 到 其 他 公 众 号

请 给 该 公 众 号 留 言 获 取 内 容 授 权


 ·End·

微交互 ∣细节设计成就卓越产品

电视交互设计的一些事 | 设计基础15

电视交互设计的一些事 | 设计基础15

长按,识别二维码,加关注

分享文章,让更多的人知道微交互


原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/34660/

(0)
交互精选交互精选
上一篇 2018-01-30
下一篇 2018-01-30

相关推荐

  • 交互设计规范

    交互设计规范+iPhone界面尺寸:320*480、640*960、640*1136iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×1080)设计图单位:像素72dpi。在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计,现在iphone6和plus出来后有很多人会使用6的设计效果。如果是我来做的话,我会使用...

    2018-03-21
  • 艾璐斯刘光有:用户体验为先 九字方针瞄准盈利点

    2018年3月2日下午,由慧聪网主办、慧聪汽车用品网承办、广东哈弗石油能源股份有限公司总冠名的哈弗润滑油杯’2017年度汽车用品行业品牌盛会颁奖盛典在北京钓鱼台国宾馆芳华苑隆重举行,来自汽车后市场商(协)会领导、获奖企业代表、渠道商、终端门店精英、主流媒体记者等嘉宾共聚一堂,聚焦汽车用品行业热点话题,全面解读行业最新发展趋势,推动汽车后市场快速有序发展!香港艾璐斯实业有限公司总经理刘光有行业盛典现场嘉宾共聚一堂在本次盛会上,香港艾璐斯实...

    2018-03-06
  • 超出预期的才叫用户体验

    什么是用户体验?我认为,用户体验其实就是一种心理感觉。拿最简单的吃饭这件事来打一个比方。我在饭店,吃饭付账,这个过程叫作体验吗?肯定谈不上。用户体验,肯定是特殊的,肯定是不正常的,肯定是在你的预期之外的。超出预期才形成用户体验如果做跟别人一样的东西,那这些功能并不叫体验。很多人在抄袭别人产品的时候,经常说某某公司做了什么功能,老板说照着做一个,但是你想没想过,如果做得跟别人一样,是没有机会的。当年我们做的是免费杀毒。当时所有其他品牌的杀...

    2018-04-08
  • 美的苏宁智能+计划解读:供给侧改革用户体验升级

    丁道师ID:dingdaoshi123资深互联网观察家,长期致力于中国互联网产业和企业研究。苏宁与美的空调宣布联合共建用户研究实验室,通过云服务、大数据等技术基础,让用户全方位的参与到美的产品研发、交互、营销等环节中来,未来美的、用户、渠道商共同携手,构建一个可循环的新消费升级商业体系。随着一股实力派冷空气登场,2016年的初冬比以往更冷一些。这几日,北方多地现初雪,大风吹、降温猛。伴随着天气的转凉,围绕“智能空调”为核心的“寒冬保卫战...

    2018-03-10
  • 用户体验五要素

    01战略层什么是用户体验:用户在使用产品过程中建立起来的一种纯主观感受。用户体验的重要性:给用户一个积极、高效的体验,他们会持续使用你的产品,产品满足用户某方面的需求并来盈利,帮助人们提高生活质量,提高工作效率,改善人际关系,等等。五要素:战略层、范围层、结构层、框架层、表现层用户体验要素的作用:要素之间相互作用完成任务,创建一个总体的用户体验设计。适用场景:设计:战略层→范围层→结构层→框架层→表现层用户体验:表现层→框架层→结构层→...

    2018-02-06
  • 怎么设计出好的用户体验

    今天跟大家分享的这话题是大家在做产品的过程中可能谈的最多的话题,我一定要有好的产品的体验。首先大家要明白什么叫好的用户的体验,这个一定要有一个定位,所谓的这个用户是真实的使用用户还是你自己。有的时候我们把这个用户简单定义为产品经理或者公司的ceo,或者是公司的负责人。但首先要问一下,你是不是最终的用户,如果只是满足你个人的想法,那这上面会有很多的问题,所以一定要满足真实用户的体验。基于这样的前提下我们再考虑什么叫好的用户体验。我觉得好的...

    2018-02-19
  • Axure基础

    目录(使用微信自带页面搜索功能)第一章 使用元件基础1. 添加元件到画布基础2. 添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5. 设置元件颜色与透明基础6. 设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9. 设置元件文字边距/行距基础10. 设置元件默认隐藏基础11. 设置文本框输入为密码基础12. 设置打开选择文件窗口基础13. 限制文本框输入字符位数基础14. ...

    2018-03-15
  • 【设计】UI设计、UE设计、交互设计分别是什么?

    这些概念在传统行业和传统工业中其实已经发展的很成熟,近几年随着互联网的发展又重新流行起来。UI即User Interface ,字面意思是用户界面,业界一般指的是界面视觉设计UE即User Experience,字面意思是用户体验,这个范围就很广了,不仅仅包含视觉与交互交互设计又称互动设计 ,是人工制品、环境和系统的行为,以及传达这种行为的外形元素的设计与定义。UE范围最大,他研究的对象是用户使用这个产品过程中所有的感受,比如听觉视觉触...

    2018-05-08
  • 用Axure写PRD:虎扑app产品需求文档(附下载链接)

    需求文档是产品经理的基本功,产品小白入门的必经之路,但对于小白来说,没经历过一个完整的项目,自然也没有产品可以写,所以倒推产品是一个练手的好方法。Axure也是产品经理的基本功,画原型图的利器,但axure不止是能画原型,还可以用来写prd,正如臻龙大神说的做这样一个一体化产品需求文档出于的目的就是传统的方式产生的文件过多,过于杂乱,不易整理和回溯。如果把每个版本的内容都整理在一个html中,这样无论是团队协作还是文档回溯都能大大提高效...

    2018-03-15
  • 《用户体验可视化指南》视频讲书(1)

    我们选择了人民邮电出版社2018年出版的《用户体验可视化指南》作为第一本,带着大家啃书。原因是这本书真的非 常 好,好到可以成为用户体验设计和研究领域的大辞典了。作者引经据典,却因为篇幅受限,很多没有详细展开。不知前因后果的读者,因此会错过很多有意思的观点。所以UXREN为你详细拆解《用户体验可视化指南》,每次10-20分钟,3首歌曲的时间,日积月累,透彻理解经典书籍。第1期: 前言《用户体验可视化》前言部分,介绍了为什么会提出共线图(...

    2018-03-27