【UI设计小分享】TV端UI设计

深圳/设计爱好者/2年前/1255浏览

版权

【UI设计小分享】TV端UI设计

一次TV端UI设计的小总结，跟大家分享一下

从事设计行业三年了，一直在TV端做视觉上的设计。前段时间公司刚好有一个快捷launcher的项目，因为种种原因，最后给到我来完成，也算是一个小挑战吧！接手后，就开始在各个设计网站找设计规范一类的文章，才发现TV端相关的规范确实有些少，幸亏在站酷找到了几个设计大佬的文章，让我最终还算顺利的完成了这个项目（也学会了跟开发小哥沟通）！所以这篇文章也算一个自我总结吧！希望可以对大家有所帮助，也欢迎大家多多提出意见！

使用场景

在做UI设计的时候，用户的使用场景是一定要关注到。而对于电视的使用场景，大家回忆一下自家的客厅就能发现，一般距离是3m到6m，这与电视机的尺寸和您家客厅大小有关系。因此对于TV端的UI设计来说，画面元素的识别性就是比较重要的一环，像字体大小，按钮大小，推荐位大小等等，对于我个人而言，我会更希望用户使用时，可以准确的识别和理解电视端传递出的信息。同时，在设计时，页面层级不宜过多，否则可能会造成用户无法准确知道自己在哪个页面，影响使用体验！这次项目由于主打快捷，所以只到二级页面就可以满足需求。

设计图尺寸

就目前的市场上常见的电视尺寸而言，1920x1080px的设计稿即可以满足大部分的需求，对于电视屏幕尺寸较小的情况，研发小哥也会去做适配。

做设计对安全区域肯定是要有概念的，因为实际应用时会存在裁边的情况，只不过TV端的留边需要更多一些，参考了一些大佬的设计习惯上方预留80-90px，左右预留100-120px，以我实际操作的感受多留一点更安全！上图左侧就是裁边和不裁边的对比，大家自行感受。（ps：一般来说可以在设置-图像大小中调整会正常状态）

颜色

电视上的色彩和电脑上的色彩效果是会有差别的，一般会偏亮，不同电视机有自己不同的想法，所以我在做视觉时也会使用较暗的颜色，尽量避免最后终效果过于刺眼。

对于背景色的选择，肯定推荐深色系的背景，加渐变的（因为使用纯色的背景，画面会有些单调和沉闷，而渐变色相较而言画面会更灵动一些）而且在环境较暗时，不会过于亮眼，减少对用户眼睛的刺激。另外一个重点就是：不要用纯白色作为背景，以及大面积使用纯白色，会很刺眼的。如果要做浅色系背景的话，也是在白色的基础上加些灰或者蓝的。

其实从个人的角度上来讲，浅色背景和深色背景的选取没有严格好坏之分吧，如果希望最终落地的效果满意的话，与运营设计师的配合也很关键，可以定一些规范，比如，使用浅色背景的情况下，推荐位图片应该选用一些深色的海报，避免陷在背景色中等。

一般情况下，选中时焦点的颜色会选取较为明显的，便于用户快速识别。像B站大屏版、腾讯极光、小米、雷鸟，选中推荐位时的焦点就会选用白色框的样式，还是蛮有质感的。对于导航栏焦点色的选取一般都会提取品牌色，如酷喵用的蓝色、奇异果用的绿色等。
关于电视端颜色的知识可以看看这位大神的文章：
@lady珠珠 https://www.zcool.com.cn/work/ZNTQ3Mjc1ODQ=.html

字体

我们在使用电视时，与设备之间是有距离的，所以选取字体时更要注意其识别性。推荐使用无衬线黑体，如思源黑、阿里巴巴普黑、MiSans等，根据实际情况选择（要提前和研发小哥沟通好，因为有可能会遇到新加字体包的情况，这个时候要确认字体包大小是否合适，需不需要去掉些字重等）因为如果字体包过大，会占用部分开发资源，用户使用时加载时间也会过长，影响使用体验。

此外，字体颜色需要根据最终定稿的背景颜色来定，如果是深色系背景，字体使用白色最佳，因为与深色背景对比明显，易于阅读。但如果是浅色系的背景，字体就不要选择纯黑的颜色啦！会丢失一些质感，可以加一些灰或者蓝，质感直接拉回来。

最后，字重选择根据使用场景来定，像一些标签的标题或者菜单的标题可以选择粗一些的字重，其他位置常规就行，不要过粗或者过细，会影响识别。

关于焦点

电视端焦点常见的会有3种状态，默认、悬停、标记，主要作用是让用户较为清楚的知道自己在哪，不至于在launcher上面浏览了很久，结果不清楚自己在哪个频道里，这样体验就很糟糕了呀。

一般来说，焦点放大倍数在1.1-1.2倍即可。但也注意到，有些品牌也会超过这个倍数，像当贝盒子、英伟达的盒子，推荐位选中时的状态感觉有超过1.2倍的，大家可以根据实际的呈现效果来调整。

现在市场上焦点选中状态常见的有两种，一种是有选中框的形式、如B站大屏端、腾讯、小米等、另一种是无选中框，利用放大+阴影的形式凸显选中时的状态、如当贝盒子、酷喵、爱奇艺等。

另外分享一个小点，其实在特定频道，像少儿，或者一些节日，像圣诞节、春节，可以考虑在选中框上加一些小装饰，效果会很不错，营造一些氛围。（记得奇异果的少儿频道有加过胡萝卜好像，挺可爱的）

关于交互

电视端的交互受限于遥控器，目前就是简单的十字交互，无法斜上斜下的移动，所以在推荐位的设计上也要尽可能的算好尺寸，如图中所示，边缘对齐，整体很整洁，也便于用户操作，不会产生混乱。

国内市面上常见的导航栏样式其实总结来说就两种，横向和纵向。横向导航栏使用占比更高，也比较适合现在瀑布流的推荐方式，其次也比较适合做沉浸式的视觉设计。纵向导航栏一般会占据画面的左侧，与横向导航栏相比会占据一部分的画面空间，会导致右侧推荐位的尺寸缩小，视觉效果会弱一些，但会便于用户重新回到导航栏，因为你只需要向左移动焦点到导航栏即可（现在横向导航栏也会有如“连续按两次返回键返回顶部”的交互）。