参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

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

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

智能电视的特性

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

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

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

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

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

设计尺寸

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

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

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

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

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

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

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

交互设计

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

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

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

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

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

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

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

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

视觉设计

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

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

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

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

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

参与小米电视商城改版后,我总结了这份智能电视UI设计基本原则

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

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

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

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

更好的智能家居体验

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

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

收藏 251
点赞 35

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。