江南大學 設計學院 陳婧嫻 吳祐昕 

摘要：文章聚焦于基于HTML5的廣告設計，分析HTML5在近幾年的技術發展以及其具有的優勢，不斷更新的技術為設計帶來了更多可能性，但同時也需要思考技術的實現是否真的是HTML5頁面傳播量的決定性因素。文章將傳統廣告與HTML5頁面廣告進行對比分析，探索哪些因素影響并決定著HTML5頁面廣告的廣泛傳播，嘗試為更好地設計HTML5廣告提供參考。 

關鍵詞：HTML5、HTML5廣告、廣告本質、參與感 

中圖分類號：F713.8 文獻標識碼：Ａ

文章編號：1003-0069(2017)08-0136-02

Abstract：This paper focuses advertising design based on HTML5 and analyzes the technical development of HTML5 or its advantages in recent years. The continuous updating of technology brings more and more possibilities for design. But at the same time, we also need to consider it whether the realization of technology is the decisive factor of HTML5 pages enormous capacity. By comparing the traditional advertising and HTML5 pages advertising, this paper explores what factors affect and determine the spread of HTML5 advertising. Trying to provide a reference for the better design of HTML5 advertising.

Keywords：HTML5、Advertisement of HTML5、The essence of advertisement、Sense of participation

引言

隨著寬帶無線接入技術和移動終端技術的飛速發展，人們不再滿足從傳統的方式獲取服務和信息，迫切希望能夠隨時隨地乃至在移動過程中方便地獲得。而HTML5標準的發展與變革，顛覆了PC互聯網端的格局，優化了移動互聯網的用戶體驗，同時以HTML5技術為核心的HTML5廣告也應運而生，豐富了互聯網廣告形式。

一、HTML5的革新發展與優勢

2008年1月，HTML5標準草案正式頒布，為移動應用開發提供了另外一種技術方案。2010年，蘋果宣布今后移動設備不再支持Flash插件，HTML5技術逐漸成為移動互聯網網頁建設的必備選擇之一，直到2015年10月W3C宣布HTML5標準規范最終制定完成并向全世界開放。HTML5標準制定的完成標志著移動互聯網進入了新的發展格局。

HTML5是Web標準領域迄今為止最為重大的變革，它設計的目的是為了在移動設備上支持多媒體的播放，改變了用戶與文檔的交互方式與操作習慣，“重內容、富交互、重體驗、跨平臺”的要求，HTML5較之HTML4做出了諸多改進。技術的不斷革新與發展，使得HTML5可以實現堪比Native App效果的Web App，其突出表現在：

（一）跨平臺性

運用HTML5工具搭建的站點與應用可以兼容PC端、移動端、Windows系統等，設計者只需要制作一次，就可以輕易地將其移植到各種不同的開放平臺上，強大的兼容性可以顯著地降低開發與運營成本。

（二）支持本地儲存

基于HTML5開發的Web App比Native App啟動時間更短，聯網速度更快，這些得益于HTML5支持本地儲存功能，用戶在使用過程中無需下載軟件，同時再次打開網頁時可以更快恢復數據，以減少網絡流量，特別適合手機等移動媒體。

（三）支持更多的多媒體元素 

Audio/Video元素為HTML5應用提供了強大的多媒體支持，使用戶可以直接在頁面上播放聲音和視頻文件，無需安裝任何插件。設計師在設計諸如新聞類、微博類、社交類應用的信息呈現中更多地會使用文字與多媒體混排，而運用HTML5技術在這點上比原生開發更具有優勢。

（四）三維效果

基于SVG、Canvas、WebGL及CSS3技術的3D功能，讓開發者非常方便地實現清晰的web頁面布局，用戶可以更便捷地享受到互動帶來的樂趣。

二、基于HTML5的互聯網廣告與傳統廣告的特點

基于HTML5的廣告其實是利用以HTML5為標準的編碼技術來實現的一種數字化廣告，不同于傳統的廣告形式，HTML5廣告結合了平面、動畫、特效、三維、影視等藝術形式，HTML5廣告近幾年呈現井噴式發展也是廣告行業介入互聯網的一次集體爆發，不管是從內容方面還是渠道方面都顛覆了傳統的廣告模式，為廣告行業的發展注入了新的生機與活力。

