TV端UI设计规范小结

    早几年冷门的TV端UI设计在2021年已经相对成熟，电视机的头部品牌创维、海信、TCL、长虹、康佳和新踏入电视机行业的小米在硬件系统设计相对早些年完善很多，相比之下TV端的软件系统设计和移动端和PC端来讲还有很大的优化空间。

    根据所属公司行业属性、营收模式、产品定位和运营方向的不同，设计重点自然有所不同。硬件公司的业务发力点在硬件销售上（参考创维、海信、TCL等硬件公司），所以硬件系统设计大变动迭代的频率很小；软件公司的设计方向更多，有内容运营平台（参考奇异果、CIBN、PPTV等点播类软件）、资源整合平台（酒店影视、SPA会所、医疗场所等定制系统）、功能性软件（乐播投屏、学生学习平台、KTV点歌系统等）等。

    软件设计方向除了考虑软件美观实用和功能再开发外，还要综合考虑系统改版设计后和不同机型之间适配的成本，TV端的特殊性需要刷机适配更新等人工操作，特别是To C端客户，营业中软件更新步骤并不像移动端和PC端联网用安装包更新那么快捷简单，客户已上线终端更新的技术运维时间周期较长。经了解，圈子内软件迭代版本很少，所以可参考案例和TV端设计知识科普相对较少，下面是TV端UI设计通用的基础规范，学习掌握后开启TV端UI设计之路吧~

    着手设计前，首先要了解下用户使用场景，电视想必大家都操作使用过，但这次可以区别于以往以看电视为目的的操作方式，慢一点感受TV端的界面细节和交互逻辑，以一个UI设计师的角度去找到你认为可优化的点和认为做得不错的方面，之后在动手做出符合用户体验的最佳设计。

    随着技术的不断进步和用户需求的变化，现在更大屏的电视投影越来越普及，注重沉浸式观影体验，用户的观影距离一般2~5米左右，较远的距离为了让用户能更高效迅速的找到目标内容，电视界面往往通过将重点内容靠前突出，不被淹没在大屏之中。

    TV端的远距离操作和娱乐属性，观赏性高的大图视觉冲击力更强，过多小号文字实际可见度不高，且阅读意愿不强。由于TV端屏幕尺寸较大，往往可以展示很多内容，但要把握好主次，一屏内过多的内容会让用户抓不住当前重点，可以模块化分好类，优先展示最重要内容。

    考虑到TV端交互的特殊性，层级设计不宜过深，越浅越好，否则用户容易迷失，而且过深的层级意味着过多的步骤，对于使用遥控器操作很不友好。层级控制在4个以内是比较合适的，操作简单，结构清晰，能大大提升用户操作效率。

    当今TV端市场发展越来越成熟，电视的主要操作配件遥控器也有了很大改变，从传统很多按键的老式遥控器到现在的极简遥控器+智能语音控制，TV端承载的功越来越多，在遥控器操作体验上有很大优化。

    新式遥控器将不常用的按键去除或转移至电视端，保留了电源、信号源、语音键、方向键、OK键、主页键、声音+/-以及返回键，区别于移动端的触屏操控和PC端的鼠标操控，TV端通过遥控器操控，主要由方向键控制结合OK确认键完成选择，加上AI智能语音功能，大幅度简化了用户的操作流程，使用熟悉后甚至可不看遥控器操作。

    主流遥控器的最常见操作方式为长按和短按操作，特殊遥控器设计代表有apple TV的遥控器，触摸屏、加速计、陀螺仪结合按钮点按操作，用户操作体验更顺滑流畅，缺点是apple TV并不在国内出售。

    智能TV端有一个特有概念：“焦点”，在TV端设计中起着极为重要的作用。焦点为用户指明了当前所选中内容的位置，类似PC端的hover状态，所以焦点样式应该在界面中突出显眼。

    电视端内容常见状态有：默认状态（一般停留在第一个卡片上或导航到第一个位置）、焦点状态、按下状态、标记状态。

    为了让用户不迷失，清晰看到选中区域，需要添加适当突出的焦点动效，同一种层级下的焦点样式统一，不能参差不齐，放大幅度在1.1~1.2倍之间最为合适，跳动太大会引起视觉不适，恰到好处的焦点动效能让用户在视觉感受舒服的情况下最短时间内一眼捕捉到焦点位置，还有部分系统会特别设置焦点移动声效，提示焦点运动状态。

    焦点常用设计样式主要有：框选、变大、投影、发光、底部色块、实色填充、品牌主推特色元素等。

    焦点根据遥控器的上下左右方向键移动，呈现“十字”形运动规则。在屏幕内容区域划分规整、且无空缺情况下，不支持红色箭头示意的错误斜向移动，焦点不能跳跃性的移动，需要按照方向键的操作就近移动至离上一个焦点最近的位置。

    此外，在侧边多层复杂Tab结构时，“焦点路径记忆”可根据用户上一操作行为记录焦点移动轨迹，无焦点移动记录时，就近移动到上一Tab内容的首位，有焦点移动记录时，焦点移动到用户上一操作行为记录的内容上。

    在TV端设计中，十字交互的特性让规则的“卡片式布局”成为TV端最佳布局形式，不建议设计过于交错的卡片布局，无论是卡片、面性还是线性的设计样式，可操作内容需要有明显分区，没有明显分区的内容不仅容易淹没在屏幕众多内容中，还影响页面的整齐性，过于交错的布局会使用户对焦点的移动路径无法正确预期。

    卡片式设计是近几年很多UI设计师偏爱的移动端和PC端的设计表现方式，TV端同样适用。卡片式设计对于界面内不同内容的整合、信息承载、规则布局、主次分割有很大帮助，屏幕尺寸杂多的情况下和设计完美响应，并且让视觉感受具有美观性和层次感。

    卡片形状规则矩形偏多，还有圆形和异形，具有设计感的异形视觉冲击力最强，一般构图：影视类常用电影海报或主角形象+文字、音乐类常用歌手形象或专辑封面+文字、功能入口类常用图标+文字等多样化设计方式。

    行与行的运动方式根据方向键上下左右“就近移动”，行尾右键操作跨行跳转到下一行首个卡片上，行首左键操作跳转至上一行末尾卡片上，模块尾部卡片不规则数量的情况下继续右键跳转到首行第一个卡片上。

    当一行中有延伸在屏幕之外的内容时，焦点一般有3种固定方式：焦点居左固定、焦点居中固定和焦点居右固定（三种方式不同时使用，以免造成操作困扰，图1仅为固定位置示例）。

    需要将现有卡片控制好大小间距，将延伸出去卡片在一屏内露出一些，让用户知道后面还有内容，否则用户自然认为后面没有内容，而错过了延伸出去的那个内容。

    有些应用设计支持遥控器左右方向移动焦点，在前一个Tab的最后一个卡片继续向右移动时，跳转到下一个Tab的第一个内容上的“跨Tab移动方式”。

    这样减少了用户需要跳转到菜单切换的步骤，但要注意Tab标记状态样式需要明显一点，否则Tab分类差异不大的时候，用户没关注到已经切换了Tab，认为一个Tab下内容太多时容易乏味，用户操作查看愿会比较小，内容在横向可扩展时，隐藏在屏幕之外的内容越靠后用户查看的几率越小，所以尽量不要频繁的的让内容过多的横向延伸。

    结合纵向操作方式，让操作方式多样化，较多的内容可以信息瀑布流形式延伸，现在市场大部分电视系统都采用瀑布流呈现方式，纵向布局内容可以无限延伸，可承载信息和运营空间都更多。

    “按行翻页”和“按页翻页”都是通过纵向移动或固定焦点位置来呈现瀑布流向下翻页的方式。

    按行翻页：焦点一般固定在一屏的中间位置第一个内容上，通过内容一行一行的滚动达到翻页目的，交互效果过渡自然。

    按页翻页：通过焦点移动到一屏的最后一个内容再进行一屏内容的滚动切换，相对于按行翻页的视觉舒适度没那么高，焦点的跳跃动效处理不好也会引起视觉不适。

    瀑布流大量的内容延伸让用户在操作过程中很容易迷失，移动到底部时手动回到顶部也是很费劲的，所以底部设置一个回到顶部按钮帮助用户一键回到首屏很有必要，遥控器的返回键也可操作回到界面主页初始位置。

    由于TV端交互的特殊性，app里的弹窗和浮窗可以覆盖在界面其他可点击功能上，但是TV端需要操作的控件如果与其他功能叠在一起，焦点将无法识别用户想选择的是哪一个功能，所以控件需要分开布局，不要层叠在一起。

    另外，弹窗卡片内遇到需要操作的控件，焦点转移到卡片内容的时候应该直接落到第一个可操作的控件上，用户可以通过方向键直接操作，而不是把焦点放在卡片框上再移动到可操作控件上，这样就使用户多了一步繁琐的操作步骤。

    由于用户观看电视时往往是放松且注意力集中的的状态，突然的弹窗提示会打断用户饱和的情绪，所以在一些特殊节点上，如果需要出现必要反馈提示，这些提示需要突出简洁并且要掌握好停留时间，不影响用户观影状态。

    常见的TV端导航有“横向导航”和“纵向导航”2种。

    横向导航：占据屏幕上方或下方边缘位置，这类导航可以在一屏内占据最少的位置，不会过多干扰用户，沉浸式体验感受更好，导航外有更多位置容纳其他内容，当导航内容超过一屏时，可以左右无限滑动显示更多，适用于首页、模块区分等Tab。

    纵向导航：占据屏幕左侧或右侧边缘位置，主要以左侧为主，虽然占据了一屏左侧部分区域，带来的沉浸感也不如横向导航，但是优点在与不管焦点在右侧区域哪个位置，只要焦点向左移动到Tab后，能直接切换Tab内容，使用户查找内容的效率更高，适用于多类目分类筛选等需要快速查找内容的地方。

    TV端设计忌讳隐藏一屏内需要操作的控件，在有详情解说文字较多且无法精简的情况下，我们可以给文字区域设定一个固定区域，多出文字给一个滚动框让文字在中间滚动查看或尾部设计一个查看详情控件，点击后用弹窗呈现全部详情文字，还可以让控件吸底吸边在一屏内显示出来。

    由于TV端用户的主流输入方式还是遥控器，遥控器的输入特点使它的输入过程繁琐、步骤多，遇上特殊符号更是令人头疼。所以尽量减少用户输入，可以采用界面展示多进行菜单选择、智能语音输入、扫码链接手机端的方式进行输入流程优化。

    目前市场多数智能电视的输入方式主要包括：软件系统的T9键盘（九宫格）、全键盘、硬件系统自带键盘（一般从全屏界面的底部弹出）。用户可以根据所在场景选择最便捷的输入方式，数字和字母在对应输入项的时候自动识别，关键字首拼识别输入，涉及大量信息填写的时候用扫码转到手机H5进行输入。语音优先，其次扫码链接和键盘输入，尽可能减少用户使用遥控器频繁操作只为找个字。

    结合现在智能房控和语音的发展，家庭场景中大量智能电视本身配有智能语音搜索功能，除了语音按键操作外，还实现了和移动端一样说唤醒词后就可以操控搜索进入用户想要的功能。语音搜索精确到定位软件、明星名、歌曲名、剧名、影片名，小到问些天气和百度问题都能得到答复，部分家庭还自主配有智能音箱，使家中电子产品连接形成物联网，结合智能音箱的高准确度识别，更高效的操作电视搜索想要的内容。

    商业场所例如酒店、洗浴中心、养老院等也有智能客控系统和机器人的辅助，使用户体验感受达到最优状态是所有产品服务设计人员的工作意义所在。

    区别于移动端分辨率多样化，智能电视市场上常见分辨率尺寸是1280*720P和1920*1080P，少量高档次机型能到2K或4K分辨率，但设计尺寸通常以1920*1080为标准产出视觉稿，因为缩放效果优于放大效果，开发会自动适配比1920*1080小的电视屏幕。

    移动端一般常见左右间距的控制在28px或者32px，TV端屏幕显示特性不一样，所以左右间距也要相对加大一些，给中间留出安全设计区域容纳内容，基本左右留出100px，上下留出80px达到视觉舒服就OK。

    由于观影环境大多数是环境光较暗的情况，分：开灯和关灯2种情况。

    开灯的情况下除了降低画面饱和度和界面亮度外其他影响还好；重点是关灯环境下，刺眼的高饱和度颜色和高亮度的背景都会直接影响到视觉效果，太多样颜色的色块，会增加用户的视觉负担，所以要避免大面积的使用高亮纯色或者花哨的渐变色。

    谨慎使用白色背景，白色占据面积过多在较暗环境下会特别刺眼，特别是大屏投影效果下影响特别显著，如果使用浅色为背景，浅色的背景+浅色的卡片搭配叠在一起，主要内容就特别难区分了，如果采用深色卡片，白色背景容易与白色背景墙混为一体，视觉感受界面区域会变小，深色卡片也会尤其突兀，而且白底黑字容易产生重影。

    TV端背景：不同于移动端和电脑端常用的灰白浅色，建议渐变深色模式背景，可以更好的凸显出界面的主要内容与操作逻辑，太暗的深纯色也会使界面太死板压抑，尤其是运营图片展示较少的页面，适当柔和灵动的渐变会使画面更有层次感，特殊页面还可根据算法自动生成与当前页面元素匹配的背景色。

    焦点颜色及点缀色：可以结合品牌主色调，必须需要亮眼突出，远距离操作会大大提高操作难度，焦点配色要做到一眼让用户捕捉到，清楚知道焦点当前所处位置。

    容器色和灰阶色：常用比背景较浅一点中性色为主，结合设计风格和组件样式进行调整色调和透明度达到和谐。

    不管是电视还是投影，电脑做出的视觉稿和实际呈现的效果容易略有出路，电视颜色效果会被不同机型影响，投影界面影响因素更多，涉及到投影机型的流明度和装修环境光，最后效果都需要上机测试才能定稿落地。

    市场上TV端一般都是安卓系统，设计字体建议使用思源黑体或其他无衬线体，简洁美观，与开发落地的效果也会更为相近。字体颜色的选择尽量用白色或者其他色相的高亮色，深色背景上选用白色字体是最识别度最高且易于阅读的，除选中标题加粗外，统一使用常规字体，避免太粗或者太细的字体造成阅读障碍。

    TV端的使用环境主要是家庭和商业娱乐场所，面向的使用群体多数是居家长辈和小孩或商业场所的临时性用户，在较慢的迭代速度下，大多数是固定框架下对可变组件的设计创新和运营界面的维护，TV端基础设计规范掌握后，上手从事TV端设计并不难，UI设计在框架迭代情况较小的情况下，重点在色调风格和交互细节的打磨把控上，特别是商业场所TV端UI设计与场所行业风格的专属性定制，实际运用还需结合项目需求。

    TV端UI设计规范小结分享到此，对本文观点不同想法的小伙伴欢迎评论区交流学习~