互联网电视

您现在的位置: 首页 > 互联网电视 > 分析/视点

搞定电视UI 这几招够了

作者:陈朋飞    来源:雷鸟风曝   发布时间:2018-05-15 22:03:12

   【流媒体网】摘要:最基础的三个元素:设备、用户和环境。设备即硬件,包括电视机主机和配套的遥控设备及其他配件,用户即家庭单位的所有电视的使用者,环境就是人与电视发生交互的空间,狭义上一般指代客厅和卧房,与其他主流电子设备相比,电视在设备、用户和环境三维度上都具备迥异的特性。


  写在设计前

  我们活在一个由屏幕主宰的世界里,其中最火的,一个是移动端手机屏,另一个是电脑屏,其他电视屏、车载屏规模逐渐形成,但还没彻底火起来。网络上总有那么一帮脑残,一说到电视,就是没人看啦,夕阳产业啦,明天就被淘汰出局的产品啦,完全不了解OTT行业基础数据,家庭大屏有两三亿终端保有量,五六年左右更新周期,用户使用时长长达日均五六个小时,拥有相当可观的活性和流量,和手机、PC端一样,也是值得深入研究和严谨设计的领域。

11.jpg  

 

  设计师总喜欢先从用户画像开始谈设计思路,我也不例外,如果把终端比作一个人,手机就是用户个人专属的20岁小秘书,不仅外形靓丽,而且什么内容都有,什么姿势都会,用户明明知道过渡使用会掏空身体,就是记几控制不住记几,隔不了几分钟就要勾搭一下,夜夜痴缠到天明,电脑就像是一位西装革履的古板投资顾问,面对他的时候你要挺直身板、神经紧绷,全身心投入,认真提出以及回答每一个问题,放松的时候少,专注的时候多,以获得目的明确的信息反馈和回报,而电视呢,更像是隔壁盲人按摩店的大叔,外形不一定那么吸引人,也无法成为你带去参加20年同学聚会的炫耀资本,但经过一天的辛劳,在他面前坐下来,他也能用捏拿锤打各种手法,让你感到无比放松,流着哈喇子安然睡去。

  特意搜了一下,智能电视领域的相关设计文章,竟只有寥寥十余篇,相比PC、移动终端海量设计文章,连个添头也算不上。从这个角度来看,倒是会让我的想法更有参考价值。同时,发现大家偏爱罗列式的写作逻辑,比如:智能电视的七个原则/大屏UI的二三事/智能大屏设计的4个法则,我的感觉,内容写的不差,但因缺乏组织框架,看完后,知识留存率不高,所以,我会从下面三个维度展开,希望,大家看完能多留下一些记忆。  

 

  三杆大枪打天下

  最基础的三个元素:设备、用户和环境。设备即硬件,包括电视机主机和配套的遥控设备及其他配件,用户即家庭单位的所有电视的使用者,环境就是人与电视发生交互的空间,狭义上一般指代客厅和卧房,与其他主流电子设备相比,电视在设备、用户和环境三维度上都具备迥异的特性。

22.jpg  

 

  一、设备

  01

  设备第一怪,屏幕很大,界面“容量”却很小

  电视的屏幕尺寸在消费电子产品中毫无疑问是老大哥,大屏幕为电视带来更震撼逼真的观影体验,国内家庭的主流采购尺寸近几年已经扩大到55寸以上,并且还在不断的攀升中,40寸以下的电视在各大卖场踪迹难寻。有趣的是,电视屏幕辣么大,但是在进行UI设计时,我们让用户单屏只看到少量的内容。如下图,电脑和电视对视频内容的呈现方式对比,PC端界面单屏呈现大量密集内容、菜单,而电视端界面的内容较少,清爽疏松,非常简约。

