HTML5技術(shù)的移動(dòng)端廣告設(shè)計(jì)

前言：想要寫(xiě)出一篇引人入勝的文章？我們特意為您整理了HTML5技術(shù)的移動(dòng)端廣告設(shè)計(jì)范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。

摘要：隨著移動(dòng)終端技術(shù)和寬帶無(wú)線接入技術(shù)的發(fā)展，移動(dòng)端廣告設(shè)計(jì)不僅能夠提升用戶體驗(yàn)，而且使得用戶上網(wǎng)的使用習(xí)慣發(fā)生了改變，并推動(dòng)了基于html5技術(shù)的移動(dòng)端廣告設(shè)計(jì)發(fā)展，極大地方便了用戶與設(shè)計(jì)者的記憶和認(rèn)知。HTML5廣告打破了各種設(shè)計(jì)界限，將各種藝術(shù)表現(xiàn)形式的廣告串聯(lián)在一起，給用戶帶來(lái)不一樣的感官體驗(yàn)。基于此，對(duì)HTML5技術(shù)的特點(diǎn)和移動(dòng)端廣告設(shè)計(jì)原則進(jìn)行了介紹，并探究了基于HTML5技術(shù)的移動(dòng)端廣告設(shè)計(jì)對(duì)策，以更好地提高移動(dòng)端廣告設(shè)計(jì)質(zhì)量。

關(guān)鍵詞：HTML5技術(shù)；移動(dòng)端廣告；創(chuàng)意性原則

0引言

傳統(tǒng)服務(wù)和信息獲取方式已無(wú)法滿足時(shí)展的需求；而移動(dòng)互聯(lián)網(wǎng)提高了信息獲取的便攜性、便利性及快速性。HTML5標(biāo)準(zhǔn)在2014年10月正式推出，徹底顛覆了PC端互聯(lián)網(wǎng)的格局，優(yōu)化了移動(dòng)互聯(lián)網(wǎng)的用戶體驗(yàn)，在此基礎(chǔ)上誕生了以HTML5技術(shù)為主體的移動(dòng)端廣告設(shè)計(jì)。HTML5廣告設(shè)計(jì)除了視覺(jué)效果外，還從觸覺(jué)、聽(tīng)覺(jué)等方面為用戶提供不一樣的體驗(yàn)和感受。

1HTML5技術(shù)特點(diǎn)

