智能电视端UI设计基本原则Recommanded by editor
2年前Publish
根据自己的项目经验总结电视端UI设计基本原则(基础篇)

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


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



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





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


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





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





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





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


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



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




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





      露出屏外的内容呢,和移动端设计是一样的,如果有多个卡片内容,我们需要将露出屏外的那张卡片做一些边界化处理,控制好间距,也就是说我们要将一个完整的卡片漏出来一些,让用户知道,后面还有内容;反之,用户可能不知道后面还有内容,就不会按遥控器右键查看了。





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





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


特别提示:

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


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


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





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


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


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


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




更好的智能家居体验

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




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


本次分享就这些,如果有问题可以评论区回复。


谢谢。

446
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
北京 | UI设计师
Article information
文章标签
收录收藏夹
更多收录此文章的收藏夹