基于手機移動端H5互動廣告設計研究

董文

摘 要：隨著手機移動端互聯(lián)網技術的發(fā)展，網民更傾向于用手機上網。4G網絡、智能終端、微信及其他即時通訊設備和社交應用的普及，使用戶的行為、媒介使用習慣也發(fā)生了變化?！皬V告+社交”成為最有效的互動廣告增長方式。移動互聯(lián)網時代，H5技術充分展現(xiàn)了其在移動端的優(yōu)勢。具有良好的跨平臺性，在處理文字、圖片、音頻、視頻等元素混合排版的頁面及根據(jù)用戶操作實時圖像和動畫等方面具有顯著的優(yōu)勢，H5互動廣告的結合使得廣告內容更加豐富，表現(xiàn)形式更加多元化。同時利用微信這個優(yōu)質的即時通訊和社交平臺，使得優(yōu)質H5互動廣告發(fā)生迅猛的傳播。本文對近兩年移動端中熱門的H5廣告進行分類研究，并對用戶行為特征和H5作品的傳播效果進行分析。對于微信中的H5廣告這種傳播行為，列舉了4種常見的H5廣告類型，從H5廣告的營銷目標與頁面形式出發(fā)，對案例進行分析，探討有效的H5廣告設計策略，從而得出H5 廣告中的交互元素可增加用戶粘度，故事主線的置入可引發(fā)用戶的情感共鳴，助力品牌的傳播，激勵用戶參與廣告?zhèn)鞑タ蓮娀放聘兄?，對H5廣告設計及未來移動互聯(lián)網廣告的發(fā)展方向提供借鑒。

關鍵詞：手機移動端H5；互動廣告

移動端互聯(lián)網時代，APP和Web互相爭奪市場，開始APP有良好的用戶體驗，迅速受到用戶的歡迎，后來Web推出了更適應移動互聯(lián)網的H5技術，從微信平臺出現(xiàn)的第一條H5互動廣告的出現(xiàn)，人們才意識到廣告可以有多樣的形式。同時，H5憑借無需下載、即點即用的特性，更適應移動端的使用習慣，被廣泛運用開發(fā)。移動互聯(lián)網時代，H5技術充分展現(xiàn)了其在移動端的優(yōu)勢。具有良好的跨平臺性，在處理文字、圖片、音頻、視頻等元素混合排版的頁面及根據(jù)用戶操作實時圖像和動畫等方面具有顯著的優(yōu)勢，H5互動廣告的結合使得廣告內容更加豐富，表現(xiàn)形式更加多元化。同時利用微信這個優(yōu)質的即時通訊和社交平臺，使得優(yōu)質H5互動廣告發(fā)生迅猛的傳播。

1、H5互動廣告

H5頁面是利用 Html5的編碼技術來實現(xiàn)的一種數(shù)字應用，其表現(xiàn)形式為游戲、廣告、邀請函、測試頁等。H5并不等同于Html5，H5不僅指代了利用 Html5 技術實現(xiàn)的 web廣告，還涵蓋了 Html5， CSS3， Java Script 等基于Html5 相關技術的社交媒體互動廣告應用“集合”。

在H5技術出現(xiàn)之前，要投放一個廣告到移動應用或在移動網站上，存在著設備技術“碎片化”的重大問題。需要考慮各種屏幕尺寸，幾種操作系統(tǒng)，幾十個瀏覽器版本，上百款設備型號，H5互動廣告具有良好的跨平臺性解決了送一問題。同時，H5互動廣告在處理文字、圖片、音頻、視頻等元素混合排版的頁面及根據(jù)用戶操作實時值染圖像和動畫等方面具有顯著的優(yōu)勢，是廣告更加的互動多元化。對于快速増長的手機和平板電腦類別來說，H5易于發(fā)布，不需要第三方插件具有強大的圖形能力和靈活的音頻、視頻功能。用最簡單的工具來滿足所有要求正是H5互動廣告設計在手機移動端廣告領域的優(yōu)勢所在。

2、H5互動廣告的特征分析

2.1多維度的信息傳播

傳統(tǒng)廣告的傳播大都是點到面的傳播，H5互動廣告可實現(xiàn)點到點的定向傳播，也可實現(xiàn)點到面、面到面的擴散傳播。相對于傳統(tǒng)廣告利用人類的視覺和聽覺來傳播信息，H5互動廣告綜合了人類主體的六感（眼耳鼻舌身意）來感知、交流、傳播信息。H5互動廣告受眾需要的不再是被動地接受信息，而是要主動地參與其中并產生互動，用戶之間轉發(fā)形成多對多的傳播，受眾既是廣告信息的接受者又是傳播者。有用戶深度存在和參與的H5互動廣告營銷能引發(fā)病毒式的擴散，形成井噴式的轉發(fā)量。由2個人的團隊開發(fā)出來的“神經貓”H5小游戲，在兩天時間內達到了3億點擊。讓大眾見識了“移動+社交”這種多維度傳播爆發(fā)出的巨大能量。

