基于H5的“脫貧故事”公益廣告設計應用研究 *
——以鳳崗村“鴨蛋奶奶”為例

張柔琪 郗彩蓮 徐春鴿

（廣東培正學院,廣東廣州 510830）

一、關于H5互動廣告的發展現狀

隨著數據時代的發展，人們不再滿足于傳統媒體廣告單一的表現形式，開始追求多元化的新電子媒體廣告。H5互動廣告就是基于此條件下應運而生的新電子媒體廣告之一。HTML的全稱是Hyper Text Markup Language，即超文本標記語言，是一種用來描述網頁的語言。本質上就是通過瀏覽器的轉碼，最終實現在客戶端看到制作者所設定好的圖像及文字排版界面。

從廣告學的角度來說，H5是互動式廣告中的一種，所界定的標準就是“移動端、全屏、運用HTML技術的互動式廣告”。H5互動廣告也可稱為是網頁端的Microsoft Office PowerPoint。但它同與之相類似的產品相比，其時效性、靈活性、交互性，都可以說是獨占鰲頭的。此外，H5互動廣告的低成本制作也為公益廣告的推廣錦上添花。

二、H5互動廣告領先傳統媒體廣告的原因分析

H5互動廣告是新電子媒體廣告的代表之一，同時又涵蓋了新電子媒體廣告里恒河沙數的優點?；趥鹘y媒體廣告的四大傳統廣告形式（報紙、電視、廣播、雜志）所發布的廣告統稱為傳統媒體廣告。H5互動廣告與傳統媒體廣告相比，其后來居上的原因有以下幾個點。

1.時效性

H5互動廣告的出現，無疑是解決了傳統媒體廣告的這一倒懸之危。H5互動廣告免除了傳統媒體廣告冗雜的發布過程，做到了真正意義上的“即做即發布”，突破了時間上的限制。同時，H5互動廣告的即時修改還保證了信息根據實況去同步傳遞，這無疑是給受眾的體驗感畫龍點睛。

2.靈活性

相比于傳統廣告，H5互動廣告的靈活性之高抑是一目了然的。傳統媒體廣告所依托的載體通常為紙質或較大型的電子產品。據調查，中國網民使用手機的數據遠超于使用其他電子設備。電子書籍等的出現，也使得人們不再過多地關注紙質版的書刊等。傳統媒體廣告因此受到了限制，其產生的蝴蝶效應便是傳統媒體廣告的被忽視。

反觀H5互動廣告，它不局限于特定的一個觀看媒體載體，這使得它在一定程度上可以稱之為是傳統媒體廣告的最佳補充。它覆蓋了傳統媒體廣告難以達到的“灰色時間帶（指上下班途中、午休等零碎的時間段）”。只需一部智能手機，便能隨時隨地地觀看。不受載體、地點等條件的限制，時時處處都能觀看。

3.交互性

H5互動廣告的出現，使得信息傳播的交互性有增無已。其一，H5互動廣告讓原本的單向傳播轉變為了雙向傳播，受眾也從原來的接受者蛻變為接受者和發布者。這一微不足道的轉變使其發生了翻天覆地的變化——在極大程度上調動了受眾的積極性，從被動轉變為主動地去關注了解信息。其二，由H5互動廣告帶出的第二主體的出現使得信息的傳播從傳統的一對多轉變為新形式的多對多。這是依托于H5互動廣告所提供的受眾間的相互溝通。根據伊麗莎白·諾塔勒·諾依曼提出的“沉默的螺旋理論”，當受眾的觀點被其他傳受主體所認同時，該受眾會更為積極地對該信息進行傳播，這無異于是一次免費的二次傳播。由此觀之，H5互動廣告的交互性可謂是它與傳統媒體廣告二者間棋高一著之處。

三、H5公益互動廣告的創新之處

H5互動廣告的優勢應用在公益廣告上，其收效可謂是鼎鐺有耳。而H5公益互動廣告交口稱譽之處正在于其獨特的創新點。

1.通過即時傳播帶來曝光度的增加，解決燃眉之急

俗話說“酒香不怕巷子深”，但在現如今網購的時代，大眾不再將口碑作為唯一購買力的緣由，反而出現了一種“酒好也怕巷子深”的現象?！傍喌澳棠獭北闶恰熬葡阋才孪镒由睢钡牡湫屠印獛资甑碾缰评鲜炙囉捎谌狈︿N售途徑以及銷售經驗而使得腌制的咸鴨蛋滯銷。通過H5公益互動廣告，將“鴨蛋奶奶”的脫貧故事傳播出去，增加“鴨蛋奶奶”品牌的曝光度，促使更多人去了解以及購買該產品。不僅能夠解決咸鴨蛋滯銷的問題，還將這門傳承了幾十年的腌制手藝保留下來。從源頭上解決問題，授人以漁而非授人以魚。

2.便捷方式填補受眾的空白時間段，宣傳恰到好處

由于公益廣告非商業化，使得其在傳播的時間、方式等都與商業廣告有一定的區別，這在一定程度上限制了公益廣告的傳播。除此之外，公益廣告的公益性也體現在它的非強制性?；贖5公益互動廣告的靈活性，“鴨蛋奶奶”通過其傳播的便攜方式，填補在了受眾的空白時間段，同時又給予了受眾選擇的權利。既不會占據時間太長導致審美疲勞讓受眾失去觀看想法，又不會局限觀看地點導致觀看受眾的流失，宣傳效果立竿見影。

3.通過情感共鳴來增加受眾參與感，讓其感同身受

