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

摘要：文章聚焦于基于HTML5的廣告設計，分析HTML5在近幾年的技術(shù)發(fā)展以及其具有的優(yōu)勢，不斷更新的技術(shù)為設計帶來了更多可能性，但同時也需要思考技術(shù)的實現(xiàn)是否真的是HTML5頁面?zhèn)鞑チ康臎Q定性因素。文章將傳統(tǒng)廣告與HTML5頁面廣告進行對比分析，探索哪些因素影響并決定著HTML5頁面廣告的廣泛傳播，嘗試為更好地設計HTML5廣告提供參考。 

關(guān)鍵詞：HTML5、HTML5廣告、廣告本質(zhì)、參與感 

中圖分類號：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

引言

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

一、HTML5的革新發(fā)展與優(yōu)勢

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

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

（一）跨平臺性

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

（二）支持本地儲存

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

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

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

（四）三維效果

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

二、基于HTML5的互聯(lián)網(wǎng)廣告與傳統(tǒng)廣告的特點

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

（一）傳統(tǒng)廣告及其媒體的特點

相較于HTML5廣告的速度快內(nèi)容豐富的特點，傳統(tǒng)廣告顯然在互聯(lián)網(wǎng)時代不具優(yōu)勢，傳統(tǒng)廣告由于在時間和空間上的限制性，也限制了用戶在接受廣告信息時的自由性。

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

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

3. 傳播的局限性。傳統(tǒng)廣告?zhèn)鞑ゾ哂幸欢ǖ木窒扌裕梢愿采w的范圍相對狹窄，只能投放到特定大眾傳媒平臺如電視、廣播、報紙雜志等。

4. 傳播信息具有強迫性。用戶只能被動地接收廣告信息，無論是否是用戶想看的內(nèi)容。強勢信息灌輸?shù)湫偷牟呗灾饕獋鞑バ问绞怯砂l(fā)送者經(jīng)過許多環(huán)節(jié)推向最終接受者，用戶只能被動地接受廣告信息。

（二）基于HTML5的互聯(lián)網(wǎng)廣告新特點

HTML5廣告其實是以HTML5標準的技術(shù)與設計的結(jié)合，它作為互聯(lián)網(wǎng)廣告的一種，具備大多數(shù)互聯(lián)網(wǎng)廣告所具有的特點。隨著移動互聯(lián)網(wǎng)的發(fā)展，顯然應用于移動端的HTML5廣告比傳統(tǒng)的廣告更具優(yōu)勢，符合移動互聯(lián)網(wǎng)用戶的使用特點，也能更好地為用戶服務。

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

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

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

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

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

三、HTML5頁面的設計方法

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

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

（一）腦洞大開的創(chuàng)意構(gòu)思

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

（二）精準的文案

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

（三）優(yōu)秀的畫面效果

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

（四）情感的準確表達

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

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

（一）技術(shù)成為創(chuàng)意本身

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

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

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

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

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

結(jié)語

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

參考文獻

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

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

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

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

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

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

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

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