智能电视端UI设计基本原则

Ericlee的脑洞

2019-08-07

原创文章

18994

21

288

经验分类:经验/观点/原创文章

根据自己的项目经验总结电视端UI设计基本原则(基础篇),希望能帮到更多负责大屏的设计师们。



之前一直在做移动端的UI设计,在进入小米后,开始接触电视端的UI设计,目前在负责小米电视商城。经过一个电视端项目后,自己做了一些关于电视UI的总结以及设计方法原则。



电视UI算得上是一个偏冷门的界面设计,因为它的交互比较特殊,同时有一些限制,比如交互限制,焦点原则等等。本次经验也适合大屏设计,以下就自己的项目经验为电视UI设计原则做一个总结。



Image title


对于现在家庭智能电视电视而言,技术在不断的进步,但是其饱和度和对比度有的还是很强,还会遇到大红碰到大紫的色块对比;但是信息变得简约了,都是以tab导航为主,下面几个卡片信息瀑布流显示;语音提示很重要,会随着焦点的移动发出提示声响,提示用户电视焦点的移动状态。




Image title


小米电视商城全新改版,在接到需求后,一定要模拟用户来体验一下购物流程还有用电视购物都环境,环境应该是固定的,那就是在家里;电视和手机购物体验是不一样的,电视是要用遥控器来控制,所以每一步的操作流程都很珍贵,如果界面跳转太多,会给用户一种烦躁的感觉,所以尽量同一层级的信息要在同一界面填写完毕,避免二次跳转。


 


第二点说的就是焦点问题,焦点不能层次不齐,跳动太大会引起视觉不适;以小米电视商城详情为例,焦点尽量在同一水平线上,同行的焦点移动,视觉感受上会舒服很多。




Image title


Image title


智能电视的分辨率和大家平常在app看电影的时候差不多,如上图所示,目前1080p最常见,2k和4k基本都是资源类节目,设计尺寸以小米电视为例,通常做1920*1080的视觉稿就可以了,开发会适配比1920*1080小的电视屏幕,这样下来,如果小分辨率的电视没问题了,大的分辨率也就没问题了。




Image title


我们知道在设计app的时候,都有左右间距的控制,移动端一般常见的控制在28px或者32px,电视端因为是大屏设计,所以预留的空间也要大一些,基本左右留出120px,上面留出90px就可以了。我一般设计的时候左右是固定的120px,上面可以随设计内容来自定义,90px或者100px,都是可以的,只要视觉舒服即可。




Image title


Image title


焦点在电视端UI设计里显得尤为重要,因为它就是你的视觉焦点,焦点会随着遥控器是上下左右确认会改变;焦点的设计不能是扁平的,因为那样不能够提醒用户焦点状态的位置,焦点的设计应该是放大的、夸张的、可以带边框,也可以使用投影外发光的方式来设计,确保能够给用户足够的清晰位置。


焦点放大我这里建议放大1.1倍或者1.2倍就可以了,再大就显得过于大了。




Image title


Image title


如上图所示,我在设计焦点的时候,就用了放大+外边框的形式,这样焦点移动起来可以让用户足够看到位置所在;电视端的交互也是很简单的,基本属于十字交互,即自上而下,从左到右的交互方式;红色剪头属于禁区,所有的电视交互,没有斜45度的交互,这样是错误的~




Image title


Image title


大家可以看到,在app里,常见的弹窗和浮窗可以压盖在可点击功能上,比如美团的红包,爱奇艺的一键关注,即使是这样,也不会影响功能的正常使用;但是电视端的设计,如果两个可点击功能压盖在一起,那么尴尬的就是,焦点无法获取,因为它没法判断你想要选那个功能,所以在电视上,一定要将两个功能分开来布局最为合适。




Image title


电视端UI设计忌讳控件隐藏,比如上图,如果有很多文字的时候,左边的设计是错误的,因为隐藏了button按钮;改为右边的设计是比较好的,我们可以选择焦点选中文字给一个弹窗状态或者其它,将button功能位露出来,如果一个界面可选功能位较少,我们设计的时候尽量在第一屏展示,如果实在不行,可以选择吸底吸边来设计。