2.2 跨終端的輕應用

H5互動廣告最大的優(yōu)勢在于跨平臺，它可以兼容i OS、安卓系統(tǒng)，適應手機、平板等各種終端設備。H5互動廣告在微信上的應用均以輕應用的形式出現(xiàn)，H5互動廣告和原生 APP 不同，它不需要安裝，即點即開。具有開發(fā)周期短、傳播性強的特點，以輕應用帶動重品牌的策略是H5互動廣告同微信的最佳結合點。

3、H5互動廣告的功能分類和常見表現(xiàn)形式

3.1按照功能和設計目標分類

H5互動廣告設計主要有以下幾種：一是商品展示型。這一類的H5頁面重心在于介紹商品的功能，將商品的特性通過H5的優(yōu)秀互動功能淋漓盡致地展現(xiàn)出來，汽車品牌是最常使用這類H5互動廣告的，其中，雷克薩斯就是一個優(yōu)秀的案例。二是活動運營型。為活動推廣營銷而打造的H5頁面是最常見的類型，形式多種多樣。包括邀請函、頁面游戲、賀卡、測試問卷等形式。同以前單一的靜態(tài)廣告圖片不同，現(xiàn)在的H5活動頁需要有更高的質量、更強的互動、更有話題性的設計來推動用戶分享傳播。三是品牌推廣型。與活動運營型頁面不同的是，品牌推廣型的H5頁面就等同于是這個品牌的微官網，重點在于塑造品牌形象，向客戶傳達品牌理念，因此這類頁面在設計上必須特別注重貼近品牌的定位和氣質，使客戶對品牌留下難以磨滅的印象。四是總結報告型。自從支付寶的十年賬單引發(fā)熱烈關注和討論后，各大公司的年終總結也紛紛開始用H5互動廣告來實現(xiàn)，優(yōu)秀的互動體驗令原本枯燥的總結報告生動有趣了起來。其中《京東的十大任性》無疑是相當優(yōu)秀的一個案例。這個H5互動廣告通過10張橫屏頁面將京東商城在2014年的十大成就淋漓盡致地展現(xiàn)了出來，用戶只要全部瀏覽完一遍，就能對京東2014年干了哪些大事有個大致的了解。

3.2 常見的表現(xiàn)形式分類

常見的表現(xiàn)形式主要有以下幾種：一是簡單圖文H5互動廣告。簡單圖文是早期最典型的H5表現(xiàn)形式?！皥D”的形式變化萬千，可以是插畫、照片、動態(tài)圖等等。例如滴滴打車的H5互動廣告專題頁，僅用幾張照片講述了一個故事，但視覺效果上十分簡潔，黑白照片占滿整個屏幕，點綴以滴滴的品牌代表色橙色，相當?shù)男涯?。除此之外，并沒有其他更花哨的東西，讓觀眾注意力集中在內容上，通過陌生人之間的真情聯(lián)系來塑造品牌的正能量形象。二是賀卡、禮品、電子請柬H5互動廣告。這個類型的H5互動廣告是早期十分常見的一種形式，也是最早通過微信朋友圈流行起來的。許多品牌抓住了人們喜歡收禮物的普遍心理，推出了H5互動廣告形式的賀卡、禮品、電子請柬，希望能通過這種成本低廉的方式不斷提升用戶的品牌忠誠度，潤物無聲地達到品牌宣傳的目的。三是評分、測試、問答H5互動廣告。問答形式的H5互動廣告也屢見不鮮了，它主要是抓住了用戶的探索欲以及攀比心理，促使他們不停地選擇下去，一定要看到最后的成績到底怎么樣，以及自己在朋友圈中的排名到底如何。這類H5互動廣告需要一個清晰的線索，最后形成的結果頁面也必須是合理的，不顯得突兀，若是能夠再輔以出色的視覺效果和文案，弱化答題的枯燥感，那就相當完美了。四是小游戲H5互動廣告。把品牌植入在一些小游戲中，由于H5互動廣告的小游戲操作簡單、便于傳播，一度在朋友圈中相當風靡。但缺乏創(chuàng)意和同質化現(xiàn)象導致用戶對那些無腦小游戲迅速產生了厭倦。所以想要在游戲上做到成功傳播，就必須在廣告設計文案和玩法創(chuàng)新上多下功夫。

4、H5互動廣告?zhèn)鞑サ囊?/p>

4.1利用交互元素增加用戶粘度

