智能电视的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设计，多掌握一些另类项目经验也是一个设计师必备的技能。

作者：Ericlee的脑洞    原文链接：https://www.zcool.com.cn/article/ZMTAwMzMxNg==.html