公益廣告最大的一個特點就是通過情感共鳴來打動受眾，從而達到宣傳效果?！傍喌澳棠獭睂⒄w故事以最為客觀的第三方來描述，用最質樸的畫面去打動受眾。同時，通過交互技術讓受眾置身于該場景中，在交互的過程中去認識了解扶貧項目的實施全過程，而不再是局限于“聽”和“看”。這不僅會讓受眾有強烈的參與感，而且也有了一個新的了解脫貧攻堅的途徑。

四、鳳崗村“鴨蛋奶奶”H5互動廣告的視覺與交互設計

1.原畫繪制

互動廣告能吸引受眾的目光不單單在于其技術層面的水平，在很大程度上還取決于原畫繪制的美感。受眾群體不是行業內的專業人士，其評判作品標準只有畫面是否感受到舒適。由此觀之，原畫繪制是視覺設計里的重中之重。

在確定好故事整體走向并查閱完相關資料后，對畫面所需要出現的內容進行篩選，最終確定好并繪制出草圖。通過數位板與電腦繪圖軟件相結合，對草圖進行二次加工。繪圖過程中要確保風格的一致，還要確保畫風的準確性?！傍喌澳棠獭笔莻鞑ッ撠毠缘墓婊訌V告，故而在整體的繪制上，要體現出其質樸、溫存的畫面。

完成原畫繪制之后，在實現時再加入一些交互效果。例如通過自行滑動屏幕來使畫面出現，這不但能讓受眾在拖動的過程中去主宰畫面出現的進度，同時又會對未出現的畫面產生興趣。巧妙地運用“釣魚效應”去吸引受眾的關注，讓他們更多地去接收互動廣告里傳遞的信息。

2.UI界面設計

UI即User Interface的簡稱，俗稱用戶界面。它是互動廣告與受眾之間的聯系。從藝術的角度來說，UI界面的整體設計是受眾直觀的第一印象，同時也奠定了整個互動廣告的基調；從實用角度來說，UI界面的設定是給受眾的一個“指路牌”，它提煉出互動廣告最精簡的事情——主題、整體風格走向以及觀看方式等。

（1）加載界面

加載界面是一個緩沖過程，此時的整體界面不能太過于單調，否則會消磨受眾耐性，對后續內容失去觀看興趣。但也不能過于花里胡哨，否則難免會有些剖腹藏珠。

在漸變的背景里加上此次互動廣告主角，通過交互讓其轉動起來，并在文字交互上設置強調，從視覺上沖擊受眾視線。再輔以對這個互動廣告內容的簡單介紹，讓受眾有所了解，知道自己在等待些什么，不會有“君問歸期未有期”般的疑惑之感。

（2）開始界面

在一定程度上可以將開始界面當作是這個互動廣告的門面擔當，抑或是這個互動廣告的一個小海報。它也直觀地告訴受眾這個互動廣告的主題。故而畫面的色彩搭配都要符合整體的內容，排版方面也要做到簡潔大方。

畫面巧妙地應用互動廣告里主角的圖案來代替一些內容以及通過交互技術讓文字根據筆畫出現。不僅增添一些趣味性，也更符合互動廣告的內容。除此之外，再利用互動廣告中的交互技術讓點擊開始的按鈕浮動。這一小小的交互不單單是為了讓受眾能有參與感，同時也在視覺上提醒了受眾去點擊這個按鈕開始觀看互動廣告，給足了受眾緩沖與反應的時間。

（3）引導界面

引導界面是受眾觀看互動廣告的指南，它將互動廣告正片里所應進行的操作提前傳遞給受眾，讓其潛意識里形成記憶，有利于受眾后續觀看互動廣告。此外，引導界面里的內容要遵循“避繁就簡”原則。文字方面要始終記得言簡扼要，讓受眾看一眼就能抓取到信息。

畫面將接下來受眾應該如何讓互動廣告進行的字眼簡要地寫在畫面上，使受眾洞若觀火。但單一的文字會使得整體畫面索然無味?；诖嘶A，再聯系互動廣告的內容，在字體下方繪制表情可愛、體態簡單的咸鴨蛋，將其擬人化。在交互上，使咸鴨蛋有上走的趨勢，給受眾一種推動上方文字的感覺。靈動之余又令人期待后續咸鴨蛋的發展。

（4）結束界面

結束畫面代表著整個互動廣告的尾聲，這里與影視畫面的結尾部分有著異曲同工之處，都是對于整體的一個收尾。但互動廣告不同于影視的一點是——大多數互動廣告會在結尾的時候去引導受眾對其進行二次傳播，以達到更好地宣傳效果，故而，我們也可將其稱為是二次傳播分享界面。

考慮到“鴨蛋奶奶”的互動案例正片的最后一幀是以書信的方式來呈現的這一特殊性，此處的結束畫面將會基于互動廣告正片里的最后一幀畫面上的展現。首先，將最后一幀的畫面模糊化，再加入一些引導分享的內容繪制以及在文章末尾標明此互動廣告所引用的素材。將畫面模糊化而非直接替換是為了讓受眾更具有連貫性，不會一下子很突兀就轉換了畫面。

五、結語

時代日新月異發展，H5互動廣告與受眾群體之間獨特的黏帶性，使其在傳播方面以及宣傳點內化方面，都眾口銷金?；诖嘶A的互動公益廣告打破了常規的新媒體運行，帶給了受眾全新的體驗感。此外，文章中所引用的“鴨蛋奶奶”例子是第八屆全國高校數字藝術設計大賽華南賽區二等獎兼全國賽區優秀獎，具有現實參考價值的。假以時日，公益廣告與H5互動廣告的結合必然如魚得水。