沈雅蘭 （重慶文理學(xué)院美術(shù)與設(shè)計(jì)學(xué)院 400000）

H5廣告的創(chuàng)意與表現(xiàn)分析

沈雅蘭 （重慶文理學(xué)院美術(shù)與設(shè)計(jì)學(xué)院 400000）

本文從H5廣告與傳統(tǒng)廣告的區(qū)別入手，以H5廣告具體案例為對(duì)象進(jìn)行分析，探索H5廣告創(chuàng)意表現(xiàn)方式的基本類別，運(yùn)用用戶體驗(yàn)視角對(duì)H5廣告進(jìn)行個(gè)案分析。

H5廣告；廣告創(chuàng)意；廣告表現(xiàn)形式；用戶體驗(yàn)

本文為重慶文理學(xué)院學(xué)生科研項(xiàng)目《HTML5廣告的創(chuàng)意與視覺表現(xiàn)研究》的階段性研究成果，編號(hào)為：XSKY2016183

H5廣告泛指在移動(dòng)端傳播的帶有特效、聲效、互動(dòng)體驗(yàn)的web網(wǎng)頁。它擁有豐富的視覺效果，更好的交互體驗(yàn)，是移動(dòng)互聯(lián)網(wǎng)廣告質(zhì)的創(chuàng)新。

根據(jù)百度指數(shù)數(shù)據(jù)顯示，移動(dòng)端對(duì)H5的關(guān)注度正在逐年增加。iH5出品的《2016年H5年度超強(qiáng)報(bào)告》指出，電子/通信/媒體/科技行業(yè)是H5數(shù)量產(chǎn)出最多的行業(yè)，占總體的30.5%；用于活動(dòng)宣傳場(chǎng)景的H5占到45.6%；內(nèi)容上，游戲類占23.9%，雞湯類占16.1%。觀察我們的生活也可以發(fā)現(xiàn)，各種新奇有趣的H5不斷在朋友圈引起熱潮。

一、H5廣告的優(yōu)勢(shì)及與傳統(tǒng)廣告的區(qū)別

從單一的短信彩信廣告，到APP占據(jù)智能手機(jī)的屏幕，廣告形式越來越豐富。如今移動(dòng)端廣告潛力巨大，H5廣告以其眾多優(yōu)勢(shì)成為互聯(lián)網(wǎng)廣告中倍受追捧的新形式。

（一）跨平臺(tái)、形式豐富

HTML5技術(shù)具有兼容特性，是唯一通用于PC、Mac、iPhone、iPad、Android、Windows Phone等平臺(tái)的跨平臺(tái)語言。H5廣告可以在移動(dòng)端展示動(dòng)畫、視頻、音效，甚至可以搭建小游戲頁面，制造觸發(fā)效果。這是表現(xiàn)形式、傳播途徑單一的視頻廣告和平面廣告難以超越的優(yōu)勢(shì)。

（二）病毒式傳播

H5廣告能夠直接在移動(dòng)端轉(zhuǎn)發(fā)分享，數(shù)據(jù)可以實(shí)時(shí)監(jiān)控和評(píng)估。理論上H5廣告可以輻射全球，快速傳播，不受時(shí)間段和地域的限制，潛在用戶量巨大。

（三）開發(fā)時(shí)間短、制作成本低

傳統(tǒng)廣告從創(chuàng)意、制作到投放，通常要經(jīng)歷數(shù)月，中間一旦出錯(cuò)就不可修改。而H5廣告非常靈活，上線即是投放，并且可以隨時(shí)修改。另外，H5廣告可以輕易移植到其他平臺(tái)，減少廣告成本?，F(xiàn)在也出現(xiàn)很多帶有模板和服務(wù)器資源的第三方制作平臺(tái)，這些平臺(tái)費(fèi)用低，易操作，受到大眾追捧。

（四）互動(dòng)性強(qiáng)

