從H5的流行看廣告互動設計

譚利

【摘 要】H5廣告用豐富的交互形式和沉浸式的體驗打動用戶，利用情景式的代入感，感應式的參與、交互式的互動實現(xiàn)廣告創(chuàng)意的延伸，從而讓用戶建立良好的印象以促進銷售或加深觀念。

【關鍵詞】H5；廣告；互動

1 H5廣告

H5是HTML5縮寫，HTML（HyperText Mark-up Language）即超文本標記語言或超文本鏈接標示語言，是目前網(wǎng)絡上應用最為廣泛的語言，也是萬維網(wǎng)的核心語言。H5是HTML的第五個版本，相對于HTML4，基于H5開發(fā)的網(wǎng)頁APP啟動時間更短，聯(lián)網(wǎng)速度更快；能使外部應用直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連；支持網(wǎng)頁端的Audio、Video等多媒體功能，視覺效果增強；能夠做出更多的風格和更強的效果，同時提供了更高的靈活性和控制性。

H5有著極大的發(fā)展和想象空間，基于這個平臺可以做的東西很多，廣告、游戲、應用、OA、VR、乃至于操作系統(tǒng)。H5廣告，是利用 HTML5的編碼技術來實現(xiàn)的一種數(shù)字廣告形式，它集合了圖片、圖表、文字動效、音頻、視頻和互動調(diào)查等各種元素為一體的新的媒介形式。H5廣告支持所有的移動平臺，但主要在手機和平板上傳播，能讓用戶很好的體驗及在用戶中實現(xiàn)快速的分享，并迅速風靡微信朋友圈。

2 H5廣告中的互動設計

互動，即“共同參與，互相推動”，基本特點是互相作用、互相影響、交互感應，可分為心理互動和行為互動。廣告中的互動創(chuàng)意可以是一種設計觀念，也可以作為一種設計手段，能給廣告帶來意想不到的效果。傳統(tǒng)的廣告形式注重信息的有效傳遞和良好的視覺效果，由于受制于媒介形態(tài)和傳播模式的局限，在互動性方面存在著比較明顯的不足。H5廣告作為一種新媒體廣告形式，在尊重視覺規(guī)律發(fā)展的同時，更注重用戶的體驗，它用豐富的交互形式和沉浸式的體驗打動用戶，從而讓用戶建立良好的印象以促進銷售或加深觀念。

1）情景式的互動設計

不少戶外廣告的設計創(chuàng)意運用了情景互動設計，在廣告中運用了畫面以外的物體來參與其中，這種新穎而獨特的廣告表現(xiàn)形式很吸引眼球。例如IWC的飛行員手表廣告，該廣告主在前往飛機場或離開飛機場的大巴上投放了一些特殊的拉手，這也可以說是廣告，因為這些拉手被做成手表的樣式，當乘客使用這個拉手的時候就像是佩戴了IWC的飛行員手表。這些拉手作為一個很常見的廣告載體，卻能夠讓上面的廣告與受眾產(chǎn)生互動，受益與情景互動設計的創(chuàng)意。

2）感應式的互動設計

感應互動設計廣告是以計算機視覺和虛擬現(xiàn)實等技術為基礎，使普通廣告能夠根據(jù)人體動作而產(chǎn)生相應變化，仰仗感應式互動效果來吸引受眾眼球。例如奧美為了宣傳Netflix在法國上線，給他們制作了100多個Gif動態(tài)圖片，投放在城市的不同環(huán)境中，這些動態(tài)圖片匹配了當?shù)氐那榫?，與周圍環(huán)境融為一體，當路人走過這則廣告時，廣告牌中的男主角會摘下墨鏡，或流露出聞到某種香水味的表情，通過感應實現(xiàn)了廣告與人的互動。

3）交互式的互動設計

網(wǎng)絡廣告區(qū)別于其他廣告的最大特點就是它的交互性。它利用圖像、聲音、視頻和動畫等多媒體元素的融合豐富了廣告的交互形式，讓用戶更加主動地參入到廣告中，與廣告主體產(chǎn)生交流，實現(xiàn)互動，以達到廣告的目的。Flash廣告是最具代表的網(wǎng)絡廣告形式之一，曾經(jīng)是網(wǎng)絡廣告中最為時尚，最流行的廣告形式。隨著數(shù)字移動終端通信技術的發(fā)展與普及，H5廣告迅速成為廣告市場的寵兒。由于Html5通用于 PC、Mac、i Phone、Android、Windows Phone 等主流平臺，使得H5廣告取代Flash成為為網(wǎng)頁動畫廣告的首選，同時在微信的社交平臺上大放異彩。

H5廣告中的互動創(chuàng)意讓用戶在廣告面前更加主動，不僅可以自主地選擇感興趣的主題，在觀看時與廣告進行互動體驗，還可自主的分享和傳播，用戶不再是被動的接受廣告，而是主動沉浸在廣告的創(chuàng)意里，享受著廣告給我們帶來的樂趣。

《從倫敦到上海的旅程》是Burberry的一款具有濃濃文藝氣息的H5廣告，打開廣告，第一步，得先“搖一搖”；第二步，點擊屏幕進入油畫般的倫敦清晨；第三步，摩擦屏幕使晨霧散去；第四步，點擊“河面”，河水泛起漣漪；最后點擊屏幕上的白點，達到終點站上海。在用戶以不同的方式與屏幕接觸中，完成了一次從倫敦到上海的旅程，文藝而走心，這支廣告有趣好玩，很吸引眼球。

