基于功能的H5廣告研究

王帝豪

摘 要：隨著智能手機(jī)的迅速普及、更快速的數(shù)字傳輸技術(shù)的發(fā)展以及HTML5的跨平臺(tái)適用，搭載著微信這輛順風(fēng)車的H5廣告迅速成為炙手可熱的一種廣告形式。通過(guò)功能這一要點(diǎn)，對(duì)市面上的H5廣告進(jìn)行了分類，對(duì)H5廣告的設(shè)計(jì)提供了幫助。

關(guān)鍵詞：H5；廣告；文本；HTML

中圖分類號(hào)：TP311.56 文獻(xiàn)標(biāo)識(shí)碼：A DOI：10.15913/j.cnki.kjycx.2017.08.057

1 HTML5與H5廣告

1.1 HTML5

HTML為Hyper TextMarkup Language的縮寫，中文譯為“超級(jí)文本標(biāo)記語(yǔ)言”，是一種基于互聯(lián)網(wǎng)的網(wǎng)頁(yè)編程語(yǔ)言，從1994年由萬(wàn)維網(wǎng)發(fā)明至今，已逐漸成為了網(wǎng)頁(yè)編程的行業(yè)規(guī)范。HTML目前已歷經(jīng)了5次重大修改，HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。

1.2 H5廣告

多數(shù)人認(rèn)為H5是HTML5的縮寫，其實(shí)H5是我國(guó)范圍內(nèi)獨(dú)創(chuàng)的一個(gè)概念，泛指在移動(dòng)端中傳播的帶有特效、互動(dòng)體驗(yàn)與聲效的Web網(wǎng)頁(yè)，與HTML5的概念已經(jīng)不同。H5廣告基本特指集合文字、動(dòng)效、音頻、視頻、圖片、圖表等各種媒體表現(xiàn)方式于一體，利用微信朋友圈進(jìn)行傳播的營(yíng)銷媒介。因?yàn)镠TML5的跨平臺(tái)特性，受到了PC、Mac、iPhone、iPad、Android等主流平臺(tái)的支持，隨著網(wǎng)絡(luò)速度和用戶設(shè)備性能的提升，使H5廣告這一廣告形式快速發(fā)展和傳播。

2 基于功能的H5廣告設(shè)計(jì)

對(duì)于H5在廣告行業(yè)的應(yīng)用，因?yàn)樨S富的交互形式與沉浸式體現(xiàn)，給人們帶來(lái)了更好的體驗(yàn)，但廣告的本質(zhì)沒(méi)有改變，還是用“創(chuàng)意+文案+設(shè)計(jì)+情感”打動(dòng)用戶，進(jìn)而建立產(chǎn)品與用戶的利益和感情上的聯(lián)系，以促進(jìn)銷售或提高使用率。所以，廣告的目的也沒(méi)有變化。

一款H5廣告的產(chǎn)生，要明確其目的，即H5廣告的功能是什么，是為了品牌推廣、活動(dòng)推廣，還是平臺(tái)引流等，并選擇風(fēng)格基調(diào)、選擇內(nèi)容和處理細(xì)節(jié)等。

從功能和設(shè)計(jì)目標(biāo)來(lái)看，H5廣告主要有以下6類。

2.1 品牌推廣類

品牌推廣類的H5廣告等同于一個(gè)品牌的宣傳冊(cè)，更傾向于品牌形象的塑造，向用戶傳遞品牌文化。在設(shè)計(jì)上需運(yùn)用符合品牌形象的視覺(jué)語(yǔ)言，讓用戶對(duì)品牌留下深刻印象。比如，天貓推出的《首個(gè)手機(jī)話劇團(tuán)開張了》采用了第一人稱視角，使用戶進(jìn)入一個(gè)夢(mèng)境般的馬戲團(tuán)，開頭的眨眼載入與第一部分視頻無(wú)縫連接，十分巧妙，接著通過(guò)一個(gè)穿越門的效果，使觀眾來(lái)到一個(gè)很大的人形木偶前。此時(shí)，提示用戶點(diǎn)擊一個(gè)器官部位，來(lái)觀看對(duì)應(yīng)“話劇”。目前，有3個(gè)部位，即大腦、心臟、眼睛，演出場(chǎng)地就在對(duì)應(yīng)的器官內(nèi)。不同器官里有不同的故事，但劇情都結(jié)合了“天貓無(wú)憂購(gòu)”的“上門取退”“極速退款”等服務(wù)，結(jié)尾頁(yè)可以通過(guò)點(diǎn)擊“無(wú)憂通道”跳轉(zhuǎn)外鏈，設(shè)計(jì)風(fēng)格十分魔幻，整個(gè)劇情都一直在貫穿天貓的品牌服務(wù)，達(dá)到了意想不到的宣傳效果。

2.2 產(chǎn)品推廣類

利用H5，通過(guò)互動(dòng)、3D等展現(xiàn)產(chǎn)品外觀、功能的技術(shù)吸引用戶購(gòu)買，達(dá)到流量的轉(zhuǎn)化，表現(xiàn)形式多為微信圖文模擬、產(chǎn)品3D模型和劇情游戲。

