基于HTML5技術的廣告交互設計研究

陳芳

摘 要 文章從HTML5的特點和應用出發，通過對比的形式將HTML5技術中所含有的優勢和特點進行總結，并且在個案分析中將HTML5廣告在交互性方面的設計進行展現。經過對案例的分析，找出設計中所存在的問題，根據問題所在找出案例中所存在的問題，然后找出解決的措施和對策。

關鍵詞 HTML5；廣告設計；交互性

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

1 HTML5廣告的優勢及其設計

1.1 基于HTML5技術的廣告優勢

1）互動類型豐富。HTML5廣告同時需要內置感應器進行協助，來完成有趣的人機互動行為。此外，設備還能夠實現地址導航的互動行為，從而帶給用戶不同的娛樂效用，增加用戶的使用感受和效果。而互動恰好也是HTML5廣告最吸引人的地方[1]。

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

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

1.2 交互與交互性設計

1）交互性設計的方式。互動主要包括人機互動以及人際互動。本文中主要指的是前者，通過互聯網進行指令的傳遞，可以在短時間內使用戶得到及時的反饋[5]。在互聯網的背景下，與用戶進行互動的形式有很多，在Web2.0時代，主要包括以下幾種：

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

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

2 HTML5廣告設計中的問題以及對策

2.1 交互性設計中的問題

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

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

2.2 交互性設計對策

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

2）緊貼目標受眾真實需求。互動需要更加貼近用戶的需求，因此，需要根據用戶的習慣，尤其是在微信中進行傳播時，更要符合受眾的習慣，只有滿足了受眾的需求，才能夠達到讓受眾樂于分享和轉發的目的。

3 HTML5廣告設計總體思路

3.1 廣告目標設定

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

3.2 受眾調研分析

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

3.3 創意構思

廣告的構思需要讓產品與用戶之間建立一定的關聯，通過這種關聯讓受眾產生情感層面的接觸。在經過眾多優秀的想法提煉過后，形成超凡的創意構思，并圍繞受眾的需求習慣進行開展。

3.4 設計制作

作為廣告設計的中心環節，需要通過相關的創意元素對此進行表達，并通過與傳統互聯網廣告進行對比，此類廣告的設計形式比較特別，更為符合受眾的習慣。還要通過情感來打動受眾，使其與產品之間產生感應，從整體效果上滿足受眾的要求。

4 HTML5廣告設計思路實踐

4.1 廣告目標

廣告目標主要為起宣傳和引導的作用。在2017年全國兩會期間，根據人們關心的熱點和民生事件設計了兩會熱點調查界面，如圖2。

4.2 受眾分析

根據受眾的基礎來分析其具體的傳播內容，然后達到用戶處。該群體具有一定的知識背景，能夠對前瞻信息進行表達和分享。

4.3 創意構思

在與受眾建立關聯后，更加優秀的設計思路轉變為受眾容易接受的廣告，可以實現意想不到的效果。在本案例中，利用碗里小球的“+1”操作實現投票，能夠增加趣味性的通知，讓用戶完成廣告的意圖。

4.4 設計制作

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

4.5 技術實現

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

5 結論

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

參考文獻

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

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

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

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

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

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