张耿 项洋

摘要：通过对现阶段移动端游戏互动式H5广告的发展现状介绍、对具体案例进行深层次的分析思考，为移动端游戏互动式H5广告提供有效的设计策略。通过用户体验的感官体验、情感体验、思维体验、行为体验、关联体验要素来分析具体游戏互动式广告的案例进行研究。得出适合移动端游戏互动式H5广告的具体设计策略。该方法从用户的体验角度出发，从而更好地突出品牌化设计理念和人性化用户体验。

关键词：HS广告 游戏互动式 体验

中图分类号：TB47 文献标识码：A

文章编号：1003-0069（2020）02-0131-03

引言

H5广告是依托于HTML5技术而实现的移动端网页广告。在国际上没有出现此类名称，而是国内比较流行的说法，是方便用户记忆和理解的。HTML5广告是从2014年兴起，与传统广告不同的是，HTML5广告融合了视觉、技术、文字、动画效果、音效效果、视频等多个维度丰富的设计表现形式，并通过微信、微博等社交公众平台发布信息和宣传活动以及结合有趣的交互方式来带动用户参与到品牌宣专的中。

一、H5广告在国内的发展现状

“围住神经猫”的这款H5小游戏自2014年7月在微信朋友圈传播开来，3天就突破了上亿点击量。HTML5广告自此在移动端广告界成为商业活动中最重要的营销模式和营销手段。经过4年的发展和变化，2018年2月，北京草莓音乐节互动式HTML5广告再一次刷爆朋友圈，北京草莓音乐节完美利用了移动优先、产品社会化、交互趣味化的三大优势在微信平台引发病毒式的分享行为，成功地向广大群众宣传了草莓音乐节的品牌文化，以及让所有大众都有一颗rock的心，每个人在草莓音乐节都可以很酷，成为了引人侧目的行业热点。

二、游戏互动式H5广告

（一）互动式H5广告的表现形式

微信互动型HTML5广告大致分为四种表现形式：游戏互动式，符号动态页面，交互式动画和功能性交互式页面，广告方可以选择不同的互动类型来适应自己的品牌需求。游戏互动式广告在于游戏互动的趣味性设计，用游戏化的方式让用户沉浸其中，以使用户忘记广告信息。将广告宣传信息融入到游戏中去，让超强趣味的游戏吸引用户的眼球，可以让用户自动浏览广告信息。符号动态页面可以利用页面中的文字、logo、图形等页面变化及刺激其他感官的效果来提高与用户的体验，符号动态页面类似于PC端的幻灯片形式，因为其简单的传达方式被广泛使用。交互式动画广告类似于动画，但是还具有丰富的交互方式，能够更加直接地通过交互手法表达广告信息以及品牌文化元素，具有较高的商业价值。功能性交互页面是将其变成传达信息的一种传播方式，在宣传活动时可以兼顾后台报名，整理数据等功能，能够满足大众的基本需求，促使大众二次使用此功能，达到持续不断的传播效果。

（二）游戏互动式H5广告优势

游戏互动式H5广告是移动端H5广告的表现形式之一，本质是利用游戏化的思维来解决广告信息的问题。对于增加用户黏性游戏化的互动体验拥有绝对优势。以游戏化的方式作为根本，让用户在观看或者体验的过程中不自主地进入广告主设的游戏中去，以此来增加用户对广告的友好度，并且避免了用户对广告的抵触情绪。除了用游戏的方式来吸引用户之类，很多广告主还会在H5广告中增加故事情节，以故事的形式带动用户增强代入感，让用户能够参与广告内容的个性化游戏方式，极大地增强了用户的选择性和游戏自主性。

（三）游戏互动式H5广告的体验层次分析

1.感官体验

在广告中，多重的感官体验可以引起用户的情感，这对于品牌形象的建立，深化用户的品牌记忆非常重要。移动端游戏互动式H5广告的感官体验主要是视觉、听觉元素，通过图形、色彩、版式、音效等元素营造良好的视听感受，让用户兴奋满意、从而产生共鸣。《创造「我」的草莓音乐节》是以标题让用户产生自我意识从而引发用户的好奇心。首屏是类似于“脸萌”的人物选择页面，静态的图文形式加载较快，可缓解用户的等待耐心。用户的注意力很容易受到移动场景的变换而分散，《创造「我」的草莓音乐节》如图1所示，采用视听结合的方式，产生临近感，方便用户用视听两种感官随时切换并加深感官体验层次。

2.情感体验

