基于HTML5技術(shù)的廣告交互設(shè)計研究

陳芳

摘 要 文章從HTML5的特點和應(yīng)用出發(fā)，通過對比的形式將HTML5技術(shù)中所含有的優(yōu)勢和特點進行總結(jié)，并且在個案分析中將HTML5廣告在交互性方面的設(shè)計進行展現(xiàn)。經(jīng)過對案例的分析，找出設(shè)計中所存在的問題，根據(jù)問題所在找出案例中所存在的問題，然后找出解決的措施和對策。

關(guān)鍵詞 HTML5；廣告設(shè)計；交互性

中圖分類號 TP3 文獻標(biāo)識碼 A 文章編號 1674-6708（2019）231-0101-02

1 HTML5廣告的優(yōu)勢及其設(shè)計

1.1 基于HTML5技術(shù)的廣告優(yōu)勢

1）互動類型豐富。HTML5廣告同時需要內(nèi)置感應(yīng)器進行協(xié)助，來完成有趣的人機互動行為。此外，設(shè)備還能夠?qū)崿F(xiàn)地址導(dǎo)航的互動行為，從而帶給用戶不同的娛樂效用，增加用戶的使用感受和效果。而互動恰好也是HTML5廣告最吸引人的地方[1]。

2）多媒體形式。傳統(tǒng)廣告所實現(xiàn)的廣告也包括多媒體形式，但是對于受眾來說，吸引力太小，雖然加入了小型Flash的動畫，但是仍然無法將所有設(shè)計集中起來進行處理。而HTML5技術(shù)很好地解決了這一問題，在無安裝插件的條件下便可以實現(xiàn)3D影院版效果的廣告[2]。

3）個性化實現(xiàn)。當(dāng)前，人們用來獲取信息和資源的形式十分豐富，但是消費者卻拒絕廣告帶來的有關(guān)信息。因此，面多這種情況，大多數(shù)商業(yè)廣告最具有競爭力的方式便是獲取用戶的注意力[3]。而HTML5廣告則在很大程度上解決了用戶注意力短缺的現(xiàn)象。該技術(shù)可以通過上傳照片或者小游戲的方式，來使用戶進行分享和轉(zhuǎn)發(fā)，符合當(dāng)前人們的使用習(xí)慣[4]。

1.2 交互與交互性設(shè)計

1）交互性設(shè)計的方式?；又饕ㄈ藱C互動以及人際互動。本文中主要指的是前者，通過互聯(lián)網(wǎng)進行指令的傳遞，可以在短時間內(nèi)使用戶得到及時的反饋[5]。在互聯(lián)網(wǎng)的背景下，與用戶進行互動的形式有很多，在Web2.0時代，主要包括以下幾種：

（1）觸屏互動。HTML5廣告利用智能手機的觸屏技術(shù)，增加了用戶手指的互動，同時使視覺和觸覺共同參與，加深了對品牌以及廣告的印象。（2）表單互動。此類互動方式經(jīng)常出現(xiàn)在節(jié)日祝福以及邀請函中。目的使收集相關(guān)信息，大多數(shù)出現(xiàn)在結(jié)尾頁，能夠區(qū)別于傳統(tǒng)廣告的形式，便于與客戶之間進行交流。（3）影像上傳互動。大多數(shù)的活動上會出現(xiàn)上傳照片等類型的形式，用戶通過上傳招聘，通過手機App客戶端將手機內(nèi)的照片上傳到服務(wù)器端，在既定的框架下對照片進行剪輯或加工，從而得到搞笑的效果。一個典型的應(yīng)用是在《黃小廚一周歲生快》中，則出現(xiàn)了黃磊對于該活動的宣傳視頻，而點擊“我想要吃”按鈕后，便將應(yīng)用跳轉(zhuǎn)到拍照或者上傳照片的頁面中，從而進行圖片的分享。（4）重力傳感互動。在目前比較流行的智能手機中，HTML5廣告配合重力傳感器可以實現(xiàn)更加復(fù)雜的互動效果。2015年圣誕期間，AKQA公司就推出了夢幻水晶球，通過手機便可以360度無死角的欣賞水晶球中的景象，還可通過搖晃手機欣賞雪花飛舞的景象。

2）交互性呈現(xiàn)的優(yōu)勢。在設(shè)計的廣告內(nèi)容中，HTML5廣告主要有以下設(shè)計優(yōu)勢[6]：用戶在進行互動的過程中可以集中精力投入到廣告設(shè)計的場景中，在理解廣告主旨、提高廣告產(chǎn)品功能的理解性方面具有明顯優(yōu)勢，也為進一步分享提供了心理？基礎(chǔ)。

2 HTML5廣告設(shè)計中的問題以及對策

2.1 交互性設(shè)計中的問題

1）交互設(shè)計趨同。雙屏互動的方式增加了受眾的游戲娛樂化體驗，并且能夠在潛移默化地過程中介紹產(chǎn)品的性能，在一定程度上提升了用戶的參與互動性。但越來越多的廣告都使用此類方式，便使用戶感覺沒有新意，時間久了就不愿體驗了，用戶的黏性也降低了。

2）交互方式受眾不易接受。HTML5廣告互動的方式無法更好的傳遞給受眾就會失去體驗的快感。新華網(wǎng)上市制作的HTML5廣告，通過尋找屋子中帶數(shù)字的物品，這些數(shù)字構(gòu)成了新華網(wǎng)上市的股票代碼。雖然這一游戲較為新穎，但內(nèi)容過于簡單，與新華網(wǎng)并不匹配，最終的互動沒有達到相應(yīng)的效果，沒有提高用戶的黏性。

