基于H5的“脱贫故事”公益广告设计应用研究 *——以凤岗村“鸭蛋奶奶”为例

张柔琪 郗彩莲 徐春鸽

（广东培正学院,广东广州 510830）

一、关于H5互动广告的发展现状

随着数据时代的发展，人们不再满足于传统媒体广告单一的表现形式，开始追求多元化的新电子媒体广告。H5互动广告就是基于此条件下应运而生的新电子媒体广告之一。HTML的全称是Hyper Text Markup Language，即超文本标记语言，是一种用来描述网页的语言。本质上就是通过浏览器的转码，最终实现在客户端看到制作者所设定好的图像及文字排版界面。

从广告学的角度来说，H5是互动式广告中的一种，所界定的标准就是“移动端、全屏、运用HTML技术的互动式广告”。H5互动广告也可称为是网页端的Microsoft Office PowerPoint。但它同与之相类似的产品相比，其时效性、灵活性、交互性，都可以说是独占鳌头的。此外，H5互动广告的低成本制作也为公益广告的推广锦上添花。

二、H5互动广告领先传统媒体广告的原因分析

H5互动广告是新电子媒体广告的代表之一，同时又涵盖了新电子媒体广告里恒河沙数的优点。基于传统媒体广告的四大传统广告形式（报纸、电视、广播、杂志）所发布的广告统称为传统媒体广告。H5互动广告与传统媒体广告相比，其后来居上的原因有以下几个点。

1.时效性

H5互动广告的出现，无疑是解决了传统媒体广告的这一倒悬之危。H5互动广告免除了传统媒体广告冗杂的发布过程，做到了真正意义上的“即做即发布”，突破了时间上的限制。同时，H5互动广告的即时修改还保证了信息根据实况去同步传递，这无疑是给受众的体验感画龙点睛。

2.灵活性

相比于传统广告，H5互动广告的灵活性之高抑是一目了然的。传统媒体广告所依托的载体通常为纸质或较大型的电子产品。据调查，中国网民使用手机的数据远超于使用其他电子设备。电子书籍等的出现，也使得人们不再过多地关注纸质版的书刊等。传统媒体广告因此受到了限制，其产生的蝴蝶效应便是传统媒体广告的被忽视。

反观H5互动广告，它不局限于特定的一个观看媒体载体，这使得它在一定程度上可以称之为是传统媒体广告的最佳补充。它覆盖了传统媒体广告难以达到的“灰色时间带（指上下班途中、午休等零碎的时间段）”。只需一部智能手机，便能随时随地地观看。不受载体、地点等条件的限制，时时处处都能观看。

3.交互性

H5互动广告的出现，使得信息传播的交互性有增无已。其一，H5互动广告让原本的单向传播转变为了双向传播，受众也从原来的接受者蜕变为接受者和发布者。这一微不足道的转变使其发生了翻天覆地的变化——在极大程度上调动了受众的积极性，从被动转变为主动地去关注了解信息。其二，由H5互动广告带出的第二主体的出现使得信息的传播从传统的一对多转变为新形式的多对多。这是依托于H5互动广告所提供的受众间的相互沟通。根据伊丽莎白·诺塔勒·诺依曼提出的“沉默的螺旋理论”，当受众的观点被其他传受主体所认同时，该受众会更为积极地对该信息进行传播，这无异于是一次免费的二次传播。由此观之，H5互动广告的交互性可谓是它与传统媒体广告二者间棋高一着之处。

三、H5公益互动广告的创新之处

H5互动广告的优势应用在公益广告上，其收效可谓是鼎铛有耳。而H5公益互动广告交口称誉之处正在于其独特的创新点。

1.通过即时传播带来曝光度的增加，解决燃眉之急

俗话说“酒香不怕巷子深”，但在现如今网购的时代，大众不再将口碑作为唯一购买力的缘由，反而出现了一种“酒好也怕巷子深”的现象。“鸭蛋奶奶”便是“酒香也怕巷子深”的典型例子——几十年的腌制老手艺由于缺乏销售途径以及销售经验而使得腌制的咸鸭蛋滞销。通过H5公益互动广告，将“鸭蛋奶奶”的脱贫故事传播出去，增加“鸭蛋奶奶”品牌的曝光度，促使更多人去了解以及购买该产品。不仅能够解决咸鸭蛋滞销的问题，还将这门传承了几十年的腌制手艺保留下来。从源头上解决问题，授人以渔而非授人以鱼。

2.便捷方式填补受众的空白时间段，宣传恰到好处

由于公益广告非商业化，使得其在传播的时间、方式等都与商业广告有一定的区别，这在一定程度上限制了公益广告的传播。除此之外，公益广告的公益性也体现在它的非强制性。基于H5公益互动广告的灵活性，“鸭蛋奶奶”通过其传播的便携方式，填补在了受众的空白时间段，同时又给予了受众选择的权利。既不会占据时间太长导致审美疲劳让受众失去观看想法，又不会局限观看地点导致观看受众的流失，宣传效果立竿见影。

3.通过情感共鸣来增加受众参与感，让其感同身受

