欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

网易设计师:电视交互设计的基础知识科普

发布时间:2018:01:23 13:08:41 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1407个文字,预计阅读时间4分钟
导语
在过去一年多的时间里,我有幸参与了电视端大屏幕的项目。在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些「电视交互设计的一些事」分享出来,共

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

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

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

  二. 遥控器输入

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

  

网易设计师:电视交互设计的基础知识科普

 

  △ 不同厂商的遥控器

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

  

网易设计师:电视交互设计的基础知识科普

 

  △ 遥控器的基本按键

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

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

  1. 减少用户输入

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

  

网易设计师:电视交互设计的基础知识科普

 

  △ 键盘输入的优化

  2. 优化输入模式

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

  3. 将输入转移

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

  4. 创新的输入方式

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

  三. 导航和菜单

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

  1. 十字

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

  

网易设计师:电视交互设计的基础知识科普

 

  △ 十字导航

  2. 磁贴

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

  

网易设计师:电视交互设计的基础知识科普

 

  △ 磁贴信息展示

  3. Tab

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:交互设计师如何将需求落地?

下一篇:高级设计师:如何用科学的方法做出专业的原型图?

  • 18893 文章总数
  • 2304867访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信