Html5互动广告在移动终端的用户体验探究

张扬扬

（首都师范大学 美术学院，北京 100048）

随着网络基础设施的不断完善和信息技术的发展，客户端就技术逐渐从传统的基于C/S结构①的交互模式向B/S结构②的交互模式而转变。在B/S架构下，用户无需针对每一类服务安装相应的客户端软件，而只需使用浏览器这一软件即可通过不同的网页访问服务端的应用，因此相比较C/S架构，B/S架构更加方便，因此媒体运作模式也随着用户使用习惯发生着变化。由成本高、投放时间长、仅停留在展示层面上的传统广告向成本低、投放时间短、交互体验方式多的HTML5新型广告形式转变。

一、移动端HTML5广告

HTML5广告是一种基于HTML5编程语言技术体系的互联网广告，现泛指那些在社交媒体中，如微信，传播带有特效（如爆炸等）、互动效果的移动网页广告形式。它以多元化的表现方式，插入动画图像、音频等元素，通过有趣的互动，让用户接收到不同的感官体验参与其中，避免传统广告带给用户与自己无关的感觉。一个传统广告的上线，有复杂的审批流程，相比之下，HTML5广告做好后生成链接，直接分享就能达到传播效果，成本相对较低、开发周期较短；对于用户而言，HTML5广告操作简单方便，可以在使用的过程中，主动的、有选择性的了解产品的相关信息，这种广告形态增加了用户的沉浸度及主动性。

二、 移动端HTML5广告的交互设计形式

（一）情境体验形式

情境体验形式是指通过营造情氛围为用户“还原”真实情景，让用户在观看这类广告与之交互的过程中产生身临其境之感。以2017年3月由人民日报发布的“两会邀你加入群聊”（图1）为例。这款广告采用大家熟知的微信群聊与朋友圈评论这两种模式作为内容展示，这种形式区别于以往冗长的大段文字的广告形式，让用户在阅读的过程中了解两会所提出的民生问题与问题改革，达到广告传达信息的目的。进入广告，首先映入眼帘的是用户最熟悉的手机开机虚拟场景，输入0305所代表会议召开时间的密码后进入“群聊”，在“群聊”中领导人提出民生问题，聊天结束后跳转到朋友圈，可以查看更多两会内容。

> 图1“两会邀你加入群聊”

> 图2“不是10年老司机真心玩不了H5”

> 图3“谢谢，妈妈”

在这个广告设计中开锁界面还原了用户使用手机时最常见的场景，逼真的微信界面以及朋友圈评论场景让用户主动参与到这个场景之中。将两会中所提出的政策改革简洁易懂的表达出来，成功的吸引用户的注意力。这款广告成功地解决了传统广告大段文字堆砌到文章里，用户难以抓住重点等问题。生活场景和广告信息的巧妙地结合，根据用户思维和互联网思维，引导用户无意识地进入场景，增强用户体验感受。

（二）游戏互动形式

游戏互动形式是通过游戏的方式，与用户参与其中。现如今用户对于产品使用的要求已经不再局限于功能性，更多转向产品所带来的体验性上，若将广告与简单有趣的小游戏结合起来，那么更容易刺激用户的好奇心，加深对产品的印象。

“腾讯：不是10年老司机真心玩不了H5”（图2）是腾讯游戏为宣传互娱平台在年度发布会做的宣传推广，宣传的主题是研发一款真正陪孩子们的成长型玩具。在这则HTML5广告中，用户通过不断寻找卧室中的能提供密码线索的儿时用品，如复读机、诺基亚手机等，寻找到密码后最终打开出去的密码门。

从交互形式上来看，这则广告更像是一个密室逃脱游戏，广告的设计是在不断引导用户去探索游戏里设置的机关，最终打开游戏中能走出去的门后，便了解到腾讯互动娱乐平台的主题。整个设计让用户不觉得是在看一则广告，在玩游戏中达到宣传目的。

（三）情感触动形式

情感触动形式是指通过广告所蕴含的情感意义，对广告的受众进行情感刺激，进而达到传递广告内容的的一种广告形式。什么是情感？心理学家将其定义为“人对客观现实的一种特殊反映形式，是人对于客观事物是否符合人的需要而产生的态度体验”③，情感决定了人对外界事物的精神体验。情感化设计可以赋予广告更多的感动点，拉近与受众之间的距离，增强了宣传力度，更重要的是唤起受众的情感认知，得到受众心理的认可。

在母亲节时期洗衣粉品牌奥妙推出“谢谢，妈妈”（图3），这是一个宣传奥妙新推出的一款洗衣液的广告，旨在通过在母亲节对母亲的思念达到宣传其洗衣粉产品的效果。进入这则广告后，出现一段视频，视频内容是询问被采访的对象是否为妈妈洗过衣服以及妈妈为你洗过多少衣服，进而回忆妈妈对自己的爱。广告的最后是进入奥妙京东自营店，可以购买洗衣粉为妈妈洗一次衣服。

“你为妈妈洗过衣服吗？”简单的问题里透出的是妈妈对自己多年来默默的爱，以及自己对这些爱的忽视。这则广告主题很鲜明，孝顺父母要落实到行动上，广告内容也很简单，形式也是常见的内嵌视频形式，但却触动用户情感、引人深思。

三、移动端HTML5广告中的用户体验

