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

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

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