大屏时代,如何做好电视端交互设计?

在过去一年多的时间里,笔者有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。-硬件+远距离操控——基本交互-基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一 、遥控器输入当我们用手指快速便捷地在手机屏幕上点击或滑动时,主流电视大屏及应用的操作还是:使用遥...

在过去一年多的时间里,笔者有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。

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


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


一 、遥控器输入


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


大屏时代,如何做好电视端交互设计?
图1 不同厂商的遥控器

 

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


大屏时代,如何做好电视端交互设计?
图2 遥控器的基本按键


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


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


1. 减少用户输入

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


大屏时代,如何做好电视端交互设计?

图3 键盘输入的优化


2. 优化输入模式

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


3. 将输入转移

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


4. 创新的输入方式

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


二、导航和菜单


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


1. 十字

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


大屏时代,如何做好电视端交互设计?

图4 十字导航


2. 磁贴

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


大屏时代,如何做好电视端交互设计?
图5 磁贴信息展示


3. Tab

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


大屏时代,如何做好电视端交互设计?
图6 Tab导航


4. 列表

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


大屏时代,如何做好电视端交互设计?

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


5. 其他

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


大屏时代,如何做好电视端交互设计?
图8 其他类型的导航和菜单


三、信息展现


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


1. 重视信息的识别性和简洁易懂

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


大屏时代,如何做好电视端交互设计?
图9 信息识别案例


2. 提前露出信息和多露出点信息

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


大屏时代,如何做好电视端交互设计?
图10 信息露出案例


3. 避免过多无模块信息的展示

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


大屏时代,如何做好电视端交互设计?
图11 信息模块化案例


四、控件位置


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


大屏时代,如何做好电视端交互设计?
图12 控件位置案例


五、焦点状态


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


大屏时代,如何做好电视端交互设计?
图13 不统一的焦点样式


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


大屏时代,如何做好电视端交互设计?
图14 焦点状态种类


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


大屏时代,如何做好电视端交互设计?
图15 标记状态和半选中状态案例


六、结语


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

大屏时代,如何做好电视端交互设计?

由前 MIT 媒体实验室副主任、罗德岛设计学院院长前田约翰(John Maeda)主持的年度重磅设计研究报告《2018 科技中的设计(Design in Tech 2018)》英文版日前正式发布。这份来自硅谷的 90 页报告信息巨量,传递出对正在发生的设计变革趋势的深度本质辨析。

4月15日,广州美术学院工业设计学院前院长、国际体验设计协会(IXDC)主任委员童慧明老师将举办一场《2018 科技中的设计》报告深度解读分享会。参与本次活动,请点击“阅读原文”报名。

大屏时代,如何做好电视端交互设计?

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

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