2.2 交互性設(shè)計對策

1）創(chuàng)新交互性設(shè)計形式。如今，廣告的交互性設(shè)計為了能夠吸引手中的注意力，使用更加新穎的交互方式來進行設(shè)計。別克出品的《一指之力逃亡記》廣告，不再是普通的賽車游戲，而是設(shè)置了特工逃亡路線，并由手中安排故事發(fā)展情節(jié)和鑒于逃亡路線。只有通過正確的方式，才能夠最終獲得別克汽車的援助進行逃亡，如圖1。

2）緊貼目標(biāo)受眾真實需求?；有枰淤N近用戶的需求，因此，需要根據(jù)用戶的習(xí)慣，尤其是在微信中進行傳播時，更要符合受眾的習(xí)慣，只有滿足了受眾的需求，才能夠達到讓受眾樂于分享和轉(zhuǎn)發(fā)的目的。

3 HTML5廣告設(shè)計總體思路

3.1 廣告目標(biāo)設(shè)定

廣告目標(biāo)在廣告計劃中十分重要，能夠為其定性。主要針對廣告對象和類型進行確定，用來宣傳品牌，進行預(yù)熱和推廣。

3.2 受眾調(diào)研分析

通過問卷調(diào)查等方式來得出有關(guān)信息，HTML5廣告需要與受眾之間產(chǎn)生聯(lián)系，但是也要確定目標(biāo)群以及平臺受眾的整體情況，根據(jù)手中的整體形象和行為習(xí)慣進行展開，以便日后活動的開展。

3.3 創(chuàng)意構(gòu)思

廣告的構(gòu)思需要讓產(chǎn)品與用戶之間建立一定的關(guān)聯(lián)，通過這種關(guān)聯(lián)讓受眾產(chǎn)生情感層面的接觸。在經(jīng)過眾多優(yōu)秀的想法提煉過后，形成超凡的創(chuàng)意構(gòu)思，并圍繞受眾的需求習(xí)慣進行開展。

3.4 設(shè)計制作

作為廣告設(shè)計的中心環(huán)節(jié)，需要通過相關(guān)的創(chuàng)意元素對此進行表達，并通過與傳統(tǒng)互聯(lián)網(wǎng)廣告進行對比，此類廣告的設(shè)計形式比較特別，更為符合受眾的習(xí)慣。還要通過情感來打動受眾，使其與產(chǎn)品之間產(chǎn)生感應(yīng)，從整體效果上滿足受眾的要求。

4 HTML5廣告設(shè)計思路實踐

4.1 廣告目標(biāo)

廣告目標(biāo)主要為起宣傳和引導(dǎo)的作用。在2017年全國兩會期間，根據(jù)人們關(guān)心的熱點和民生事件設(shè)計了兩會熱點調(diào)查界面，如圖2。

4.2 受眾分析

根據(jù)受眾的基礎(chǔ)來分析其具體的傳播內(nèi)容，然后達到用戶處。該群體具有一定的知識背景，能夠?qū)η罢靶畔⑦M行表達和分享。

4.3 創(chuàng)意構(gòu)思

在與受眾建立關(guān)聯(lián)后，更加優(yōu)秀的設(shè)計思路轉(zhuǎn)變?yōu)槭鼙娙菀捉邮艿膹V告，可以實現(xiàn)意想不到的效果。在本案例中，利用碗里小球的“+1”操作實現(xiàn)投票，能夠增加趣味性的通知，讓用戶完成廣告的意圖。

4.4 設(shè)計制作

通過參與觸動小球的游戲，奠定了基調(diào)。設(shè)計動畫節(jié)奏適中又不失趣味性。通過游戲的方式進行選票征集。結(jié)果頁通過對投票數(shù)的統(tǒng)計而制作的20個詞匯的匯總。

4.5 技術(shù)實現(xiàn)

該廣告是基于HTML5廣告設(shè)計平臺易企秀而制作，技術(shù)支持來源于易企秀，無需更多技術(shù)支撐。

5 結(jié)論

本文通過對HTML5技術(shù)下的廣告進行研究，得出了只有集中用戶注意力，才能提高廣告作品的關(guān)注度，促進用戶分享才能有利于廣告的宣傳。本文中所提出的問題主要是交互創(chuàng)新形式與受眾的黏性問題，并且需要針對廣告的設(shè)計思路和設(shè)計目標(biāo)，對受眾進行中體調(diào)研，來實現(xiàn)創(chuàng)新構(gòu)思。并且為了驗證思路是否正確，筆者進行了實踐設(shè)計進行研究。

參考文獻

[1]鄧威.基于HTML5的Web界面設(shè)計模式初探[J].電腦知識與技術(shù)，2018，14（33）：184-186.

[2]張揚揚.Html5互動廣告在移動終端的用戶體驗探究[J].藝術(shù)與設(shè)計（理論），2018，2（11）：64-66.

[3]盤俊春.一款專業(yè)的HTML5課件制作工具：炫課[J].中國信息技術(shù)教育，2018（Z3）：116-117.

[4]劉曉茵.淺談LED大屏手機交互系統(tǒng)解決方案[J].機電工程技術(shù)，2018（S1）：57-59.

[5]易家玉.HTML5動畫“用戶體驗”的審美特性[J].當(dāng)代動畫，2018（1）：104-107.

[6]李穎超，張宏濤，伍超君，等.基于HTML5的交互式移動學(xué)習(xí)平臺探析[J].電腦編程技巧與維護，2018（6）：85-86，98.