相比于NativeAPP而言，以HTML5為核心的Web頁(yè)面具有輕便化的優(yōu)勢(shì)，可以在較短的時(shí)間內(nèi)對(duì)新內(nèi)容做出反應(yīng)。HTML5標(biāo)準(zhǔn)具有“富交互、富體驗(yàn)、重內(nèi)容與跨平臺(tái)”等要求，并對(duì)HTML4技術(shù)進(jìn)行了大量的優(yōu)化，降低了Web頁(yè)面的開(kāi)發(fā)難度。實(shí)際上，HTML5技術(shù)特點(diǎn)包括以下幾個(gè)方面。第一，跨平臺(tái)性。HTML5技術(shù)提供了開(kāi)放式結(jié)構(gòu)，能夠?qū)崿F(xiàn)應(yīng)用與數(shù)據(jù)的有效接入，開(kāi)發(fā)者無(wú)需考慮瀏覽器與設(shè)備內(nèi)部數(shù)據(jù)聯(lián)通問(wèn)題?；贖TML5技術(shù)構(gòu)建的站點(diǎn)與應(yīng)用可以兼容安卓系統(tǒng)、IOS系統(tǒng)、Windows系統(tǒng)等，只需要設(shè)計(jì)者編輯一次程序，就能夠?qū)TML5技術(shù)移植到不同開(kāi)放平臺(tái)上，既能夠降低開(kāi)發(fā)和運(yùn)營(yíng)成本，又能夠給企業(yè)營(yíng)造更多的發(fā)展空間。第二，支持更多的多媒體元素。在HTML5技術(shù)發(fā)展過(guò)程中，Audio/Video可以為其提供強(qiáng)大的多媒體支持，降低了Web頁(yè)面開(kāi)發(fā)對(duì)于視頻混排、文字與音頻的壓力，用戶無(wú)需在頁(yè)面上安裝任何插件，直接播放視頻和聲音文件。在設(shè)計(jì)諸如微博類(lèi)、新聞?lì)?、社交?lèi)應(yīng)用等內(nèi)容時(shí)，設(shè)計(jì)師還可以實(shí)現(xiàn)文字使用與多媒體混排，比原生開(kāi)發(fā)更具優(yōu)勢(shì)。第三，支持本地儲(chǔ)存。與NativeApp相比，基于HTML5技術(shù)開(kāi)發(fā)的Web頁(yè)面所需要的啟動(dòng)時(shí)間較短，且聯(lián)網(wǎng)速度更快，主要是由于HTML5技術(shù)支持本地儲(chǔ)存功能。在應(yīng)用過(guò)程中，不需要下載軟件，而且再次打開(kāi)網(wǎng)頁(yè)時(shí)能夠在短時(shí)間內(nèi)恢復(fù)數(shù)據(jù)，有效降低了網(wǎng)絡(luò)流量，在手機(jī)等移動(dòng)媒體中得到了廣泛應(yīng)用。第四，三維效果?；贑anvas、WebGL、SVG及CSS3的3D功能，能夠使開(kāi)發(fā)者開(kāi)發(fā)出更加清晰的Web頁(yè)面布局，在瀏覽器中用戶可以體驗(yàn)到更加驚艷的視覺(jué)效果。同時(shí)，Canvas的應(yīng)用編程接口可以為用戶提供數(shù)十個(gè)方法，以確保Web繪圖功能的實(shí)現(xiàn)，在使用Canvas標(biāo)簽的Web應(yīng)用過(guò)程中，用戶可以動(dòng)態(tài)生成各種動(dòng)畫(huà)和圖形圖像，借助WebGL技術(shù)方案，能夠完成對(duì)復(fù)雜數(shù)據(jù)的有效處理，使三維的立體效果呈現(xiàn)在頁(yè)面上。Canvas和WebGL的出現(xiàn)可以確保Web應(yīng)用獨(dú)立完成繪圖和渲染操作，使頁(yè)面效果變得更加豐富。

2HTML5廣告設(shè)計(jì)原則

2.1以用戶為中心

在基于HTML5技術(shù)的移動(dòng)端廣告設(shè)計(jì)過(guò)程中，需要對(duì)用戶的潛在需求進(jìn)行分析和研究，通過(guò)與用戶進(jìn)行交流和溝通設(shè)計(jì)者可以及時(shí)發(fā)現(xiàn)問(wèn)題，并提出有效的解決對(duì)策，以確保HTML5廣告設(shè)計(jì)工作有條不紊的進(jìn)行。對(duì)于HTML5技術(shù)而言，可以通過(guò)廣告宣傳加深用戶對(duì)產(chǎn)品的感受和認(rèn)知，以期更好地滿足用戶需求。通常情況下，傳統(tǒng)廣告存在或多或少的強(qiáng)制性，導(dǎo)致用戶只能被動(dòng)接收信息。如今，隨著互聯(lián)網(wǎng)時(shí)代的發(fā)展，每一位用戶都可以從多種渠道獲得自己需要的信息，既可以滿足用戶的基本需求，又能夠推動(dòng)HTML5廣告設(shè)計(jì)的發(fā)展。

2.2以技術(shù)為基礎(chǔ)的創(chuàng)意性原則