（一）傳統廣告及其媒體的特點

相較于HTML5廣告的速度快內容豐富的特點，傳統廣告顯然在互聯網時代不具優勢，傳統廣告由于在時間和空間上的限制性，也限制了用戶在接受廣告信息時的自由性。

1. 制作周期長。由于傳統廣告投放后出現差錯不能立即跟進修改，所以廣告從策略制訂到設計方案討論都是經過反復的推敲與驗證才能最終發布，這一過程往往要持續數月的時間。

2. 反饋時間慢。傳統廣告發布后，因投放在電視、報紙雜志等媒體，只有等待電視上映或刊物出版后，根據其收視率或銷售量獲得大概的反饋，反饋時間較慢。而HTML5廣告是一種利用熱點內容迅速做出反應的表現形式，廣告發布后根據后臺數據獲得相應反饋后較快跟進修改，能夠較好地控制時間成本。

3. 傳播的局限性。傳統廣告傳播具有一定的局限性，可以覆蓋的范圍相對狹窄，只能投放到特定大眾傳媒平臺如電視、廣播、報紙雜志等。

4. 傳播信息具有強迫性。用戶只能被動地接收廣告信息，無論是否是用戶想看的內容。強勢信息灌輸典型的策略主要傳播形式是由發送者經過許多環節推向最終接受者，用戶只能被動地接受廣告信息。

（二）基于HTML5的互聯網廣告新特點

HTML5廣告其實是以HTML5標準的技術與設計的結合，它作為互聯網廣告的一種，具備大多數互聯網廣告所具有的特點。隨著移動互聯網的發展，顯然應用于移動端的HTML5廣告比傳統的廣告更具優勢，符合移動互聯網用戶的使用特點，也能更好地為用戶服務。

1. 覆蓋范圍廣，傳播性強。從受眾角度上說，目前智能手機用戶超過6億人次，其中微信用戶超過3億人次，發布一個HTML5廣告從理論上來說，用戶都能夠看得到，而傳統廣告是投放在電視或地鐵中，是絕對沒有這個可能性的。

2. 有針對性地投放廣告。在廣告的投放上，可以根據特定人群的不同需求投放相應的廣告，有明確的市場目標，做到有的放矢。而用戶在瀏覽時可以選擇自己需要的廣告信息，提高了用戶接受廣告信息的準確性。

3. 時效性強。HTML5廣告大多是結合熱點的營銷，時效性強，制作周期時間短，需要以最快的速度推出廣告以達到快速傳播的目的。

4. 具有強大的交互性。HTML5廣告打破傳統廣告靜態的傳播模式，突破傳統廣告的單向性和反饋不及時，強調讓用戶參與其中并有更好的互動體驗，良好的交互性可以使用戶更好地了解產品的特性，通過觸感給予用戶更真實的體驗。HTML5廣告與傳統廣告相比具有更強的親和力，它是用戶可以觸手可及的互動內容，具有豐富的聲畫傳播方式，相較于靜態的畫面來說，動態且有互動的內容不能不說是一種顛覆。 

5. 視聽效果一體。HTML5廣告結合了平面、動畫、聲效、三維、影視等藝術形式，它綜合了視覺、聽覺、觸覺等多種感官，在達到傳達信息目的的同時，新穎的形式增加了廣告的吸引力，從而給予用戶全方位的體驗。

三、HTML5頁面的設計方法