Image title


颜色的选择运用是重中之重,因为这个会直接影响到用户的视觉体验。因为用户环境大多数是晚上的时候回去看电视,分开灯和关灯的情况,开灯的情况其实还好;如果关灯,颜色太刺眼的话,饱和度较高的颜色会直接影响到眼睛,这个危害是很大的,而且不一样颜色的色块,会增加用户的视觉负担,这样就得不偿失了。所以我们要避免大面积的使用单一纯色或者渐变色。




特别提示:

电视UI设计中,白色谨慎使用!白色谨慎使用!白色谨慎使用!重要的事情说三遍,因为白色过多实在是太太太刺眼了,我们可以选中较为灰一些的接近白色的颜色来代替。


背景的运用这里也建议使用深色的背景,原因和上述讲的一样,还有一个就是深色背景可以更好的衬托出界面的主要内容;反之如果用浅色的背景,有的卡片如果需求方要求设计成浅色,那么这样浅色的背景+浅色的卡片,这样叠在一起,主要内容就特别难区分了。


我们在设计电视端UI的时候,要真实的先去体验一下特殊的场景,电视端每个tab是一个频道,每个频道的设计风格也是不同的,比如少儿频道,购物频道和电影电视剧频道,设计风格肯定不同,体验模拟流程可以让我们更快的了解电视特性。




Image title


字体的选择默认思源黑体,因为这个字体是开源字体,可以免费使用,没有版权之分,以上列入的字体是小米电视商城改版的字号,具体的字体和间距可以根据自己的设计需求来变;


关于字体的选择,当然你也可以选用其它字体,或者一些特殊字体,好看的字体,但是这样的话,字体包应该会很大,会影响一些加载速度吧。


字体颜色的选择尽量用白色或者亮色,深色背景上选用白色是最好的,这样更易于阅读。


字体的粗细大小,这里标题建议加粗选择,其余就常规字体就好来,避免太粗或者太细的字体选择。






好的智能家居体验

电视的设计只是其中的一部分,未来我们的电视可能比现在的体验更加好,比如会出现实景商城,单一的图片形式已经不能满足我们对购物的需求,一些视频类,动效类的体验会更加合适,想让电视拥有好的体验并不是一件简单的事情,想必大家已经从诸多“电视盒 子”上体验到了这一点。我们曾经熟悉的电视已经发生改变,而我们适应的手机、平板和电脑和新的电视还有着巨大的差别,我们需要忘掉之前熟悉的模式,未来五年、十年、甚至更久;电视、电灯、冰箱洗衣机等智能家具的体验,正是我们设计师需要在未来几年所做的事情,这很重要。




下面为大家引入中一些优秀的智能家居UI设计,以下作品来自追波:


Image title

by Luova Studio in App Interface 

https://dribbble.com/shots/6034172-Smart-Home/attachments





Image title

by Julia Jakubiak for 10Clouds

https://dribbble.com/shots/6309454-Smart-Home-App





Image title

by Filip Legierski for Riotters 

https://dribbble.com/shots/6439700-Smarthome





Image title

by Anggiat Manuel for Pixelz

https://dribbble.com/shots/5954157-Smart-Home-Devices






Image title

by Bartek Zieman for Movade

https://dribbble.com/shots/6243299-Smart-Home-Mobile-Dashboard





智能家居必然是未来的趋势,衣食住行必然离不开人们的生活,现在小爱音响可以控制电视机等等,今后必定会控制家里的一切设备,科技的进步必然也会影响着人们的生活,智能家居设计也是设计师们今后要掌握的东西。




小米电视商城全新改版是我接触的第一个电视端UI设计项目,第一期的优化还有很多不足,根据项目经验总结了上面的规范类。以上的基本设计规范掌握后,那么做电视UI基本问题不大,大的错误肯定不会有了;但是每个公司的设计规范肯定也有所差别,但是基本的规范和注意事项也就是我上面所提到的种种;电视端的设计是个偏冷门的UI设计,多掌握一些另类项目经验也是一个设计师必备的技能。


本次分享就这些,如果有问题可以评论区或者私信回复。如需转载请联系作者。


谢谢。










全部评论:21

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消