江南大學(xué) 設(shè)計(jì)學(xué)院 陳婧嫻 吳祐昕 

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

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

中圖分類號(hào)：F713.8 文獻(xiàn)標(biāo)識(shí)碼：Ａ

文章編號(hào)：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

引言

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

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

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

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

（一）跨平臺(tái)性

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

（二）支持本地儲(chǔ)存

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

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

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

（四）三維效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、HTML5頁(yè)面的設(shè)計(jì)方法

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

通過(guò)研究總結(jié)出以下幾點(diǎn)運(yùn)用到HTML5廣告設(shè)計(jì)中，嘗試為HTML5廣告設(shè)計(jì)提供參考。

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

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

（二）精準(zhǔn)的文案

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

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

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

（四）情感的準(zhǔn)確表達(dá)

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

四、HTML5廣告頁(yè)面設(shè)計(jì)的未來(lái)趨勢(shì)

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

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

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

（二）滿足用戶“在場(chǎng)介入”的心理需求

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

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

結(jié)語(yǔ)

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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