以技術為基礎的HTML5廣告是目前較為普遍且發展迅速的互聯網廣告之一，但這并不能代表傳統的廣告就應該摒棄，廣告的本質并沒有變，還是通過“創意+文案+設計+情感”的方式打動用戶，建立產品與用戶的利益與情感上的聯系。運用HTML5制作出的廣告頁面并不一定會在第一時間吸引用戶，HTML5廣告的本意不在于秀技術上，也不只是簡單地把傳統的廣告內容盲目地移植到HTML5廣告頁面的設計上。但通曉這一點需要在一定的實踐基礎上積累沉淀，這個沉淀不完全是前端技術以及動畫表現，而是在于是否真正地了解用戶的需求，傳達給用戶有效的信息。《“互聯網+”就這么鋪天蓋地的來了！》一文中曾提到：“一個成功的HTML5頁面往往集合了精煉的文字、高品質的設計以及與調性相契合的音頻和隱形的技術。”從曾經火爆朋友圈的HTML5廣告頁面中不難看出，新穎的廣告形式更加富有趣味性，贏得了用戶更多的關注度，在帶給用戶良好體驗的同時也達到了宣傳企業或品牌的目的。

通過研究總結出以下幾點運用到HTML5廣告設計中，嘗試為HTML5廣告設計提供參考。

（一）腦洞大開的創意構思

創意是設計的基礎，是設計的思想內涵與靈魂。美國廣告大師威廉·伯恩巴克說：“我們沒有時間也沒有金錢允許大量及不斷重復的廣告內容。我們呼喚我們的戰友——創意，要使觀眾在一瞬間發生驚嘆，立即明白產品的優點，而且永不忘記，這就是創意的真正效果。”廣告設計的精髓在于通過腦洞大開的創意構思將信息整合再造之后傳達給用戶，精妙的創意更加容易被用戶所接受并記住，從而提高了信息傳播的有效性。所以設計必須進行創意，好的創意設計充滿靈性與美感，能夠表達設計者的所思所想，傳達核心信息給用戶，引導用戶關注并使用產品。從一開始《圍住神經貓》在互聯網廣泛傳播開始，到《吳亦凡入伍》《這個陌生電話你敢接嗎》等互聯網現象級HTML5廣告頁面進行對比分析，總結得出一個共通的特點是：新奇有趣、創意新穎，針對目標用戶的需求在內容上做到創新，才能真正地讓用戶做到主動打開、主動分享、主動傳播。 

（二）精準的文案

文案的目的不是欺騙用戶使用他們不需要的產品，而是更精確地找到需要你產品的用戶，把產品最具競爭力的核心價值內容以淺顯易懂的方式傳遞給用戶。HTML5廣告《我害怕閱讀的人》根據現代人大多急功近利，沒有時間靜下心來讀書，從而引導用戶多讀書。常規大多使用“追求名利太疲憊，在書里找回自己”等類似的勸服式文案，而《閱讀的人》則反其道而行之，理解受眾追逐名利，以用戶的角度去思考，在工作或應酬交際中看到其他人能夠侃侃而談、充滿魅力，自己是否會有一種無力感，這樣的引導效果會比勸服式更加深入人心。優秀的文案需要有精準的洞察力，能夠清楚地知道用戶的需求，引起用戶情感上的共鳴，從而真正做到引導用戶。

（三）優秀的畫面效果

一款優秀的HTML5廣告的畫面表現不單單只是視覺層面，還包括從聽覺、觸覺等方面給予用戶全方位的體驗來吸引用戶的注意力，也就是多感官設計，設計師突破傳統設計所帶來的局限性，多層次刺激用戶感官機能，使消費者認識產品更加真實，更有效地引導消費。視覺設計在簡潔、美觀的基礎上，合理運用設計元素進行創意，同時色彩的搭配也會為設計增色，令用戶眼前一亮，使創意得到完美的表達，達到傳遞有效信息的目的；聽覺上，通過聲效和音樂的氣氛渲染，增強廣告的吸引力，為突出廣告主題起到了輔助作用，同時也豐富了用戶的感官體驗；觸覺上，關注用戶與產品之間的物理接觸，結合有趣的互動體驗帶給用戶控制感和在場感，使用戶沉浸在廣告營造的情境之中。綜合多種感官設計加強用戶體驗，同時在不知不覺中也達到了宣傳品牌產品的傳播目的。

（四）情感的準確表達