對(duì)于HTML5廣告設(shè)計(jì)而言，創(chuàng)意性在整個(gè)廣告設(shè)計(jì)過(guò)程中扮演著十分重要的角色，任何一種形式的廣告都可以借助創(chuàng)意方法進(jìn)行，以提高廣告的趣味性和表現(xiàn)力。實(shí)際上，好的創(chuàng)意讓人感到意料之外，情理之中，可以在短時(shí)間內(nèi)得到更多用戶的關(guān)注，并為用戶提供不一樣的感受。由于移動(dòng)端網(wǎng)絡(luò)的用戶需求呈現(xiàn)出多元化的發(fā)展趨勢(shì)，導(dǎo)致時(shí)間呈現(xiàn)碎片化，在一定程度上分散了用戶的注意力；但是，基于HTML5技術(shù)的廣告設(shè)計(jì)，具有持續(xù)周期短的特點(diǎn)，使有內(nèi)涵、有創(chuàng)意的廣告能夠更好地吸引廣大觀眾，進(jìn)而達(dá)到宣傳產(chǎn)品的目的。

2.3功能與設(shè)計(jì)的簡(jiǎn)潔性原則

HTML5廣告設(shè)計(jì)主要是通過(guò)創(chuàng)意文字、圖形、文案以及聲效等視覺(jué)設(shè)計(jì)要素展現(xiàn)主題內(nèi)容；因此，需要從單張頁(yè)面、整體頁(yè)面及廣告元素等方面對(duì)移動(dòng)端廣告進(jìn)行設(shè)計(jì)。

3HTML5廣告設(shè)計(jì)的標(biāo)準(zhǔn)與方法

3.1創(chuàng)意是移動(dòng)端廣告設(shè)計(jì)的靈魂

創(chuàng)意是廣告設(shè)計(jì)得以順利進(jìn)行的基礎(chǔ)，是廣告設(shè)計(jì)的靈魂。威廉•伯恩巴克是美國(guó)著名的廣告大師，其曾經(jīng)說(shuō)“對(duì)于大量相同的廣告內(nèi)容我們沒(méi)有多余的時(shí)間與精力進(jìn)行閱讀。所以在進(jìn)行藝術(shù)創(chuàng)作時(shí)需要?jiǎng)?chuàng)意，以便觀眾更多地了解和贊嘆產(chǎn)品的內(nèi)容，這些正是創(chuàng)意的真正目的”。實(shí)際上，廣告設(shè)計(jì)的精髓主要是憑借腦洞大開(kāi)的創(chuàng)意構(gòu)思來(lái)整合信息，并將其傳達(dá)給用戶，通過(guò)精妙的創(chuàng)意吸引用戶的注意力，以提高信息傳播的有效性。因此，在進(jìn)行移動(dòng)端廣告設(shè)計(jì)過(guò)程中，好的創(chuàng)意能夠使廣告具有深刻的思想內(nèi)涵，并為觀眾帶來(lái)無(wú)限的回味和遐想。

3.2基于HTML5廣告設(shè)計(jì)的創(chuàng)新與實(shí)現(xiàn)