随着社会的不断发展，用户除了注重产品的性能和特点，更看重产品或服务给自己带来的附加值，也就是找到产品、服务、广告与自己情感的一种共鸣，这会深深影响受众对广告、产品和服务的评价及选择。图2中《2018汪年全家福》中的亮点是H5人物制作，并且可以装饰自己的家，人物制作的每个部分都有几十种的选择，可供用户制作生成完全不同，各具风格的人物形象，让用户在体验的过程中感受到自己是在为过年装饰自己的家，增强用户的存在感及代入感。

3.思维体验

很多H5广告都是强行给用户输入品牌活动或者信息，都是单向性的传播，很少有用户会去转发传播，而宝马的H5广告如图3所示，摒弃传统的图文展示方式，以场景模拟这种创意因其用户的兴趣分散，极大的广告通过「我」这个标题极大地吸引了用户关注，用户被这种创意有趣带来的新鲜感激起了用户的兴趣。集中用户的注意力，使思維更具创意，在思考后对宝马的全新产品有了更好的认识，这就是营造思维体验的目标。

4.行为体验

《纪念哈利·波特20周年》中如图4所示，是通过动作交互和图像交互来增强用户与广告之间的行为交换动作，用户可通过点击、上下滑动的手势自然完成，并根据用户的行为进行图像交互，产生图形图像间的交互行为。用户在滑动、点击的同时，文字便会有破碎、移动等效果，这就使用户亲身参与到广告之中，帮助用户更好的理解广告的内容信息。

5.关联体验

《创造「我」的草莓音乐节》选择在微信朋友圈中做爆款H5广告，首先，定位人群受众在青年中，用户将自己与自己所喜欢参加的音乐节联系起来，既可唤起用户的归属感，还可以让用户在社交圈分享转发，吸引更多的年轻用户，营造沟通互动的环境，形成共识。

三、游戏互动式HTML5广告的设计原则

（一）互动多样原则

移动端广告相比于传统广告最大的区别是交互方式，不同的交互方式和方法会促使用户转被动为主动，让用户从“接收者”中跳出来，转而变为“创造者”。如上文中介绍的《纪念哈利·波特20周年》中采用了文字随屏幕倾斜，滑动屏幕文字破碎，自行画符咒等互动手段，带领用户进入真正的魔法世界，该H5以全新的互动形式在朋友圈中刷屏式的出现，形成极大的传播量。

（二）感官平衡原则

游戏互动式H5广告依靠HTML5技术来模拟交互游戏的场景，体验经济的到来促使我们也不仅仅只是通过眼睛来单方面的观看广告，而是通过多感官（视觉、听觉、触觉等）来实现游戏环境中的交互行为，让用户自然地融入到广告中去。所以基于多感官的设计因素，设计广告不能单单重视视觉画面，还要兼顾听觉，运动觉，神经觉等感官知觉，全新BMW M2预售的H5如图3所示，在点击车这个图案时有发动机的有震动反应，并且伴随着声音提示来代表已完成操作，因为其他感官的感知在游戏互动式H5广告中其也同等重要，通常品质感、体验感较好的游戏互动式H5广告中都少不了全方位的感知效果。

（三）简化层级原则

移动端科技的发展让广告信息发生了巨大的变化，不同的数字传播方式有着不同的特性，同样也就意味着有着不同广告分级方式。现阶段H5广告微信朋友圈中传播的，而朋友圈内页面分级是呈直线分级的，对于广告信息的阅读及交互方式只能通过少量的按键进行线性选择。应该在设计之前抓住用户的认知心理特征，逻辑严谨的构建整个广告的框架和層级，明确视觉导向流程，为了方便引导用户体验，可增加些动效形式来凸显信息的重要性。在2018汪年全家福的H5广告中利用简洁一段式选择界面，选择性别，选择衣服，生成自己的海报这种在同一页面内线性的方式很容易操作，更容易使用户适应。

（四）品牌融入原则

商业广告的创新重点即是将广告主的品牌文化嵌入到广告中去，品牌文化的不同，可以促使更多不同新奇的创意设计，让广告融入到设计中去，使二者完美融合。首先，从宏观因素来说，广告中的主题及色彩应该融入品牌的代表性元素，如2018草莓音乐节中以其代表性草莓作为等待页面，让品牌元素融入H5广告中，这是广告创新的关键;第二，依据品牌的视觉识别系统，广告中的视觉效果应与之相符合，这样更容易加深用户对品牌的认识，草莓音乐节在2018年的对外输出形象依旧是草莓，所以在每个页面中，都有体现strawbeery的logo，并且主题背景选择的也是今年的主题色明黄色;第三，区别于其他竞品的关键要素就是视觉的差异化，所以要做大量的竞品分析，总结竞品的品牌定位，以及对外的视觉产出，分析用户对于该品牌的视觉印象。规避相似的视觉形象，得出最贴近自己品牌且区别于其他竞品的视觉风格。迷笛音乐节和草莓音乐节是竞品，但迷笛音乐节给大众的印象是黑绿色为主的品牌形象，草莓音乐节则是草莓星球的各种衍生品，它把握住了具有强烈代表性的草莓符号元素，基于草莓元素衍生出一系列草莓音乐节产品，这种设计再次加深了用户对品牌的印象。