在互聯網產品設計中一定會涉及到兩個詞：“用戶價值”和“用戶體驗”。用戶價值需要滿足用戶功能上的需求，而用戶體驗則是用戶在使用產品過程中的感受，情感化設計便是增強用戶體驗的一種方式之一。心理學理論認為：“情感是人對客觀事物是否滿足自己的需求而產生的態度體驗”。因此產品真正的價值在于滿足人們情感上的需求，帶給人們內心愉悅的審美體驗。設計者在設計時，應從形式只追隨功能的思維中跳出，將注意力轉移到關注用戶的情感需求，將情感化設計理論融入到產品中，達到美感和可用性的統一。

四、HTML5廣告頁面設計的未來趨勢

（一）技術成為創意本身

技術的不斷革新同時也為設計帶來了更多的可能性，HTML5廣告《杜蕾斯美術館》用全景三維空間技術打造了一個網上美術館，設計構成的點線面及音樂渲染出的氛圍給予用戶一種全新的體驗。同時AR/VR技術的發展為HTML5廣告設計帶來了更多的可能性，淘寶雙十一的活動邀請函運用了VR技術，數量龐大的設計素材被很好地運用到廣告中，無論是在空間感、立體感還是視覺設計方面都給用戶帶來了驚喜，HTML5廣告設計也由此上升到了一個新的高度。

未來的廣告發展，技術將成為創意本身，讓創意變得更加不可思議。這不僅僅指在技術上追求酷炫的效果，而是通過技術不斷產生新的創意，技術與藝術的巧妙融合進而提升體驗才能更好地被用戶所接受，最終達到滿足用戶需求的目的。

（二）滿足用戶“在場介入”的心理需求

今后一段時間的發展除了注重用戶需求，參與感這一屬性會被越來越多地運用到HTML5廣告頁面的設計中，加強用戶與廣告之間的更多交流與互動，無論是制作還是使用HTML5廣告時，讓用戶參與到其中，滿足用戶“在場介入”的心理需求，激發用戶的傳播熱情，用戶既是廣告的瀏覽者，同時也是廣告內容的創造者。同時《參與感》1一書中也曾提到：“在設計時根據開放的節點做相應的互動設計，把基于互動產生的內容做成可傳播的事件，讓口碑產生裂變，既達到了宣傳廣告的目的同時也擴大了已參與者的成就感。”

在這個快速發展的移動互聯網時代，社交傳播優勢逐漸凸顯，用戶在使用微信、微博等社交應用時更愿意主動分享自己感興趣的信息，也更容易參與到其中。參與感這一屬性介入到設計中，不僅會對產品起到更好的宣傳作用，同時也能夠傾聽用戶的心聲，把用戶當作朋友，讓用戶參與進來，建立一個可觸碰、可擁有，和用戶共同成長的品牌。

結語

總之，以HTML5技術為基礎的廣告無論以怎樣的方式呈現給用戶，廣告本質并沒有變，在設計時還是需要遵從基本的設計方法，同時了解用戶的需求，才能真正做到打動用戶，實現宣傳品牌的意義。

參考文獻

[1] Jesse James Garrett . 用戶體驗要素 [M] . 機械工業出版社，2011 (6)：60-68

[2] 黎萬強 . 參與感:小米口碑營銷內部手冊 [M] . 中信出版社，2014 (8)：90-95

[3] 張余移 . 移動互聯網時代HTML5頁面的設計與營銷 [J] . 東南傳播，2015 (9)：87-89

[4] 周瑜嫄 . 移動端HTML5廣告的表現形式及優勢 [J] . 新媒體研究，2016 (1)：52-53

[5] 劉珩 . 移動富媒體時代的廣告情感化設計研究——以HTML5廣告為例 [J] . 美術大觀，2016 (2)：135-136

[6] 付鐘喚 , 王峰 . 從Web技術的發展探究移動端HTML5廣告的產生 [J] . 藝術科技，2016 (12)：274-275

[7] 丁玲 . Android應用程序開發中HTML5技術的應用探討 [J] . 信息與電腦(理論版)，2016 (17)：30-31

[8] 毓鑫 , 黃弘 . 基于移動互聯網環境下的H5設計形式探究 [J] . 設計，2016 (23)：133-135