【流媒体网】消息：《做用户喜欢的智能电视产品及服务》系列文章，到今天就是第四篇了，本章节我们将重点放在具体产品设计上。UI及交互流程是用户第一眼就可直观看见并对产品打分的地方，“第一印象”对用户的购买/下载使用具有巨大的影响，同时如何做到“百看不厌”则是另外一个紧密相关的话题，本文主要是从“长期使用”的角度探讨电视化产品设计的要旨。
 
    如之前反复强调，一个产品需要赢得用户，最重要的是贴近用户，了解他/她以及其周边的环境，使用产品的时间地点以及上下文心理。在产品设计建议之前让我们来复习下：

    环境：

    *电视是家庭用户（1～多人）的产品；
    *客厅和卧室是用户主要的观看场所；
    *电视机的使用体验是“后仰式”放松式体验；
    *电视的观看距离是3～5米居多；
    *电视的观看时间在6~10点是一天的高峰;
    *电视机的观看观众包含了大量的中老年妇女，且教育水平偏低；

    设备的物理特性：

    *电视机的物理尺寸比例: 传统CRT电视基本上是4：3，最近平板电视则更多是宽屏16：9，但是总体来看，电视的长度是大于高度；
    *电视机分辨率：720×576i/1280×720p/1920×1080p为主（其中576i以传统CRT为代表；720P以小尺寸1366×768物理像素的平板为代表；1080P主要为大尺寸的平板）；
    *电视机的物理像素：相对于PC显示器，电视的物理像素点偏大，同时部分尺寸设备的像素点是长方形而不是正方形；
    *颜色: 电视机的色彩亮度等显示效果与PC有较大的差异；
    *遥控设备：必选的只有遥控器，而遥控器，必选的是上/下/左/右/确认/返回(首页)

    用户终端和使用环境了解之后，下面就要具体操作了，但是不同的终端产品/应用的设计可能是多种风格和样式的，为了更具象的说明，下面直接将设计拆解成设计元素、界面结构流程、界面特效以及其他4个大部分，同时辅助笔者参与设计IPTV/互联网电视以及目前聚合视频App产品（如图1）做示例说明。

    第一节：设计元素

    电视产品的设计元素与其他的设计本身没有差异，从具体项目来说，以下描述的一些元素可能需要重点考虑：

    字体：

    智能终端一般采用android操作系统，而android系统的默认字体是Droid Sans(字符等）以及Droid Sans Fallback Fallback（包含汉字），对应的字体在电视上整体表现尚可，考虑到电视的物理显示效果以及强烈的锯齿反作用，从最佳的效果来说，微软雅黑以及方正幼圆会有更好的效果。但是嵌入第三方字体有可能会降低系统的性能，这个需要做操作之前做一定的性能Profile测试验证。

    字号：

    考虑到电视机的观看距离以及观看人群（中老年）可能的视力状况，更大的字号可能是适合电视用户的要求，否则对应的文字对于用户来说反而变成无用或者干扰信息。建议最低不要小于22号；以24/26甚至更大为佳,图1产品以及图2产品对应的字号是比较合适电视用户观看的;

    声音：

    考虑到用户的操作体验，部分产品会增加界面的操作声音，作为用户操作行为的反馈。考虑到不同内容的音量以及对应功能的定位，界面操作音应该相对低调，一方面旋律的选择，一方面要低于常规节目的声音音平值为佳；

    色调：

    电视屏对于色彩的饱和度和亮度要超过PC显示器屏幕，同时因为家庭长时间使用，所以需要考虑如下的细节:

    * 避免使用明亮的、纯度高的白色、红色、橘红等(图1产品的背景选择为相对较暗,适合主流电视和不同光线下使用);
    * 电视本身有多种显示模式：标准，电影，风景等，这些模式对应的亮度/对比度等有很大的差异；丢应的色调选择需要在多种模式下测试验证；
    * 不要使用跨度太大的渐变，否则会出现条带齿纹（图2中热门推荐文字和热播榜中间的渐变可见有多道条纹，实际电视观看效果会更加恶化）

[NextPage]    第二节：界面结构/界面流程

    上一节提及了设计的一些基础要素，从服务产品角度，会有如下一些组成结构的“元器件”部分需要说明：

    焦点：电视产品需要考虑遥控器的操作，这对应着页面上的焦点位置，从操作本身来看，电视产品界面的焦点要求简单（不要太多焦点）、显著（与背景和图片文字等有强烈对比）同时意义明确（光标的不同状态区分），如图3界面，可以看出聚焦光标的两种状态（“聚焦的”，“选中的”），同时在其他地方可能还需要“聚焦并选中”；

    ICON：电视的图标比PC/移动设备具有更重要的作用，一方面是因为其数量少，需要每日看到；另外一方面是因为电视人群的综合技能和文化偏低，需要更加直观的图形来辅助操作，如图1所示，可以看出，电视化的图标设计需要提供具象化，简洁，醒目等几个重要特征；

    文本：电视观看距离的缘故，对应产品设计如果包含文本元素，主要把握简单（2～10个字，其中导航最少，标题次之，内容简介除外）的原则；

    图片：大，高清；如图4对比，右侧MoreTV高清晰大海报图的设计会让用户更清晰的查看到内容；

    背景：

    因为电视上的主要服务是视频，所以突出视频服务本身的要素是设计的重点，而背景图片/颜色的选择则应该考虑”绿叶“效应，一方面需要让用户长期看起来不疲劳，另外一方面也需要考虑用户的观感；从实际操作来看，选择深色系的颜色或者图片作为背景是比较合适；考虑到用户可能在光线不好或者光灯夜晚时使用电视服务，所以浅色明亮背景可能会让使用者觉得太过刺眼，不太舒服，图5对比可以查看到差异，右侧产品会更加醒目，但是长期使用会对眼睛造成刺激，建议左侧效果为佳；

    边界/Overscan

    由于CRT时代的历史原因，电视机显示屏的最外面一圈将不会作为显示区域而是隐藏在电视的边框中，因此电视产品设计不能使用到这个区域，UI部分的四周将是背景为主留白来处理；

    下面说说界面流程，电视产品与PC互联网以及移动互联网的产品在流程上既有大面积的相似之处也有部分特定的细节差异，

    相似之处在于：考虑用户的使用习惯，降低完成任务的步骤；提供清晰的产品功能结构，提炼导航主体以及细分功能的入口；

    差异至于在于：电视的操控设备由鼠标/触控变成了遥控器的光标；

    不同的电视产品会有差异化的流程设计，不过从基础原则来看，电视化的产品流程建议符合以下的原则为佳：

    考虑电视长方形特征，左右流程为佳；
    导航与细分内容分离；
    主题结构的操作步骤一致并可复制；
    保留用户快速回到起点的能力；
    用户操作过程中，对应的提示信息尽可能少，不是核心能力的变化，不要提供信息给用户；

[NextPage]    第三节：界面特效

    智能电视终端产品属于消费电子产品范围，而消费电视产品光有静态元素效果是肯定不够的，需要提供适度的界面特效给用户；

    动画效果：

    放大效果，对应的行为用于细分内容/入口的选中，放大过程提供的信息还可以做简单变化(图2和图5左产品就利用了这种动画强化其焦点位置)；

    呼吸效果：给用户一种存在和蓄势待发的感觉，适用于细分内容和延展功能的对应设计(图5百视通小红产品使用了这个特效,实际使用效果很酷)；

    动画，包括背景动画和过场动画，有没有加对应的动画，对应整体产品来说就是传统还是新潮的巨大差别，考虑到智能电视终端对于OpenGL等图形引擎比较完善的支持，因此适度的过场动画一定是必选项；

    强化效果：

    阴影：是强化效果最有效的方式，不过切记不要适得其反，图7对应的产品就是有些夸张过度了,初看有很重的印象,但是对于长期使用的用户则是一种干扰。

    遮罩：产品界面在表现当前画面的要素时，突出核心重点的时候，也希望引导用户有更多的数据/功能可以查看利用，遮罩就成为了比较重要的手段；图4右侧产品设计下方的遮罩可以作为设计的参考；

    第四节：其他部分

    最后，将智能电视终端产品设计中的一些与设计相关的要点补充说明下，这些也是笔者参与相关产品设计和开发实现中遇到的挑战：

    高级功能与基础功能分离：电视用户是家庭用户，这样说明既有技能薄弱的妇孺老人儿童，也会有互联网及消费电视产品的熟练使用者。产品设计需要提供“傻瓜化”的效果，同时也需要让有一技之长的人能够参与互动，有更大的空间，建议：

    基础能力的设计要求简单可记忆，同时保留一些入口或者高级设置的触发可能来达到最终的平衡；

    提供更换主题的能力，让高端用户选择适合自己的“复杂”界面，同时具备有更多的自定义能力；

    输入法：电视遥控器的最大问题在于输入困难，而智能电视终端产品的最大特色在于海量和丰富的内容及应用，设计上建议：电视终端不直接提供中文输入法给用户，产品功能本身对于用户的输入行为做细分，提供解决方案而是解决过程的工具（如图8，通过首字母实现对于“成龙”相关内容的搜索）,另外现在也有很多产品采用创新的方式,比如手势、语音来辅助用户操控，不过从实际测试结果来看，这两种方式尚不成熟，离好用程度还有段距离。

    总结：到目前为止，智能电视终端产品及相关应用程序仍然有较高的”差评率“，其中很重要的因素是它们很多忽略了”电视化“的UI/流程设计，本文就智能电视终端产品设计中涉及到的使用环境、设计元素、界面要素及流程效果等提供了众多核心的意见和建议。需要说明的是，仅仅考虑这些点完成一个完整的产品设计是远远不够的，同时对于不同的电视终端产品来说，考虑到其可能差异化的产品定位和使用人群的细分，一些设计可能会是与本文描述完全差异的操作方式。不过从基础出发点和广义角度来看，根据电视的物理属性，电视人群的观看习惯和使用环境提供”定制化“的产品设计是一个智能电视终端成熟与否重要的标志，同时一些创新的操控方式有可能能彻底解决目前的一些设计上的“妥协”难题，大家翘首以待吧。

    未完待续！

    本文参考材料：
    1. 三星的用户体验指南
    2. 谷歌电视的设计指南

    流媒体网已刊发文章：
    《做用户喜欢的智能电视产品及服务系列一之概览》

    《做用户喜欢的智能电视产品及服务系列二之软硬一体化产品》

    《做用户喜欢的智能电视产品及服务系列三之“电视化标准”服务》

        即将登场的文章：

    《做用户喜欢的智能电视产品及服务系列之家庭化产品的精髓》
    《做用户喜欢的智能电视产品及服务系列之到底怎么“用”电视》

    本文作者说明：从事IP化电视服务行业多年,参与建设并设计了IPTV,互联网电视以及OTT系统和终端等直接面向用户服务的产品和相关模块，目前就职于MoreTV，司职产品经理。您可以通过新浪微博 @产品经理小桂子 与他获得联系。

责任编辑：lmtwadmin