OTT互联网电视界面视觉要素设计研究

【摘 要】目的：研究ott互联网电视这种新型智能产品界面设计当中的视觉要素设计规律。方法：以界面设计普遍运用的视觉元素分析方法对电视类产品界面视觉元素进行分析。将各类视觉元素在界面设计当中所经常运用的方法进行归纳总结，结合具体的界面视觉设计案例，对OTT互联网电视的界面设计进行具体分析，得出今后此类产品界面设计的规律。

【关键词】OTT 界面设计 视觉元素

引言

OTT互联网电视是近年来出现的一种新型智能家庭娱乐终端。在界面的视觉设计中存在一些基本的设计法则，这是我们在进行界面设计的过程中经常会运用到的。这些设计法则帮助我们能够合理安排界面空间，这是经过反复推敲后总结出来的形式法则。虽然在视觉设计过程中存在突破常规、创新设计的情况，但要想让用户无障碍地获取界面信息并合理解读，对设计法则的研究必不可少。

1 文字

文字是互联网电视界面设计中主要的可阅读视觉要素，主要作用是传递信息。由于电视界面的视觉特点及其使用环境的特殊性，互联网电视界面的文字都做到了言简意赅。设计者普遍将字体、字形、字号以及字间距作为设计的重点考虑。由这些因素决定了界面文字的整体风格及其对界面视觉效果的影响。

界面设计中所用的字体以无衬线字体为主。微软雅黑是运用较为普遍的，安卓系统中通常采用原生的Noto字体进行设计。在无衬线字体的基础上，字体笔画的粗细、色相、明暗程度等因素成为区分文字信息层次的重要因素。字体笔画弯曲表示字体较为柔和，刚劲的字体则给人工整的感觉。较粗的笔画表示信息着重突出，较细的笔画则给人轻盈纤细的视觉感受。

从图示可以看出，Noto字体和微软雅黑字形较为方正，适合作为一般界面的标题及正文使用，而Roboto字体则较为圆润，可在界面内具有宣传引导功能的图形上使用。方正兰亭系列字体在界面设计中可以用来表达不同质感的内容，粗体适合表达严肃主干的内容，细体则适合表达轻盈随意的内容。

2 色彩

在互联网电视界面设计中，色彩是超越文字与图形的、给人留下第一印象的视觉要素。色彩对于界面的影响体现在明度、纯度、色相等因素的对比与调和。通过不同层次色彩的搭配起到对界面空间层次的划分，体现色彩对于界面整体性的控制与影响，从而赋予界面空间特定的情感。

从色彩的视觉层次来讲，色彩不同的色相、明度、纯度等因素是造成视觉空间与影像空间层次的要素。暖色调使人感到温和，有亲近感，造成空间上的前进；冷色调使人感到冷酷，有疏离感，造成空间上的后退。纯度越高的色彩，越能引起人们视觉上的关注，因此图标往往使用纯色系。纯度越低，越适合做背景，因为背景需要能够衬托前景醒目。在界面的色彩搭配中，并不存在一定的规范，需要设计师根据界面整体风格的要求来进行搭配。如果想要清新活泼的视觉效果，那么就可以选择多用纯度较高的色彩。而如果想要低调奢华的质感，那么选用无色相搭配少量红或金则是常用的搭配。

3 质感

质感是指在界面设计中通过对视觉元素的设计与处理制造出与现实世界中相似物体的感受，是在界面设计中制造独特视觉语言的一种表现手法。对于质感的表现其根源是拟物化的设计风格。在电视界面的设计过程中经常用到的材质有透明玻璃、高光泽度金属、轻盈的磨砂冰以及布纹、木纹等质感。

对于材质的渲染可以提高界面视觉元素的真实性，使用户产生现实场景的代入感。对于初次使用互联网电视产品的用户来说，这种感受可以增加用户使用界面的趣味性与生动感。如果视觉效果创造得当，还可以增加用户对界面信息的捕捉速度。

4 ICON

Icon是指数字媒体界面中的数字化图形标志，作为用户图形界面的核心要素，在界面中起到识别和引导操作的功能性作用。在互联网电视的界面设计中，图标可以分为系统图标、程序图标、状态图标等。

对于互联网电视界面图标而言，由于主要功能都与播放、观看有关，因此需要将电视用户在观看电视节目过程中的视觉习惯考虑在内。电视用户由于天生具有的娱乐属性，因此更加需要简洁的视觉策略。一屏的图标数量不超过20个，一般在10到15个之间。在图标设计上一般会考虑以下几个因素。

（1）可读性：图标信息传达准确，不会使人产生误解、猜测或者无法理解的情况；（2）易用性：用户能够接受图标的样式并习惯于将图标作为引导操作的指示物，且便于用户培养出正确的使用习惯；（3）个性：虽然界面中的图标要求风格一致，但是在图标本身的设计中还是需要个性化的设计，以表达个性的视觉阅读和视觉表达；（4）延展性：图标在组成系列之后还需要考虑后期界面的维护与升级。因此，确定的图标风格需要能够便于后期延展。

结语

当今OTT互联网电视行业正处在激烈竞争的过程中，对于此类产品的界面设计理论总结还不够完善。通过这段时间对用户体验及界面设计相关理论的分析与研究，结合HG680项目的实际设计工作，对OTT互联网电视界面设计有了较为全面的认识。对于此类产品的界面，应当以用户为中心，分析界面设计中的信息架构、视觉风格、视觉元素设计、动态视觉设计等。其目的是为了使产品在激烈竞争的市场环境中真正将用户的实际需求与产品功能相结合，创造符合用户审美习惯与操作习惯的界面。

参考文献

[1]蔡琦.数字电视“杭州模式”范式价值探究[D].浙江大学，2010.

[2]马越.基于STi7109的高清数字电视机顶盒电子节目菜单EPG的实现[D].广西师范大学， 2010.

[3]邓婷.IPTV点播系统的研究与设计[D].中南大学，2008.

[4]张丽萍.数字电视电子节目指南可用性研究[D].大连海事大学图书馆，2007.

[5]奥维咨询.互联网电视渐入佳境[J].互联视界，2010，05（88）.81

[6]Nielsen，J.可用性工程[M].北京：机械工业出版社，2004.

[7]吴国荣.设计色彩[M].浙江工艺美术，2005，31（1）：65-67.

[8]Gena C.Designing TV Viewer Stereotypes for an Electronic Program Guide.Proc.8thLnt.Conf.on User Modeling， 2001： 274-276.