四、游戏互动式广告的设计策略

（一）运用多交互手段提高用户粘性

交互形式不仅局限于视觉、听觉上，还应通过多感官体验来实现游戏环境中的交互行为，比如重力感应、体感控制、拍摄功能等多种互动形式的整合，多感官并行的体验模式既可以增加广告的趣味性，又可以提高用户对此广告的黏性。然而用户黏度正是品牌忠诚度的重要支撑依据，用户参与度和留存度是用来评价用户黏度的评判标准，同时与用户的转换成本成正比，交互元素的多少对用户黏性产生至关重要的影响。一个有趣的交互方式或者互动形式，会让用户有情感和行为上的交流，让用户有身当其境的感受，这就增加了用户黏度。H5广告的互动体验形式可以为品牌在产品之外增加乐趣，让用户对品牌的忠诚度再次增加。

（二）增加故事情节，提升用户代入感

游戏互动式H5广告需提高广告的故事情节设计，让用户与H5广告产生互动性的参与性设计。超强的代入感需要多感官体验的融合，另外，还需结合该品牌产品的特殊性来设置互动的方式，提高用户体验效果。如图5所示，2018草莓音乐节年度主题「我」用户可通过生成自己的形象，形成自己独具一格的入场券，使用户身临其境。类似于曾经的变装小游戏中选择自己喜欢的服饰配饰，根据自身的形象选择自己的搭配，让用户感到这就是我的形象，提高游戏的代入感。

（三）提升HTML5技术以实现更好的用户体验

H5广告不仅有基本的图文功能，还有更高的技术来实现更好的用户体验，如摇一摇、重力感应、场景模式等多种互动方式。以此来营造更加丰富的互动形式来增强用户体验。但是并不能过度重视互动形式，忽视最该关注的战略层及范围层，这是一种本末倒置的行为。H5广告应该在战略层范围层结构层都合理的范围内，合理地运用交互手段，以此为用户提供有逻辑有内容有趣味的H5广告在。探索更多的日丁ML5技术，从而实现更多不同的交互形式及手段，如图6所示，可以用过屏幕画符号让屏幕的图形动起来，可以突破屏幕浏览的界面，实现重力感应等方式。

（四）定准目标人群，提高投放精准度

H5广告之所以能瞬间成为爆款，或者说能被用户所熟知，绝大部分是源于精准的投放力度，将目标用户群体的用户画像以逻辑思维导图的方式整理出来，比如，目标用户群里的年龄段、经常使用的聊天软件、所搭乘的交通工具、活动范围等。根据不同的目标人群，设计不同风格的游戏互动型H5广告。2018年草莓音乐节的主要目标人群是18-30岁，热爱音乐，个性十足的年轻人，所以H5广告会选择游戏互动型的形式，且完全满足了个性十足的用户来自己搭配自己所独具一格的穿搭方式。

结语

在这个移动时代，数字媒体已是主流，游戏互动式HTML5广告为了更好地提升网络广告的质量，帮助企业和品牌的宣传，完善用户体验。但是仅从游戏机制的创新是无法从根本上实现创新发展。要合理利用用户的情感以及其心理规律，从而打造出契合品牌本身的表现形式来打动用户，最终实现艺术价值和商业价值的统一，更有利地推广和服务于品牌。

参考文献

[1]中国互联网信息中心，第40次中国移动互联网发展状况报告[R].中国互联网信息中心，2017

[2]杜蔚苗.移动终端H5广告互动页面设计研究[D].湖北工业大学，2017.

[3]李青.互动广告新形式——H5广告研究[J].新闻研究导刊，2016，7（09）：286.

[4]刘文勇.新时代传播的宠儿一一病毒式传播[J].东南传播，2007（09）：54-55.

[5]郑闵谦，郝珊，朱华.移动端HTML5场景型广告设计研究[J].设计，2017（23）：144-145.

[6]刘寒韵.移动端界面设计趋势研究[J].设计，2017（12）：110-111.

[7]杜蔚苗.移动终端H5广告互动页面设计研究[D].湖北工业大学，2017.

[8]毓鑫，黄弘.基于移动互联网环境下的H5设计形式探究[J].设计，2016（23）：134-135.

[9]李青.互动广告新形式——H5广告研究[J].新闻研究导刊，2016，7（09）：286.

[10]张振东.游戏化视角下的互联网产品设计策略研究[D].江南大学，2015.

[11]刘辰.交互广告设计[D].大连工业大学，2013.