33.jpg

  

 

  这种差异性来自另一个产品因素:使用距离,。PC屏幕尺寸在10-26寸之间,和用户眼睛距离大概在30厘米-50厘米之间,而电视不一样,用户会根据自己房子客厅的观看距离选择相应的尺寸,一般选择依据如下图。

  

 

  用屏幕尺寸除以观看距离,得到屏距比,这个数字越大,说明界面对内容的容量越大。电脑的屏距比是:25寸/米-65寸/米,电视是:15寸/米-20寸/米,可见,电视是远小于电脑的,再加上电视屏幕一般分辨率较低,内容成像精度也不如其他小屏终端,多种因素共同影响,导致电视屏幕虽大,实际显示内容时反而应该尽量精简、克制,保证图片、文字的可读性,一般来说,交互设计的准则是:横向最多排列6-7个图片,竖向最多排列2-3个图片,文字字号在24-48像素之间,这样,用户才能看的舒服。

  02

  设备第二怪,生命不息,寻找不止的遥控器

  说到遥控器,可能让你咬牙切齿,天天找、月月找、年年找,明明已经这么小心,它还是会时不时的不告而别。

  电视行业已经尝试过无数种可能替代遥控器的方式,时不时会有厂商咆哮着要干掉遥控器,敲黑板,这句话很耳熟有木有,有木有!!然而遥控器依然稳稳占据电视黄金搭档的位置,不曾动摇,而那些看似牛逼的技术都被熬死了:手势识别、TV无线鼠标键盘、触控板、空中鼠标、触控屏电视、脑电波控制、眼动控制等。最近,大热的AI语音技术挟势而来,又一次咆哮着干掉遥控器,我们拭目以待。

  说回来,遥控器的经典之处,在于它为电视的远距离使用创造了一种独特的交互方式,用户通过遥控器控制焦点选中电视界面上的元素来与之发生交互,按上下左右键移动焦点,OK键执行交互动作,返回键和其他功能按键实现界面与界面间的跳转,它既不像手机触屏交互需要手指接触到屏幕,也不像电脑鼠标需要依赖一个稳定平整的桌面进行支撑,即使你像块烂泥一样瘫在沙发里,扣着脚丫子,也能操控自如。

66.jpg  

 

  电视界面UI的设计,与遥控器的特性紧密关联,遥控器的焦点模式类似手机非触控时代的操作方法,界面中始终有元素处于聚焦状态,用方向键移动焦点与更多的内容发生互动。焦点状态要清晰,如下图,常用的视觉设计方式有:放大、发光、加深阴影或者外加鲜艳焦点框,或者对这几种方式的综合运用。

  77.jpg

 

  除了焦点本身的视觉表现,其移动方式也要因地制宜,常用的移动规则有几种,如下图所示,恒定居中的方式起源于苹果的经典cover-flow设计,其优势是有视觉冲击力,凸显当前选中内容,适用于内容较少,强运营的空间,比如应用首页顶部的广告banner区,其缺点是,水平方向无法进入其他交互组件,否者会造成焦点悖论。

 88.jpg 

 

  边缘个移的方式更为常见,如下图,这种移动方式强调了列表内容的连贯性,同时,对内容的表达相对是平等的,适合大量内容的浏览,比如影片列表。

  99.jpg

 

  很明显,整页翻动的方式强调了效率性,如下图,一次按键,刷新6个内容,但,正如各位大师所说,不存在完美的解决方案,它的缺陷在于,影响内容阅读的连贯性,同时焦点从最右跳转到最左,用户可能瞬间丢失焦点。

10.jpg  

 

  其次,遥控器上下左右方向键,决定了电视界面元素的排列需要呈十字形,呈较为严格的水平、垂直对齐关系,由此也催化出智能电视早期的经典设计:索尼大法十字菜单,如下图。

 啊11.jpg 

 

  经过多年的发展,原始的十字菜单开始变的丰富,有层次感,也从朴素的图标变化为多元内容呈现,但水平、垂直对齐关系的本质规律被保留下来,如下图,最新的安卓TV主界面设计,垂直方向上下键切换分类,水平方向左右键切换同一分类中的不同功能选项。

  啊12.jpg

 

  当然,有时候,面对业务目标和运营需求,体验也要稍微让步一点,毕竟,产品的终极目的是创(duo)造(zhuan)价(chao)值(piao),如下图,国内主流电视品牌的主界面一般会采用网格化块状拼接的布局方式,来增加板式的丰富程度,同时后台控制部署海报的大小,方便精细化流量控制和运营。

  啊13.jpg

 

  由此带来的非线性对齐问题,对体验的影响是显而易见的,如下图,从编号1的内容向下移动时,用户无法预知焦点会落在内容2,还是内容3上。为了弥补这种伤害,交互设计师需要增补相应的交互规则:在没有历史操作路径的情况下,如下图中的黄色虚线所示,非线性移动优先选中上面(水平方向)和左边(垂直方向)的元素;在有历史路径的情况下,如下图中的绿色虚线所示,按照历史路径往返,也就是说从哪里来,就回哪里去,以提升操作效率。

