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

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

2019/08/14 7420评论 6

之前一直在做移动端的 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 设计,多掌握一些另类项目经验也是设计师必备的技能。

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/xiaomi-tv-ui-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里