电视交互设计的一些事 | 设计基础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

相关推荐

  • 关于Axure8.0中继器的使用1

    废话少说,请开始你的表演!!!1.拖入一个中继器,将中继器多余的行删除;2.在中继器中添加三列(可以直接双击编辑),分别命名:name、sex、age;3.双击拖入的中继器会跳转类似动态面板的“(中继器)(page2)”新页面;4.在(中继器)(page2)中再添加两个和已有矩形大小一直的矩形,分别命名:name、sex、age;关于中继器的准备工作完毕,因为中继器需要存放动态数据,所以需要在页面增加动态数据的输入入口。5.回到拖入中继...

    2018-03-10
  • 产品能力(一)——用户体验要素

    上周开始学习梁宁老师的产品思维三十讲,颇有收获。由于内容很多,分几期总结,与大家一同分享。首先说说我选择学习这门课程的理由,产品能力是一个人的底层能力,之所以这么定义,是因为它具有判断信息,抓住要点,整合有限的资源,把自己的价值打包成一个产品向世界交付,并且获得回报的闭环能力圈。下面我正式开篇,结合我自己的工作经验,总结课程中所学到的知识点。一、产品和好的产品人生无处无产品,工作中提交的邮件和报表,生活中给亲人提供的暖心话语和烹饪的佳肴...

    2018-02-12
  • 生鲜电商优化用户体验 “钱景”可观

    追求美食的消费者,味蕾已探寻至万里之外。智利进口车厘子、厄瓜多尔白虾、波士顿大龙虾……指尖轻轻一点,尽享全球美味。伴随着餐桌上的消费升级,人们愈加关注品质和健康。生鲜消费进入品质时代,快速发展的生鲜电商,正好满足了人们的需求。艾瑞咨询数据显示,我国生鲜电商市场平均每年保持50%以上的增长率。面对广阔的市场需求,我省近年来涌现出景徽菜篮子、菜递、购食汇、满篮鲜等众多各具特色的生鲜电商。在线上线下零售融合的趋势下,生鲜电商现状如何?未来如何...

    2018-03-16
  • 有用户体验落地方法,才能让销售额增长

    图片设计 | 宗宗;编辑 | 海悦如果你觉得本期学霸有链接价值,请在【学霸十三妹】微信公众号后台回复"黄胜山"即可获取学霸联系方式。在物品富足时代,如何吸引用户的青睐,抓住用户的眼球,是很多商家不得不探索的课题。今天,在上海洽客in,学霸十三妹请来了学霸黄胜山,专注研究用户体验十年的老司机,带你揭秘用户体验那点事!黄胜山:唐硕体验创新咨询 管理合伙人,浙江大学心理学硕士,上海交大MBA和混沌商学院,14年用户体验咨询和设计经验,服务客户...

    2018-03-21
  • 金蝶首席用户体验官对“用户体验”的思考

    “也曾经有人要我用一句话来描述清楚什么是用户体验,我说,不好意思,我一句话描述不出来,你给我半个小时。”金蝶公司首席用户体验官钟承东这样回答。产品人,你是否也曾这样认真地思考过:用户体验究竟是什么?你又需要要花掉多少时间多少语言,来组织出一个满意明确的答案?我们渴望的用户体验是什么样子?相信每个人都憧憬这样的用户体验,使用精心设计的产品,有如诗如画的视感,有如沐春风的触感,有余音绕梁的听感,甚至会精细到照顾用户的嗅觉和味觉,接触和使用产...

    2018-04-04
  • UED 招聘,多个职位给你更多选择!

    14载,我们初心不变,依然要做行业最有力的的发声者。从一张纸到一串电波,媒介在变,我们的眼光始终如一大家都在说AI是未来,然而在这里,我们依然需要你无可代替的头脑。WE ARE HIRING这次招聘我们为什么要做这次公开招聘?信息爆炸,百家争鸣,越是瞬息万变,媒体的价值愈发凸显。我们不会随便说满意,而是希望在诸多嘈杂的背景声中,发出属于新时代建筑媒体人独到的观点,让关于建筑的解读,走进公众的视野;我们希望以全新的面貌去呈现UED对于中国...

    2018-03-05
  • 依靠强大品牌影响力,注重“用户体验”,“3000家企业定制酒计划”对白金酒意味着什么?

    在茅台集团白金酒公司的目标规划里,今年要选择1000家企业进行定制酒合作,未来3~5年要与3000家企业合作,打造“企业定制酒”这一细分市场的“当家品牌”。11月5日上午,华拓金服集团、神州长城股份有限公司、 永新华控股集团等数十家家国内知名企业与茅台集团白金酒公司签署战略合作协议,现场签约总额达近亿元,“定制酒计划”再迈出一步。直接面向企业需求这一细分市场,为企业打造专属的定制产品,满足其商务接待、宴请、礼赠等需求,白金酒公司确立了清...

    2018-02-01
  • 2018年的用户体验状况

    这是由一位美国作者站在美国的视角写的文章,即便抛开个人因素不谈,国内外的发展进度并不完全同步。例如情感化反馈这一块也许国内稍稍落后一点、但是移动支付和AR却要快一些,有些方面即便步调差不多,举出的例子却不一样。不过看看别人的总结也挺有意思,至少可以了解一下国际风向。我将在本文概述的,除了2017年里见证到的巨大的变化之外,还有值得关注的趋势,以确保能够赶于潮流。1、更简单的导航方式导航体验是2017年的热点话题之一。为了设计出顺畅的用户...

    2018-03-19
  • 【STARCAST】用Sketch表现不了的"孝敏"清纯日常画报

    ——还没关注?点击上方蓝字——大家好。STARCAST的家族们!!!!!!我们孝敏终于携Sketch回归了,这是她的第4次STARCAST!如果觉得我们孝敏已经展示了她的全部,那你就错了!她还有很多都没有展示给大家哦!今天就为大家送上,脸也没法用Sketch来表现,身材也没法用Sketch来表现的孝敏隐藏的一面,就像日常生活一样的画报,就像画报一样的日常生活照!这个秘密只告诉STARCAST 家族的大家哦,不是秘密>.大家已经开始紧张了...

    2018-03-02
  • 我是如何从测试转到产品的?

    为什么我从测试转产品?无论硬件研发还是软件研发,都需要测试工程师找出软件缺陷、保障产品质量,以降低项目风险,我们可能听到过由于某一个漏洞导致公司损失多少钱的例子。而测试的价值就是尽可能早的——发现这些会给公司造成损失的问题,在项目交付前反馈到开发修复。所以测试岗位对于企业来说也至关重要。在做测试时,我一直期望能发挥自己的最大价值,无论是功能性问题还是用户体验问题,我都会一一跟踪。当兼顾项目进度,有些问题来不及修复时,遗留问题我会...

    2018-04-02