比如《金立S6 Pro 就耀快發(fā)布會(huì)》H5廣告，其利用產(chǎn)品3D模型，精準(zhǔn)地展現(xiàn)了新產(chǎn)品的外觀、配置信息，通過(guò)人物與手機(jī)應(yīng)用界面之間的應(yīng)用場(chǎng)景穿插，直觀地說(shuō)明了新產(chǎn)品的功能，利用微信朋友圈的圖文模擬，增加了用戶使用場(chǎng)景的熟悉感，還更充分地說(shuō)明了新產(chǎn)品在拍照功能上的特點(diǎn)。整個(gè)H5廣告很好地介紹了新產(chǎn)品的功能。

2.3 活動(dòng)推廣類

為了推廣運(yùn)營(yíng)而設(shè)計(jì)的H5廣告是最常見(jiàn)的類型，內(nèi)容形式多變，包括邀請(qǐng)函、游戲、賀卡、測(cè)試題等形式。通過(guò)有趣的互動(dòng)、更具話題性或可以給受眾帶來(lái)優(yōu)惠的設(shè)計(jì)來(lái)促成用戶的分享與傳播。連續(xù)性的畫面能讓用戶集中精力，這類活動(dòng)推廣類H5廣告具有很強(qiáng)的時(shí)效性，與企業(yè)的近期活動(dòng)相互結(jié)合，以達(dá)到推廣策劃的目的。

異?；鸨摹短詫氃煳锕?jié)邀請(qǐng)函》利用VR和重力感應(yīng)技術(shù)，圍繞“T…A…O”三個(gè)主題板塊，展示淘寶上前衛(wèi)的科技、炫酷的潮流時(shí)尚文化以及奇思妙想的原創(chuàng)思想。在重力感應(yīng)支持下的VR全景、為此專門編曲的音樂(lè)、精美的插畫，無(wú)不與淘寶造物節(jié)針對(duì)年輕消費(fèi)者群體的策略相吻合。

2.4 企業(yè)招聘類

企業(yè)招聘經(jīng)常用到此類形式，優(yōu)點(diǎn)在于宣傳成本低、傳播高效，在設(shè)計(jì)上，開門見(jiàn)山，目的明確，在有限的篇幅內(nèi)，高效地介紹企業(yè)文化和招聘信息，切勿讓其他因素干擾。優(yōu)秀的排版是信息表達(dá)的基礎(chǔ)，在表現(xiàn)形式上，根據(jù)企業(yè)文化選擇合適的形式，比如插畫、交互的動(dòng)畫或虛擬場(chǎng)館等。

《快到ELLOWORLD懷里來(lái)》是艾洛互動(dòng)的招聘H5廣告，明亮的黑白黃配色，動(dòng)感、調(diào)皮的音樂(lè)，包含團(tuán)隊(duì)每個(gè)成員特點(diǎn)的插畫形象，簡(jiǎn)單的交互方式，充分表現(xiàn)了公司的人員配置情況和充滿創(chuàng)意的團(tuán)隊(duì)文化；明了的排版方式，清晰地展現(xiàn)了公司的基本信息、服務(wù)對(duì)象和招聘情況，使應(yīng)聘者一目了然。

2.5 數(shù)據(jù)展示類

內(nèi)容至上，排版清晰、規(guī)整，一切為了數(shù)據(jù)展示服務(wù)，根據(jù)展示內(nèi)容，可在圖文展示的基礎(chǔ)上加入小的交互動(dòng)畫，從而避免數(shù)據(jù)、文字或圖表變得枯燥。

TGideas出品的《移動(dòng)頁(yè)面用戶行為報(bào)告第二期》配色明亮，關(guān)鍵詞或數(shù)字的字號(hào)加大，配以直觀的圖表和立體圖標(biāo)，突出了主要信息。

2.6 平臺(tái)引流類

通過(guò)H5廣告的傳播，為APP或游戲等平臺(tái)獲取更多的流量，經(jīng)常利用明星、熱點(diǎn)事件、小游戲或惡搞DIY等內(nèi)容來(lái)表現(xiàn)。比如《薛之謙史上最瘋狂的廣告》利用薛之謙一個(gè)喜感又敬業(yè)的人物IP，借由薛之謙與漫畫中的主角互動(dòng)的場(chǎng)景，調(diào)侃騰訊動(dòng)漫的熱門二次元人物，大大深化了“宅、基、腐、有理想、無(wú)節(jié)操”的品牌形象。H5中直接添加了APP下載鏈接，為騰訊動(dòng)漫APP帶來(lái)了巨大的流量。

3 結(jié)束語(yǔ)

H5廣告作為一種出現(xiàn)不久、備受矚目的廣告形式，本文以其與傳統(tǒng)廣告的目的性一致為出發(fā)點(diǎn)，以功能為要點(diǎn)，對(duì)H5廣告進(jìn)行分類，并結(jié)合案例進(jìn)行了說(shuō)明。在H5廣告的制作中，明確目的及功能后，選擇合適的風(fēng)格基調(diào)，再尋找合適的內(nèi)容，結(jié)合合理的交互與音樂(lè)等，才能完成一款有的放矢的H5廣告。所以，清楚認(rèn)知功能這個(gè)出發(fā)點(diǎn)顯得尤為重要。

參考文獻(xiàn)

[1]張銘珊.H5廣告發(fā)展趨勢(shì)和困境[J].視聽，2016（06）.

[2]張余.移動(dòng)互聯(lián)網(wǎng)時(shí)代H5頁(yè)面的設(shè)計(jì)與營(yíng)銷[J].東南傳播，2015（09）.

[3]李三水.H5還能流行多久？[J].現(xiàn)代廣告，2015（11）.

〔編輯：張思楠〕