3.2.1支持多元化的多媒體元素在頒布HTML5標(biāo)準(zhǔn)之前，需要借助第三方插件在網(wǎng)頁(yè)上播放視頻、音頻等內(nèi)容。例如，自主開(kāi)發(fā)的多媒體插件或Flash。插件的使用不會(huì)受到瀏覽器的安全控制，難免會(huì)出現(xiàn)安全隱患。自從頒布HTML5標(biāo)準(zhǔn)后，新增了Audio與Video兩個(gè)技術(shù)元素。Audio元素主要負(fù)責(zé)播放音頻文件；Video元素主要負(fù)責(zé)播放視頻或電影。在播放過(guò)程中，由于Audio與Video元素的使用可以使支持HTML5的瀏覽器直接進(jìn)行播放，不需要安裝其他插件，使廣告更加具有趣味性和創(chuàng)意性[1]。3.2.2HTML5廣告制作平臺(tái)分析通常情況下，HTML5技術(shù)廣告設(shè)計(jì)平臺(tái)包括基礎(chǔ)工具類(lèi)、輕營(yíng)銷(xiāo)模板類(lèi)和功能引擎類(lèi)三大類(lèi)。輕營(yíng)銷(xiāo)模板類(lèi)：與PPT操作界面相似，操作方便簡(jiǎn)單，能夠提供簡(jiǎn)單的動(dòng)態(tài)效果和相應(yīng)的模板，動(dòng)態(tài)效果局限于淡出、進(jìn)入及頁(yè)面翻頁(yè)等交互式操作，一般面向于個(gè)人用戶，只適用于輕度營(yíng)銷(xiāo)，主要面向非設(shè)計(jì)專(zhuān)業(yè)者，僅有少數(shù)企業(yè)用戶?；A(chǔ)工具類(lèi)：相比模板類(lèi)，基礎(chǔ)工具類(lèi)可以提供HTML5技術(shù)廣告設(shè)計(jì)操作平臺(tái)，并將許多技術(shù)嵌入在網(wǎng)站中以支持一系列的高級(jí)功能[2]，在不會(huì)代碼的情況下使設(shè)計(jì)者能夠設(shè)計(jì)出優(yōu)秀的HTML5廣告，主要面向企業(yè)用戶，傾向于營(yíng)銷(xiāo)化，少部分為個(gè)人用戶。功能引擎類(lèi)：主要面向于HTML5廣告設(shè)計(jì)的技術(shù)愛(ài)好者或技術(shù)開(kāi)發(fā)人員，該類(lèi)平臺(tái)可以為廣大提供基于Canvas的技術(shù)引擎，能夠完成相關(guān)的游戲開(kāi)發(fā)。3.2.3基于HTML5技術(shù)的3D設(shè)計(jì)與實(shí)現(xiàn)實(shí)際上，HTML5動(dòng)畫(huà)效果能夠借助SVG、Canvas和WebGL等技術(shù)實(shí)現(xiàn)，而且每一種技術(shù)都具有其相對(duì)獨(dú)特的優(yōu)勢(shì)，是HTML5廣告設(shè)計(jì)中較為成熟的一項(xiàng)技術(shù)。在一般HTML5廣告設(shè)計(jì)時(shí)，只需要選擇一種開(kāi)發(fā)技術(shù)就能達(dá)到預(yù)期的廣告效果。其中SVG技術(shù)是文本式矢量圖形描述語(yǔ)言，由W3C推出，專(zhuān)門(mén)為網(wǎng)絡(luò)而設(shè)計(jì)的一種圖像表達(dá)格式。借助SVG技術(shù)可以將品質(zhì)更好的矢量圖形插入到網(wǎng)頁(yè)中，通過(guò)矢量濾鏡可以使矢量圖像呈現(xiàn)出多元化的視覺(jué)效果。Canvas隸屬于HTML5新的技術(shù)語(yǔ)言，能夠被JavaScript代碼操作訪問(wèn)，允許腳本語(yǔ)言對(duì)位圖圖像進(jìn)行動(dòng)態(tài)渲染[3]，通過(guò)圖形的繪制可以完成復(fù)雜的動(dòng)畫(huà)處理。HTML5技術(shù)在Canvas中嵌入了大量的API，能夠完成對(duì)2D圖像的基本操作。

3.3利用交互元素提高用戶粘度

隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展，HTML5技術(shù)的應(yīng)用使廣告形式呈現(xiàn)出多元化的發(fā)展趨勢(shì)，不僅可以為用戶提供更加豐富的視覺(jué)體驗(yàn)，還可以通過(guò)與媒介之間的溝通使用戶參與其中，為用戶提供不一樣的感受。移動(dòng)端廣告的用戶可以通過(guò)聽(tīng)覺(jué)、觸覺(jué)、視覺(jué)等感官獲得反饋的相應(yīng)信息，以更好地提高移動(dòng)端廣告設(shè)計(jì)效果。通常情況下，用戶粘度可以作為用戶對(duì)品牌忠誠(chéng)度評(píng)價(jià)的重要依據(jù)，一般是指用戶基于使用和偏好的承諾，形成對(duì)產(chǎn)品重復(fù)使用的行為和意愿。在HTML5廣告設(shè)計(jì)過(guò)程中，引入交互元素可以有效提高用戶粘度，并以用戶的留存度和主動(dòng)參與度進(jìn)行衡量，與用戶轉(zhuǎn)換成本保持正比例關(guān)系。對(duì)移動(dòng)端用戶而言，交互元素對(duì)使用粘性存在較為明顯的正向影響[4]。交互環(huán)節(jié)不僅可以使被動(dòng)接受信息的廣告?zhèn)鞑シ绞降玫礁淖?，而且使能夠在互?dòng)體驗(yàn)中主動(dòng)傳播并接受產(chǎn)品信息。例如，蘇泊爾HTML5廣告設(shè)計(jì)過(guò)程中，設(shè)計(jì)的“誰(shuí)先住進(jìn)你新房”廣告，以粘土動(dòng)畫(huà)的形式把人們較為關(guān)注的空氣質(zhì)量問(wèn)題呈現(xiàn)出來(lái)，選題符合社會(huì)熱點(diǎn)話題，不僅可以增加用戶粘度，而且還可以通過(guò)有趣的互動(dòng)、直觀的數(shù)據(jù)，使用戶產(chǎn)生一種身臨其境的感覺(jué)，在增加用戶粘度的同時(shí)，為用戶帶來(lái)滿足感，提高廣告的設(shè)計(jì)效果。

3.4精準(zhǔn)的文案洞察用戶內(nèi)心

對(duì)于HTML5廣告設(shè)計(jì)而言，文案的目的并非欺騙用戶選擇用戶根本不需要的產(chǎn)品，而是為用戶提供所需求的產(chǎn)品，以淺顯易懂的方式把產(chǎn)品具有的核心價(jià)值內(nèi)容傳遞給用戶。HTML5技術(shù)創(chuàng)作出來(lái)的廣告《我害怕閱讀的人》結(jié)合了現(xiàn)代人過(guò)于急功近利，而很少有時(shí)間靜下心來(lái)讀書(shū)，以達(dá)到引導(dǎo)和鼓勵(lì)用戶多讀書(shū)的目的[5]。

3.5聲效渲染為HTML5廣告設(shè)計(jì)增色

聲音主要涉及到音樂(lè)和音效兩部分，基于HTML5技術(shù)的移動(dòng)端廣告設(shè)計(jì)增添聲效，不僅可以營(yíng)造良好的廣告氛圍，為廣告增加趣味性，而且還可以對(duì)廣告起到一定的渲染效果。

3.6激勵(lì)用戶參與，進(jìn)一步強(qiáng)化品牌感知

“強(qiáng)調(diào)、引導(dǎo)、提醒”屬于傳統(tǒng)廣告的關(guān)鍵詞，而HTML5廣告設(shè)計(jì)選擇的關(guān)鍵詞是“互動(dòng)、拉新、留存以及分享”，其嘗試著用“參與”取代“只讀”，這些是HTML5廣告設(shè)計(jì)與傳統(tǒng)廣告的核心區(qū)別。HTML5廣告?zhèn)鞑ヒ话闶侵笍V告與受眾間開(kāi)展的全程對(duì)話，在廣告?zhèn)鞑ブ惺鼙娍梢詤⑴c、分享、評(píng)論和互動(dòng)，讓用戶對(duì)產(chǎn)品有全面的了解和掌握，進(jìn)一步強(qiáng)化品牌感知，提高用戶對(duì)品牌的印象[6]。

4結(jié)語(yǔ)

HTML5技術(shù)屬于新媒體時(shí)展的產(chǎn)物，雖然HTML5廣告設(shè)計(jì)發(fā)展還不夠成熟；但是，隨著移動(dòng)端互聯(lián)網(wǎng)技術(shù)的發(fā)展，有效推動(dòng)了HTML5廣告設(shè)計(jì)的發(fā)展。不僅可以滿足廣大用戶的基本需求，還可以真正的打動(dòng)用戶，達(dá)到品牌宣傳的目的。

作者:李怡 劉大欣 單位：哈爾濱職業(yè)技術(shù)學(xué)院