H5廣告可以利用先進(jìn)的技術(shù)打造流暢的互動(dòng)體驗(yàn)。在技術(shù)上，可以實(shí)現(xiàn)雙屏互動(dòng)、重力傳感、影像傳感、手勢(shì)識(shí)別等效果，還可以利用小游戲增加和用戶間的溝通。

二、H5廣告的創(chuàng)意表現(xiàn)形式

H5按照功能可分為事件告知類、促進(jìn)消費(fèi)類、信息展示類，按照頁面形式可以分為長頁式、翻頁式、360°全景式等，其中還可配合VR眼鏡實(shí)現(xiàn)身臨其境的效果。

內(nèi)容上，H5廣告可以緊跟熱點(diǎn)話題，吸引用戶關(guān)注；可以圍繞各大節(jié)日，獲得用戶認(rèn)同；可以講述故事、營造氛圍，引起用戶共鳴。

（一）場(chǎng)景類

制造場(chǎng)景是H5廣告常用的表現(xiàn)形式，通過畫面和聲效營造場(chǎng)景，渲染氣氛，吸引用戶?？煞譃楝F(xiàn)實(shí)場(chǎng)景和虛擬場(chǎng)景?，F(xiàn)實(shí)型場(chǎng)景再現(xiàn)生活，易于和用戶溝通情感。例如陌陌APP出品的《陌陌不孤獨(dú)飯局》，整個(gè)策劃以單身者的生活為切入點(diǎn)，通過第一視角展示現(xiàn)實(shí)生活，加上觸發(fā)效果，使得互動(dòng)具有真實(shí)感。虛擬型場(chǎng)景以其奇幻的畫面風(fēng)格使用戶置身神秘世界，極具吸引力。例如中國銀聯(lián)的《一個(gè)不該存在的廣告》，畫面上，采用手繪蒸汽朋克風(fēng)，既酷又神秘；加上旁白的講述，很容易激起用戶的探索欲。

（二）小游戲類

小游戲類H5以其趣味性和互動(dòng)性頗受追捧，各種類型的游戲H5層出不窮。

第一，產(chǎn)品類。這類游戲和產(chǎn)品結(jié)合緊密，用戶通過游戲可以了解到產(chǎn)品的性能和特點(diǎn)。例如寶馬《3.7秒極致挑戰(zhàn)》，畫面采用黑、藍(lán)的色調(diào)營造科技感，游戲采用計(jì)時(shí)百公里加速的方式，動(dòng)感十足。

第二，優(yōu)惠類。通過小游戲獲得獎(jiǎng)勵(lì)，提高用戶參與積極性。例如1號(hào)店的《港不停，港你知》，畫面采用俏皮的手繪風(fēng)，色彩豐富，用戶通過錄制港式俚語游戲即可隨機(jī)獲得1號(hào)店維他港式奶茶。

（三）社交分享類

這類H5在策劃上植入了社交屬性，能夠促進(jìn)用戶主動(dòng)分享。例如蘇泊爾的《我的溫暖哲學(xué)》，用戶可錄制語音放入保溫杯中，并將保溫杯傳遞給他人。

（四）名人代言類

名人本身自帶粉絲流量，利用名人效應(yīng)能夠快速達(dá)到傳播目的，例如騰訊動(dòng)漫出品的《薛之謙史上最瘋狂的廣告》。H5采用視頻的形式，模擬薛之謙微博界面，畫面采用漫畫和現(xiàn)實(shí)穿插展現(xiàn)的方式，幽默詼諧。

三、H5廣告的用戶體驗(yàn)

H5廣告基于社交軟件傳播，需要將創(chuàng)意、策劃、設(shè)計(jì)與用戶體驗(yàn)相結(jié)合。以騰訊棋牌的《神秘失蹤案現(xiàn)場(chǎng)》為例，在創(chuàng)意和策劃上，借鑒密室逃脫的方式，要在四個(gè)場(chǎng)景中找出線索，尋找失蹤的王大媽，碎片找齊后出現(xiàn)騰訊棋牌盛典的廣告信息。創(chuàng)意別具一格，前后銜接巧妙。