啊14.jpg  

 

  对了,上面提到的遥控器找不到的痛点,相关友商们已提供解决方案,按下电视机身上特定按钮,通过蓝牙信号通知你的遥控器疯狂震动并发出biubiu的声音,你就能找到遥控器啦。是的,单身妹子们没听错,遥控器可以震动了,不用客气,我的名字叫雷锋。什么?你连电视也找不到了?好的,再!见!

  03

  设备第三怪,输入非常困难

  上面已经介绍过,电视交互依赖焦点间接控制模式,这一模式的天然缺陷是效率性的损失,如下图,从字母Q移动到P,需要按右键9次,完成一次字母+数字的多位密码输入,我们可能要操作几十次之多,这种体验简直让人抓狂。

啊15.jpg  

 

  在手机和PC端输入都是非常便捷的事情,那么在电视端,我们如何解决这个问题呢:

  1. 避免强信息输入性的应用和服务,比如即时文字通讯、日程记录、信息管理和编辑等,这些服务,即使强行在电视终端上线,用户也会因为输入的不便而转向使用其他设备解决,简单来说,别指望刘翔去参加举重项目还能得金牌。

  2.无法避免的输入操作,想办法降低输入难度,比如提前洞悉用户可能输入的信息,用选择代替输入。如下图1,用户为信源进行命名的功能,经分析,用户命名的目的是看到信源连接的设备名字,方便下次选择,所以,我们将用户最常用的外接设备名字,在菜单右侧列出给用户选择,那么就可以避免90%的用户陷入输入困局。图2中,搜索影片时,不需要用户输入全称,输入首字母即可,降低用户输入量,也有助于提升体验。图3中,扫描二维码将输入任务转移到手机端进行,也是一个不错的方式。

啊16.jpg

  

 

  二、用户

  01

  人群一大怪——为家庭整体设计,而非单个用户

  电视用户是一群人而非一个人,为电视设计,意味着兼容一群人的习惯和需求,家庭成员间关系将在电视的设计上得到体现。

  1.考虑家长对儿童的管控需求。大家都知道,家长普遍都担心孩子看电视时间过长,希望可以有所限制,儿童锁功能正是应对这一需求的设计,具体方法给电视设置观看时段,在时段之外电视需要输入密码才能观看。更有趣的是为了防止密码遗忘,有些品牌会使用回答加减乘除问题的方式来代替输入密码,如下图。

  

 

  2. 家庭成员关系中的隐私问题。一般来说,公用设备不强调个人属性,因为不管是账号的变更还是个人资料的管理,在电视上成本都太高, 所以家庭成员间的信息默认是互相公开的,如下图,观影历史与当前登录账号没有关联,即使不登录,或者换一个账号登录,所有家庭成员的观影历史都还是会集中在这里显示。当然,在可控的范围内,给予用户一些编辑的权限,还是可以考虑的,图中右上角提示用户按菜单键可以清除观影记录,这样,万一爸爸看了过于“暴力血腥”的影片,也可清除痕迹不让小孩看到。

啊20.jpg  

 

  02

  人群第二怪——不仅要尊老,还得爱幼

  通过长期的用户族群分析得知,使用时长较多的成员往往是中老年人、小孩和家庭主妇,前两者尤其是老人缺乏智能设备使用经验,心理上往往是抗拒的、害怕的,所以UI界面以易用性和稳定性为第一原则,而非手机和PC终端所推崇的效率性优先。我们想象一下,中老年人最喜欢用的产品是什么?没错,传统有限频道电视、收音机等,这些设备的特性是操作非常简单,上下翻频道即可,但从效率角度,却是很低的,翻动到目标频道往往需要几十次操作,但他们不会觉得不方便。

  所以,对基础功能的UI设计,我们应该满足电视群体中最低门槛人群的需求,简洁直白,朴素实用。举个栗子,信源菜单的设计,有两种布局方式可考虑,如下图,宫格式和列表式,因为十字方向都可移动,宫格式显然更加灵活,移动到目标需要的步骤更少,而列表式只能在垂直方向移动,效率会比较低,但考虑到列表式规则更简单,我们最终采用列表式作为信源菜单的基础结构。