公益广告最大的一个特点就是通过情感共鸣来打动受众，从而达到宣传效果。“鸭蛋奶奶”将整体故事以最为客观的第三方来描述，用最质朴的画面去打动受众。同时，通过交互技术让受众置身于该场景中，在交互的过程中去认识了解扶贫项目的实施全过程，而不再是局限于“听”和“看”。这不仅会让受众有强烈的参与感，而且也有了一个新的了解脱贫攻坚的途径。

四、凤岗村“鸭蛋奶奶”H5互动广告的视觉与交互设计

1.原画绘制

互动广告能吸引受众的目光不单单在于其技术层面的水平，在很大程度上还取决于原画绘制的美感。受众群体不是行业内的专业人士，其评判作品标准只有画面是否感受到舒适。由此观之，原画绘制是视觉设计里的重中之重。

在确定好故事整体走向并查阅完相关资料后，对画面所需要出现的内容进行筛选，最终确定好并绘制出草图。通过数位板与电脑绘图软件相结合，对草图进行二次加工。绘图过程中要确保风格的一致，还要确保画风的准确性。“鸭蛋奶奶”是传播脱贫攻坚的公益互动广告，故而在整体的绘制上，要体现出其质朴、温存的画面。

完成原画绘制之后，在实现时再加入一些交互效果。例如通过自行滑动屏幕来使画面出现，这不但能让受众在拖动的过程中去主宰画面出现的进度，同时又会对未出现的画面产生兴趣。巧妙地运用“钓鱼效应”去吸引受众的关注，让他们更多地去接收互动广告里传递的信息。

2.UI界面设计

UI即User Interface的简称，俗称用户界面。它是互动广告与受众之间的联系。从艺术的角度来说，UI界面的整体设计是受众直观的第一印象，同时也奠定了整个互动广告的基调；从实用角度来说，UI界面的设定是给受众的一个“指路牌”，它提炼出互动广告最精简的事情——主题、整体风格走向以及观看方式等。

（1）加载界面

加载界面是一个缓冲过程，此时的整体界面不能太过于单调，否则会消磨受众耐性，对后续内容失去观看兴趣。但也不能过于花里胡哨，否则难免会有些剖腹藏珠。

在渐变的背景里加上此次互动广告主角，通过交互让其转动起来，并在文字交互上设置强调，从视觉上冲击受众视线。再辅以对这个互动广告内容的简单介绍，让受众有所了解，知道自己在等待些什么，不会有“君问归期未有期”般的疑惑之感。

（2）开始界面

在一定程度上可以将开始界面当作是这个互动广告的门面担当，抑或是这个互动广告的一个小海报。它也直观地告诉受众这个互动广告的主题。故而画面的色彩搭配都要符合整体的内容，排版方面也要做到简洁大方。

画面巧妙地应用互动广告里主角的图案来代替一些内容以及通过交互技术让文字根据笔画出现。不仅增添一些趣味性，也更符合互动广告的内容。除此之外，再利用互动广告中的交互技术让点击开始的按钮浮动。这一小小的交互不单单是为了让受众能有参与感，同时也在视觉上提醒了受众去点击这个按钮开始观看互动广告，给足了受众缓冲与反应的时间。

（3）引导界面

引导界面是受众观看互动广告的指南，它将互动广告正片里所应进行的操作提前传递给受众，让其潜意识里形成记忆，有利于受众后续观看互动广告。此外，引导界面里的内容要遵循“避繁就简”原则。文字方面要始终记得言简扼要，让受众看一眼就能抓取到信息。

画面将接下来受众应该如何让互动广告进行的字眼简要地写在画面上，使受众洞若观火。但单一的文字会使得整体画面索然无味。基于此基础，再联系互动广告的内容，在字体下方绘制表情可爱、体态简单的咸鸭蛋，将其拟人化。在交互上，使咸鸭蛋有上走的趋势，给受众一种推动上方文字的感觉。灵动之余又令人期待后续咸鸭蛋的发展。

（4）结束界面

结束画面代表着整个互动广告的尾声，这里与影视画面的结尾部分有着异曲同工之处，都是对于整体的一个收尾。但互动广告不同于影视的一点是——大多数互动广告会在结尾的时候去引导受众对其进行二次传播，以达到更好地宣传效果，故而，我们也可将其称为是二次传播分享界面。

考虑到“鸭蛋奶奶”的互动案例正片的最后一帧是以书信的方式来呈现的这一特殊性，此处的结束画面将会基于互动广告正片里的最后一帧画面上的展现。首先，将最后一帧的画面模糊化，再加入一些引导分享的内容绘制以及在文章末尾标明此互动广告所引用的素材。将画面模糊化而非直接替换是为了让受众更具有连贯性，不会一下子很突兀就转换了画面。

五、结语

时代日新月异发展，H5互动广告与受众群体之间独特的黏带性，使其在传播方面以及宣传点内化方面，都众口销金。基于此基础的互动公益广告打破了常规的新媒体运行，带给了受众全新的体验感。此外，文章中所引用的“鸭蛋奶奶”例子是第八届全国高校数字艺术设计大赛华南赛区二等奖兼全国赛区优秀奖，具有现实参考价值的。假以时日，公益广告与H5互动广告的结合必然如鱼得水。