相关推荐

  • 交互设计需要掌握哪些"必备"心理学知识?

    交互设计是以人为中心的设计,设计者要站在用户的角度出发,深入、全面的了解用户的需求才能够设计出具有良好用户体验的产品。而想要在作品集中向考官体现同学们对用户心理需求的把控能力,除了做好用户调研之外,也要掌握一些常用到的心理学知识。交互设计是人与其他一切事物之间的行为设计,而人的行为中包含感知和认知这两种与心理学密切相关的要素,因此,同学们在设计项目时,每一个功能设计、每一个操作流程以及UI的设计都要基于了解用户心理学的基础上开展设计。本...

    2018-04-10
  • 怎么设计出好的用户体验

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

    2018-02-19
  • 【技术篇】AR应用交互设计时需要思考的3个问题

    首先我们要了解,AR增强现实通过实时的在现实环境中渲染虚拟数字信息,通过现实和虚拟的结合来帮助用户完成某项任务和活动。AR中的虚拟数字信息通过与现实环境以及用户的实时互动来向用户传递有价值的信息。相比“传统的”2D层面的交互(手机app,web等),AR可支持的是更加丰富的三维层面的交互方式;并且这种方式不再仅限于主动式的交互(点击,滑动)方式,它还包括用户行为的被动触发。本文将向大家介绍一些典型的AR应用以及它们的交互方式,并且和大家...

    2018-03-29
  • 产品经理需要用心做好的交互体验——权限获取

    满城尽带黄金甲里,有句台词说得好,“朕给你的,才是你的,朕不给你,你不能抢”。用户给APP授权了,APP才能使用,直接索取或者暗度陈仓,效果往往会适得其反。今天就让小Q讲讲她的交互心得吧~很多APP会在初次使用的过程中直接弹框索取权限,这确实是最简单的实现方式,但被拒的可能性也最大。另外一类APP会在询问时通过一些小技巧变着法的诱导用户点击“允许”。实现成本不会比第一种高出很多,但获取授权的几率会增大。还有一种APP,会等用户用到相关功...

    2018-01-30
  • 酱课程丨交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!

    上周,我们发布了交互设计师Eary Alan的第一期课程,最值钱的内容,就是这张指导交互设计师们工作流程的“双钻图”了(横屏观看)。从0开始到完成一个设计项目,都是两次发散(Diverging)和两次汇聚(Converging)的结果。Discover探索与调研属于发散型的思考,探索研究问题的本质1. 质疑 rip the brief对需求质疑,对商业模式质疑,对用户质疑,质疑一切不合理的事情。2. 故事/场景 cluster topi...

    2018-04-07
  • 「交互设计七大定律」在设计中的应用(二)

    今天给大家介绍的是:希克定律(Hick’s Law)。1、希克定律定义希克定律指的是:一个人面临的选择越多,所需要作出决定的时间就越长。用数学公式表达为:RT=a+blog2(n),其中,RT表示反应时间,a表示跟做决定无关的总时间,b表示根据对选项认知的处理时间实证衍生出的常数(这个例子对人来说约是0.155s),n表示同样可能的选项数字。比如,假设需要两秒测知警铃、了解其含义,接着假设按下五个按钮中的一个按钮,可以解决触动警铃的状况...

    2018-02-05
  • 美国交互设计“综合类amp;艺术类”院校申请差异对比?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-05-04
  • KY技术招聘详情 | 心理领域互联网公司KnowYourself

    如果对【KY内容中心】、【研发中心】、【市场品牌商务】、【运营、创意、用研】、【人事】等更多岗位感兴趣,请查看今天的其他几条推送内容。KY技术部,是KY的技术支持部门。我们通过各种技术手段,提升大家使用KY产品的体验,并为各种创意提供实现支持。我们希望能够以各种技术的优化,能让大家更精准的匹配到适合自己的朋友,能够找到合适的咨询师,能够与KY的交互中找到真正的自己,玩得意犹未尽。本次我们招聘需求详情如下:· 测试工程师 ·工作内容:1....

    2018-03-18
  • 交互体验,是最好的科普教育——天宁小学参观丽水市科技馆活动随记

    点击上方“莲都区教育局”可以关注哦充分利用身边的公共科普资源,激发学生的科学探究兴趣,享受交互体验式的科普教育,增强学生的科技创新意识,这是我们安排学生走进科学馆进行参观体验的根本目的。这次天宁小学的孩子们真的是赚到了!面前的这个机器人可不简单,它的中文名叫阿尔法。2016年央视猴年春晚上,540台阿尔法机器人与歌手孙楠共同演绎歌曲《冲向巅峰》,那气场堪比国庆大阅兵。工作人员对阿尔法机器人作简要介绍:阿尔法是一款仿人型智能机器人,可直立...

    2018-01-30
  • 交互系统和设计目标

    交互设计:是针对用户与产品之间的“交互行为”来进行设计。可以理解为对交互系统的设计。系统的概念系统可以类比为自然间的生态系统、人体的生物循环系统、公司也是一个系统。他主要有一下几个基本概念:1、系统是一个有机的整体,各个元素之间不可分割,相互作用构成系统。2、这个系统定具备明确的功能,可以用来完成某项任务或支持某些行为。3、系统的功能是由所有的要素共同支持的。4、系统的功能应是稳定的,在各种使用场景下,都能提供功能。5、系统的功能应具备...

    微信热点 2018-02-11