（一）視覺設(shè)計(jì)與場(chǎng)景營造

視覺設(shè)計(jì)是整個(gè)H5廣告中最直觀的部分，不同的畫面風(fēng)格、配色、版式會(huì)給人不同的視覺感受。風(fēng)格上，手繪的風(fēng)格多體現(xiàn)趣味性，實(shí)景照片、視頻則體現(xiàn)真實(shí)性；色彩上，輕松活潑的場(chǎng)景多采用明亮繽紛的顏色，而科技性、思考性的場(chǎng)景通常選用冷色、深色來展現(xiàn)理性。版式上，盡量簡化，多圖少字，方便用戶提取信息、適應(yīng)用戶習(xí)慣。

在《神秘失蹤案現(xiàn)場(chǎng)》中，加載頁面是在黑暗中搖晃的搖椅，并帶有咯吱的聲效，一開始就營造了神秘氣氛。場(chǎng)景頁面選用復(fù)古陳舊的風(fēng)格，制造緊張感和刺激感。色彩上選用明度和純度較低的顏色，使畫面看起來陰暗，迎合了游戲氛圍。

（二）技術(shù)特效與創(chuàng)意表達(dá)

先進(jìn)的技術(shù)可以實(shí)現(xiàn)很多意想不到的效果，這也開拓了廣告創(chuàng)意思路?！渡衩厥й櫚脯F(xiàn)場(chǎng)》的解密過程環(huán)環(huán)相扣，設(shè)計(jì)巧妙。用戶可以通過滑動(dòng)切換場(chǎng)景，通過點(diǎn)擊觸發(fā)場(chǎng)景中的物件，細(xì)節(jié)設(shè)計(jì)到位，引人入勝。

（三）用戶參與與互動(dòng)體驗(yàn)

H5廣告能夠利用多種互動(dòng)形式，激發(fā)用戶參與。《神秘失蹤案現(xiàn)場(chǎng)》中有很多有趣的觸發(fā)事件，例如點(diǎn)擊鳥籠可以打開鳥籠放走鴿子；點(diǎn)擊煤氣灶上的開關(guān)可以點(diǎn)火燒水等，每次點(diǎn)擊都伴有相應(yīng)的聲效，觸發(fā)效果非常逼真。結(jié)尾的廣告信息頁面選用喜慶歡快的背景音樂，巨大的反差將緊張感一掃而空。在整個(gè)過程中，根據(jù)提示找尋線索解密，刺激用戶參與的欲望，互動(dòng)設(shè)計(jì)精巧。

事實(shí)上，從廣告、游戲，再到生活方式，H5不斷地展現(xiàn)出多元、跨界的應(yīng)用能力，廣泛的觸及到我們的生活。一個(gè)受歡迎的H5廣告，從創(chuàng)意策劃到制作執(zhí)行，再到推廣傳播，每個(gè)環(huán)節(jié)都要精心設(shè)計(jì)，做到對(duì)用戶的深度洞察。

[1]李儒俊，盧維林.HTML5時(shí)代移動(dòng)互聯(lián)網(wǎng)廣告的變革[J]，商，2016（20）.

[2]李青.互動(dòng)廣告新形式——H5廣告研究[J].新聞研究導(dǎo)刊，2016（09）.

[3]沈虹，萬麗慧，郭嘉.互聯(lián)網(wǎng)廣告創(chuàng)意傳播研究——從互聯(lián)網(wǎng)廣告創(chuàng)意人和網(wǎng)絡(luò)使用者雙重角度看互聯(lián)網(wǎng)廣告創(chuàng)意傳播的現(xiàn)狀[J].廣告大觀（理論版），2009（01）.

[4]周瑜嫄，王峰.移動(dòng)端Html5廣告的表現(xiàn)形式及優(yōu)勢(shì)[J].新媒體研究，2016（01）.