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

董文

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

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

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

1、H5互動廣告

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

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

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

2.1多維度的信息傳播

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

2.2 跨終端的輕應用

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

3、H5互動廣告的功能分類和常見表現形式

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

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

3.2 常見的表現形式分類

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

4、H5互動廣告傳播的要素

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

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

4.2設置故事情節引發情感共鳴

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

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

傳統廣告的關鍵詞是“引導、強調、提醒”，而H5互動廣告的關鍵詞是“拉新、互動、分享、留存”，用“參與”取代“只讀”是 H5互動廣告與傳統廣告最本質的區別。H5互動廣告傳播是廣告與受眾之間的全程對話受眾在廣告傳播中參與、評論、分享、互動。能讓用戶更好地理解品牌的方法是讓用戶參與進來深入感知，可以結合產品本身的特性以及用戶的喜好進行參與機制的設置。參與環節的設置既是為了加深用戶對品牌的印象，也是為了引導用戶對廣告的理解。

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

[參考文獻]

[1]儲節旺， 黃潔欽. 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]韓文靜.參與的激勵：數字媒體廣告傳播中的受眾行為管理[J].廣告大觀：理論版， 2014（4）： 41.

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

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

[10]陶化冶.廣告創意與表現[M].大連：大連理工大學出版社，2014.

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

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

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

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

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

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