啊21.jpg  

 

  当然,考虑低门槛用户需求,并不意味着完全漠视活跃群体的探索需求,还是以信源选择菜单举例,考虑到年轻群体有较多外接设备,Xbox,PS4等游戏主机,各种视频盒子等,我们设计了信源命名功能,方便用户从多部外接设备中快速定位自己想进入的那一部。

 啊22.jpg 

 

  手机UI设计有很多隐形规则,比如右滑出现删除菜单,下拉内容刷新,长按编辑等,隐形规则让界面空间被释放出来,更多的用于呈现内容,对于勇于尝鲜、富有探索精神的手机用户而言,问题不大,经过简单教学就可掌握,但对于电视而言,隐形规则必须被谨慎考虑,因为你的用户并不一定愿意去尝试,他们更习惯于被明确告知该怎么做,所以设计应是直白的,如下图1,影视点播功能的详情页面,焦点选中视频动态缩略窗时,我们立刻用大号的字体告诉用户,对,勇敢点下去,你就可以全屏观看。下图2,是媒体中心功能,通过它,用户可查看插入电视的U盘中的文件,界面右上角的按键操作提示,明确的告知用户,按下菜单键,我们为你提供更多功能,用户点击就会发现,他还能使用管理、复制、分享文件等高级功能。

啊23.jpg

  

 

  三、环境

  01

  环境一大怪——薯片共啤酒一色,沙发伴毛毯齐飞

  吃着薯片,喝着啤酒,就把电视给看了,还看睡着了,是的,从来没有哪一款产品能像电视这样,从始至终让你如此肆无忌惮,甭管你是手机镜头前卖萌扮美的主播、还是电脑前正襟危坐的总监,到了电视前面,都请乖乖脱下伪装和面具,把自己丢进沙发,摆成一个大字,怎么舒服怎么来,电视注定就是一个以娱乐体验为中心的产品,娱乐,就是没有负担的、随心所欲的和你喜欢的东西在一起,为了配合这种定位,交互设计上,我们会注意主次信息的区分表达,以内容呈现和辅助内容查找的菜单为主,而低频次的功能性菜单、设置应用等,放置在用户平时看不到,但需要时能找到的位置。

  

 

  如下图,是TCL智能电视主界面,底部导航栏中9个分类标签,其中4个是影视类,对应用户最刚性的观影需求,4个是垂直业务类,对应近年兴起的购物、游戏、K歌、教育等家庭需求,而其他众多功能性应用都收拢在应用这1个标签中,不会过于干扰用户,但需要的时候他知道去哪找,导航栏最右侧的编辑按钮甚至可以用户对分类标签进行编辑,把不需要的隐藏起来。

  啊26.jpg

 

  为了让用户一开电视就能被爽到,我们甚至不再等待用户主动去查找内容,而是让内容来找用户,通过分析用户的使用习惯,借鉴业内最优秀的算法,我们已经有了初步的成果,如下图,左侧为算法匹配出的用户角色,右侧为该角色对应的内容,家庭中的每个成员都会拥有不同的角色,用的越多,那么推荐的角色以及匹配的内容会更精准。

  啊27.jpg

 

  另一个让用户感到很爽的办法是尽可能配合悦耳的声效。对,电视在家庭封闭环境中使用,不用担心环境噪音的削弱和对其他人的干扰,而且电视本身都配备强大的音响系统,大胆的使用声音和音乐效果,带动用户情绪,会取得很棒的效果。但是要注意,给予用户相应的提示,和设置音量的入口,避免夜晚用户不敢使用服务,隔壁的小宝宝正在熟睡呢。

  02

  环境二大怪,暗光环境

  家庭环境下,尤其是夜晚,光线会比较暗淡,所以界面设计不宜使用大面积的白色或其它明度太高的颜色,避免瞬间进入,对眼睛的刺激,事实上,国内各大品牌电视的背景壁纸都是采用深蓝或黑灰色为基调进行设计。另外,一个冷知识,根据苹果爸爸的研究,由于显像设备的差别,在电视上,深色背景白色字通常要比白色背景深色字要具备更高的可读性。

啊28.jpg

 

  好啦,终于到了收尾的时候,啰嗦这么多,只是想告诉大家,电视UI设计,真的不是辣么简单地!还有很多的奥秘等待我们去解锁。设计点是讲不完的,但是设计师是可以累死的,所以,偶去休息了,朋友们,再会~

  (注:文章的图片部分来源于网络,部分来源于个人体验输出)

责任编辑:吕佩
版权声明:凡来源标注有“流媒体网”字样的文章,版权均属流媒体网站,如需转载,请注明出处“流媒体网”。非本站出处的文章为本站转载,观点供业内参考,不代表本站观点。

相关新闻

{$Hits}