用戶粘度是評價用戶對品牌忠誠度的重要依據(jù)，指用戶基于偏好和使用承諾，形成的對產品的重復使用意愿及行為，H5互動廣告的用戶粘度以用戶的主動參與度和留存度進行衡量，并與用戶轉換成本成正比，交互元素對移動端用戶使用粘性存在顯著的正向影響。交互環(huán)節(jié)改變了傳統(tǒng)廣告營銷中被動接受信息的傳播方式，進而在互動體驗中主動接受并傳播產品信息。蘇泊爾H5互動廣告中“誰先住進你新房”把備受關注的空氣質量問題用粘土動畫的形式，搭建了3種典型的場景，講述了霧霾故事。選題符合大眾關注的熱點問題，同時在廣告中巧妙的運用了互動元素增加用戶粘度。直觀的數(shù)據(jù)、有趣的互動，讓用戶有種身臨其境的沉浸感。交互帶來的成就感有效地增加了用戶粘度，H5互動廣告中的交互體驗環(huán)節(jié)能在產品功能之外為用戶帶來樂趣和滿足感，對用戶粘度存在顯著的正向影響。

4.2設置故事情節(jié)引發(fā)情感共鳴

H5互動廣告的互動性讓受眾有參與的欲望，在有限的空間里講好一個故事，可以讓 H5互動廣告更有溫度，受眾感同身受，樂于分享，將對內容的傳播形成極大的推動力，品牌情感的傳遞是樹立品牌親和力的重要步驟。有情感的 H5互動廣告不僅僅能夠傳達產品訊息，它還可以用信心和希望，穿透大眾心靈，在一定程度上輔助品牌，使消費者產生美好的情感反饋和共鳴。

4.3 激勵用戶參與強化品牌感知

傳統(tǒng)廣告的關鍵詞是“引導、強調、提醒”，而H5互動廣告的關鍵詞是“拉新、互動、分享、留存”，用“參與”取代“只讀”是 H5互動廣告與傳統(tǒng)廣告最本質的區(qū)別。H5互動廣告?zhèn)鞑ナ菑V告與受眾之間的全程對話受眾在廣告?zhèn)鞑ブ袇⑴c、評論、分享、互動。能讓用戶更好地理解品牌的方法是讓用戶參與進來深入感知，可以結合產品本身的特性以及用戶的喜好進行參與機制的設置。參與環(huán)節(jié)的設置既是為了加深用戶對品牌的印象，也是為了引導用戶對廣告的理解。

吸引用戶的H5互動廣告需具備幾個關鍵點：抓眼球、享視聽、打動人、暗自喜、易參與。設計師則需要結合營銷目標“定基調、編故事、抓細節(jié)”，給用戶一個“驚喜打開、樂于分享、主動傳播”的理由，隨著移動終端硬件的升級、H5 技術的發(fā)展以及微信平臺的開放，H5互動廣告能突破屏幕瀏覽的界限融入體感交互，營造更加豐富的用戶體驗。

[參考文獻]

[1]儲節(jié)旺， 黃潔欽. HTML5 與移動信息服務[J]. 情報理論與實踐， 2013（7）： 24—25.

[2]孫辛欣， 靳文奎 . 移動應用中的情感交互設計研究[J]. 包裝工程， 2014， 35（12）： 51—54.

[3]王安霞， 馬君 .基于新媒介語境下的視覺信息溝通設計研究[J]. 包裝工程， 2015， 36（8）： 34—38.

[4]張翔 .HTML5：移動營銷新利器 [J].上海經濟，2015（11）： 37.

[5]李淳，陶晉，李亞萍.基于品牌形象塑造的交互廣告設計策略分析[J].包裝工程， 2016，37（6）： 22.

[6]熊巍，王舒盼，潘瓊.微信移動社交用戶心流體驗對用戶粘性的影響研究[J].新聞界， 2015（7）： 13.

[7]韓文靜.參與的激勵：數(shù)字媒體廣告?zhèn)鞑ブ械氖鼙娦袨楣芾韀J].廣告大觀：理論版， 2014（4）： 41.

[8]Jeff Johnson（美），著，張一寧譯，《認知與設計—理解UI設計準則》[M]，人民郵電出版社，2011.

[9][英]簡斯巧克斯.媒介與文化研究方法[M].上海；復旦大學出版社，2006.

[10]陶化冶.廣告創(chuàng)意與表現(xiàn)[M].大連：大連理工大學出版社，2014.

[11]舒詠平，鮑立泉.新媒體與廣告互動傳播[M].武漢；華中科技大學出版化2006.

[12]張建設.廣告創(chuàng)意與設計[M].清華大學出版社，2010.

[13]張偉.HTML5推動互聯(lián)網電視發(fā)展化新媒體，2015（3）：47-49.

[14]宋明艷.移動互聯(lián)網應用及其發(fā)展分析m.電腦與電信，2012（10）：35-37.

[15]鄭培純.基于HTML5的多媒體播放網站[D].長春：吉林大學，2015.

（作者單位：湖北經濟學院法商學院，湖北 武漢 430200）