用户体验是指用户在使用产品过程中所产生的感受。直到2004年，唐纳德·诺 曼《情感化设计》的问世，标志着情感化设计研究从幕后走向台前。诺曼提出，产品设计应该解决三个不同层次的认知和情感处理过程，即“本能层、行为层和反思层”。在信息爆炸的时代中的虚拟产品，不同于现实产品有“说明书”，用户在使用过程中只能根据自己的经验和习惯自助地来使用，如果在使用过程中，用户觉得操作过于复杂，或是对该产品不感兴趣，那么用户就会慢慢选择放弃对它的使用。HTML5广告也是一种虚拟的、自助的互联网产品，因此在设计广告时应结合用户体验的相关理论，满足用户的各层次的需求，深化用户体验。

（一）媒体广告中的感官体验

本能层次是人们看到实物的初始效果，是第一印象，给人直接的感官刺激。感官体验是调动了视觉、听觉、触觉等感觉来体验和认识这个世界。在媒体互动广告设计中，感官体验通常指的是从独特的视角出发，以一种切身体验的方式，广告所带给用户的视听体验。比如界面用色是否合理、效果音乐是否吸引等，从而进行下一步的体验阶段，增加对产品的认识。

以搜狗推出的一款互动HTML5广告“唐朝有嘻哈”为例（图4），进入广告点击“开始表演”播放视频。视频讲述的是盛世唐朝时举办的诗词大赛，选手是李白和杜甫，在选手各对诗一句被评委说没有新意后，接下来两位选手开启说唱模式。在视频结束时，画面中有诗词以弹幕的形式飘过，用户可以点击感兴趣的诗词，体验搜狗翻译工具翻译的英文诗词。

首先，广告在视觉设计上，采用了与当时热播综艺节目“中国有嘻哈”舞台效果相近的色彩和风格，并巧妙地结合了中国传统元素——皮影进行手绘制作，画面精美，制作精致；其次在听觉上，广告大量引用了节目中说唱的方式，将诗词、英文伴随着音乐快速地、押韵地说唱出来，给用户呈现了一个酷炫又有趣的比赛。这种从视觉、听觉等感官直觉引发的刺激，从而有效地调动用户的积极性。

（二）媒体广告中的行为体验

> 图4“唐朝有嘻哈”

> 图5“你敢在办公室里变瘦吗？”

> 图6“‘手心’手霜：我说手心你说哟！”

行为层设计与用户的使用、操作有关，关注的是用户在与广告行为互动时所产生的感受和体验，如使用过程中操作是否方便、逻辑是否合理等。在移动设备中我们运用点、滑等手势直接触摸屏幕，代替了传统的媒体设备使用鼠标进行点击和浏览，因此现在的移动设备能为用户带来更直接、更真实的操作体验。

Juice Up是一个排毒蔬果汁的品牌，倡导定期以果汁代替一日三餐，通过轻断食和新鲜蔬果汁维持身体功能，进而达到减肥的效果。进入它的广告页面时（图5），用户会被问道“敢在办公室里变瘦吗？”，用户可以选择“敢”或“不敢”，如果选择不敢，会被告知“胆小鬼请关闭页面”；如果选择敢则会进入到下个页面。此时看到一个运动型的美女引导你拿着手机做她给出的动作，做完一套动作后便可以激活这套蔬果汁。在广告最后还附带一个给同事倒果汁的双屏互动小游戏，用一部手机在另一部手机上方作出倾倒动作，上方手机所图示杯子中的“果汁”会流入下方手机图示的杯子中，进而完成分享任务。

这则应用重力感应④的广告，模拟生活中倒果汁的场景，大大提高了广告的可玩性和趣味性。因此，设计师在进行移动端HTML5广告的交互性设计时，应尽可能地模拟现实生活中熟悉的操作，保证用户在操作过程中更便捷、真实。

（三）媒体广告中的情感体验

反思层是意识、情感和情绪认知的最高水平，常常决定用户对某个产品的整体印象，能让用户通过精神的观照与某种特定的意义联系在一起，帮助人们做出决策。反思层的设计更注重的是信息、文化以及产品给人的感觉，例如相宜本草在2015年中秋时节推出的一款手机HTML5广告“‘手心’手霜：我说手心你说哟！”（图6）

进入广告以后，首先出现的是一个带有“你有多久没回家了？”的页面，接下来会看到带有中国元素表现形式的中秋农历界面，出现一组来自全国各地老乡们的问候视频，视频中老乡们用当地方言送出对故乡和亲人的思念和祝福。在广告的最后，可以借此机会，录上一段乡音，跟亲朋好友们唠唠家乡话。这则广告的成功之处在于把住了用户的情感需求。用户通过参与后触及用户内心，进而引起情感共鸣，通过内容传递、宣传产品，并最终促使用户产生消费行为。

结语

以上是基于移动端互动媒体广告——HTML5设计用户体验的一些案例分析和研究。从新时代的消费者行为来看，消费者们越来越重视产品所带来的体验。因此媒体广告在进行推销的同时，如何运用情境体验、游戏互动、情感触动等形式来建立更好的体验方式是未来在进行广告设计和策划时需要考虑的思路，同时，设计师应该在设计的每一环节中都将用户考虑在内，从“本能层、行为层、反思层”三种层次中来抓住用户心理，提高用户粘度，提升广告传播效果。■

注释:

① C/S架构是指客户端/服务器（Client/Server）架构，客户端指客户端软件，在这一类架构下，用户通过计算机安装的客户端软件来访问服务器端的服务。

② B/S架构是指浏览器/服务器（Browser/Server）架构，用户通过浏览器以网页的形式访问服务器端的应用。

③ 谢传伟.情感化设计在用户体验中的运用[J].设计，2014（2）：21-22.

④ 重力感应：重力感应是指通过对力敏感的传感器，感受手机在变换姿势时重心的变化，使手机光标变化位置从而实现选择的功能。