3 H5廣告的交互創(chuàng)意

H5廣告的功能性極大的開發(fā)了廣告的交互式互動創(chuàng)意，讓人與機，消費者與品牌之間時刻進行著碰撞。一則優(yōu)秀的互動廣告，除了獨特的創(chuàng)意和良好的感官表達之外，還離不開恰當?shù)拿浇檩d體和技術實現(xiàn)。H5廣告作為時下流行且能快速傳播的廣告形式，其主要應用的技術點有：頁面素材預加載技術、滑動頁面設計、音樂加載播放技術、動態(tài)文字圖片、三維立體效果、填表報名設計、涂抹擦除設計和自定義分享設計，除此以外還包括一些交互手段，如：觸點控制、文字輸入、語音控制、攝像頭拍攝功能、二維碼鏈接等，這些交互手段更能提高廣告的趣味性和吸引力。依據(jù)上述技術特征，H5廣告的交互創(chuàng)意可分為以下幾種：

1）動作互動

動作互動主要體現(xiàn)在用戶與屏幕之間的交互，常用的動作手勢有點擊、滑動、拖拽、放大、旋轉、畫圖，這些動作設定為用戶提供流暢的互動體驗。

蘇泊爾有一支空氣凈化器除怪味的H5廣告，廣告頁面里的場景設計得像真正的凈化器工作環(huán)境一樣，使用戶有一種身臨其境的感覺，用戶按下畫面里的長按可觸發(fā)頁面動畫效果——凈化器開始工作，這種互動創(chuàng)意設計很有代入感，讓用戶馬上建立起對廣告產(chǎn)品的興趣和好感。

今年的中秋前夕，各大商家抓住了這個營銷的絕佳時機，借“中秋”這個熱點，做了不少好的互動性很強的H5廣告，里面就用了不少的手勢操作來實現(xiàn)互動，如：移動工廠的《比比誰畫的月亮圓》，這屬于畫圖類的H5廣告，畫面中黑色的夜空背景，用戶被要求用手指來畫月亮，根據(jù)與圓形的偏離程度計算用戶所畫月亮所得分數(shù)，趣味性和參入性極強，同時用戶還可以將H5分享給好友，讓大家都來比一比誰畫的月亮圓。endprint

哈根達斯有一支H5廣告《腦洞大過天，月餅究竟能做啥》，最大的亮點在互動上，廣告讓用戶通過點選和拖拽的方式進入游戲，在玩游戲的同時了解各種特色月餅。

2）特效互動

特效互動是指在H5廣告里加入了重力感應、3D視圖、雙屏互動等特效技術，利用特效來吸引用戶的注意。

《淘寶造物節(jié)邀請函》是今年最火爆的H5廣告之一。它發(fā)布后，就在朋友圈上演了刷爆狂潮，淘寶造物節(jié)的三大主題是“T、 A、O”，代表淘寶上前衛(wèi)的科技、炫酷的時尚文化和奇特的原創(chuàng)思想。這支H5廣告以勁爆的音樂和唯美絢酷的插畫，體現(xiàn)著以年輕消費群體為主體的廣告策略，特別是廣告運用了3D旋轉特效、VR 和重力感應技術，與用戶之間展開交互，使用戶感受到了強大的震撼力和應用體驗，特別適應年輕人的審美喜好和特點。

梅賽德斯-奔馳B級運動旅行車在臨近中國情人節(jié)推出了一則H5 廣告《七夕鵲橋會，愛更多》，廣告利用H5里搖一搖功能和雙屏互動技術，讓兩個手機配合在一起，使得廣告畫面里的一只喜鵲從一個手機飛到另一個手機上，當兩個手機并列擺放時，一座鵲橋從一個手機跨越到另一個手機上，瞬間搭建而成，同時背景還出現(xiàn)了一個大大的愛心。梅賽德斯的這則H5廣告里的浪漫雙屏互動創(chuàng)意，讓用戶在輕輕的擺弄手機時收到滿滿的愛意。

3）頁面互動

頁面互動是指H5廣告內(nèi)部的頁面交互和外部鏈接。

在H5廣告中用戶可以翻頁交互，翻頁的形式也靈活新穎，圖片和文字都可以作為鏈接對象，讓用戶隨時可以體驗不一樣的視覺感受。H5廣告在微信這個社交空間里傳播特別便利，一個分享鏈接就能讓廣告迅速擴散到交際圈里的各個角落。

4 結語

廣告從響亮的叫賣聲到視覺系的印刷品，再到呈現(xiàn)多媒體的屏幕，無不體現(xiàn)著從靜到動，從被動到主動，從觀看到參入的轉變。情感的接受，情景式的代入感，感應式參與到交互式的互動可看出廣告的創(chuàng)意不僅根植于思維與感官層面，而且逐步利用各種媒介特點延伸人類的創(chuàng)造性，同時合理利用現(xiàn)代科技手段服務于廣告創(chuàng)意的實現(xiàn)。

【參考文獻】

[1]郭慶光.傳播學教程[M].北京：中國人民大學出版社，1999： 52-53.

[2]B·約瑟夫·派恩二世，詹姆斯·H·吉爾默.體驗經(jīng)濟[M].北京：機械工業(yè)出版社，2002.endprint