HTML5技術(shù)的移動(dòng)端廣告設(shè)計(jì)
前言：想要寫出一篇引人入勝的文章？我們特意為您整理了HTML5技術(shù)的移動(dòng)端廣告設(shè)計(jì)范文，希望能給你帶來靈感和參考，敬請閱讀。
摘要：隨著移動(dòng)終端技術(shù)和寬帶無線接入技術(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)在一起，給用戶帶來不一樣的感官體驗(yàn)。基于此，對HTML5技術(shù)的特點(diǎn)和移動(dòng)端廣告設(shè)計(jì)原則進(jìn)行了介紹，并探究了基于HTML5技術(shù)的移動(dòng)端廣告設(shè)計(jì)對策，以更好地提高移動(dòng)端廣告設(shè)計(jì)質(zhì)量。
關(guān)鍵詞：HTML5技術(shù)；移動(dòng)端廣告；創(chuàng)意性原則
0引言
傳統(tǒng)服務(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ì)除了視覺效果外，還從觸覺、聽覺等方面為用戶提供不一樣的體驗(yàn)和感受。
1HTML5技術(shù)特點(diǎn)
相比于NativeAPP而言，以HTML5為核心的Web頁面具有輕便化的優(yōu)勢，可以在較短的時(shí)間內(nèi)對新內(nèi)容做出反應(yīng)。HTML5標(biāo)準(zhǔn)具有“富交互、富體驗(yàn)、重內(nèi)容與跨平臺(tái)”等要求，并對HTML4技術(shù)進(jìn)行了大量的優(yōu)化，降低了Web頁面的開發(fā)難度。實(shí)際上，HTML5技術(shù)特點(diǎn)包括以下幾個(gè)方面。第一，跨平臺(tái)性。HTML5技術(shù)提供了開放式結(jié)構(gòu)，能夠?qū)崿F(xiàn)應(yīng)用與數(shù)據(jù)的有效接入，開發(fā)者無需考慮瀏覽器與設(shè)備內(nèi)部數(shù)據(jù)聯(lián)通問題。基于HTML5技術(shù)構(gòu)建的站點(diǎn)與應(yīng)用可以兼容安卓系統(tǒng)、IOS系統(tǒng)、Windows系統(tǒng)等，只需要設(shè)計(jì)者編輯一次程序，就能夠?qū)TML5技術(shù)移植到不同開放平臺(tái)上，既能夠降低開發(fā)和運(yùn)營成本，又能夠給企業(yè)營造更多的發(fā)展空間。第二，支持更多的多媒體元素。在HTML5技術(shù)發(fā)展過程中，Audio/Video可以為其提供強(qiáng)大的多媒體支持，降低了Web頁面開發(fā)對于視頻混排、文字與音頻的壓力，用戶無需在頁面上安裝任何插件，直接播放視頻和聲音文件。在設(shè)計(jì)諸如微博類、新聞?lì)悺⑸缃活悜?yīng)用等內(nèi)容時(shí)，設(shè)計(jì)師還可以實(shí)現(xiàn)文字使用與多媒體混排，比原生開發(fā)更具優(yōu)勢。第三，支持本地儲(chǔ)存。與NativeApp相比，基于HTML5技術(shù)開發(fā)的Web頁面所需要的啟動(dòng)時(shí)間較短，且聯(lián)網(wǎng)速度更快，主要是由于HTML5技術(shù)支持本地儲(chǔ)存功能。在應(yīng)用過程中，不需要下載軟件，而且再次打開網(wǎng)頁時(shí)能夠在短時(shí)間內(nèi)恢復(fù)數(shù)據(jù)，有效降低了網(wǎng)絡(luò)流量，在手機(jī)等移動(dòng)媒體中得到了廣泛應(yīng)用。第四，三維效果。基于Canvas、WebGL、SVG及CSS3的3D功能，能夠使開發(fā)者開發(fā)出更加清晰的Web頁面布局，在瀏覽器中用戶可以體驗(yàn)到更加驚艷的視覺效果。同時(shí)，Canvas的應(yīng)用編程接口可以為用戶提供數(shù)十個(gè)方法，以確保Web繪圖功能的實(shí)現(xiàn)，在使用Canvas標(biāo)簽的Web應(yīng)用過程中，用戶可以動(dòng)態(tài)生成各種動(dòng)畫和圖形圖像，借助WebGL技術(shù)方案，能夠完成對復(fù)雜數(shù)據(jù)的有效處理，使三維的立體效果呈現(xiàn)在頁面上。Canvas和WebGL的出現(xiàn)可以確保Web應(yīng)用獨(dú)立完成繪圖和渲染操作，使頁面效果變得更加豐富。
2HTML5廣告設(shè)計(jì)原則
2.1以用戶為中心
在基于HTML5技術(shù)的移動(dòng)端廣告設(shè)計(jì)過程中，需要對用戶的潛在需求進(jìn)行分析和研究，通過與用戶進(jìn)行交流和溝通設(shè)計(jì)者可以及時(shí)發(fā)現(xiàn)問題，并提出有效的解決對策，以確保HTML5廣告設(shè)計(jì)工作有條不紊的進(jìn)行。對于HTML5技術(shù)而言，可以通過廣告宣傳加深用戶對產(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)意性原則
對于HTML5廣告設(shè)計(jì)而言，創(chuàng)意性在整個(gè)廣告設(shè)計(jì)過程中扮演著十分重要的角色，任何一種形式的廣告都可以借助創(chuàng)意方法進(jìn)行，以提高廣告的趣味性和表現(xiàn)力。實(shí)際上，好的創(chuàng)意讓人感到意料之外，情理之中，可以在短時(shí)間內(nèi)得到更多用戶的關(guān)注，并為用戶提供不一樣的感受。由于移動(dòng)端網(wǎng)絡(luò)的用戶需求呈現(xiàn)出多元化的發(fā)展趨勢，導(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ì)的簡潔性原則
HTML5廣告設(shè)計(jì)主要是通過創(chuàng)意文字、圖形、文案以及聲效等視覺設(shè)計(jì)要素展現(xiàn)主題內(nèi)容；因此，需要從單張頁面、整體頁面及廣告元素等方面對移動(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ì)的靈魂。威廉•伯恩巴克是美國著名的廣告大師，其曾經(jīng)說“對于大量相同的廣告內(nèi)容我們沒有多余的時(shí)間與精力進(jìn)行閱讀。所以在進(jìn)行藝術(shù)創(chuàng)作時(shí)需要?jiǎng)?chuàng)意，以便觀眾更多地了解和贊嘆產(chǎn)品的內(nèi)容，這些正是創(chuàng)意的真正目的”。實(shí)際上，廣告設(shè)計(jì)的精髓主要是憑借腦洞大開的創(chuàng)意構(gòu)思來整合信息，并將其傳達(dá)給用戶，通過精妙的創(chuàng)意吸引用戶的注意力，以提高信息傳播的有效性。因此，在進(jìn)行移動(dòng)端廣告設(shè)計(jì)過程中，好的創(chuàng)意能夠使廣告具有深刻的思想內(nèi)涵，并為觀眾帶來無限的回味和遐想。
3.2基于HTML5廣告設(shè)計(jì)的創(chuàng)新與實(shí)現(xiàn)
3.2.1支持多元化的多媒體元素在頒布HTML5標(biāo)準(zhǔn)之前，需要借助第三方插件在網(wǎng)頁上播放視頻、音頻等內(nèi)容。例如，自主開發(fā)的多媒體插件或Flash。插件的使用不會(huì)受到瀏覽器的安全控制，難免會(huì)出現(xiàn)安全隱患。自從頒布HTML5標(biāo)準(zhǔn)后，新增了Audio與Video兩個(gè)技術(shù)元素。Audio元素主要負(fù)責(zé)播放音頻文件；Video元素主要負(fù)責(zé)播放視頻或電影。在播放過程中，由于Audio與Video元素的使用可以使支持HTML5的瀏覽器直接進(jìn)行播放，不需要安裝其他插件，使廣告更加具有趣味性和創(chuàng)意性[1]。3.2.2HTML5廣告制作平臺(tái)分析通常情況下，HTML5技術(shù)廣告設(shè)計(jì)平臺(tái)包括基礎(chǔ)工具類、輕營銷模板類和功能引擎類三大類。輕營銷模板類：與PPT操作界面相似，操作方便簡單，能夠提供簡單的動(dòng)態(tài)效果和相應(yīng)的模板，動(dòng)態(tài)效果局限于淡出、進(jìn)入及頁面翻頁等交互式操作，一般面向于個(gè)人用戶，只適用于輕度營銷，主要面向非設(shè)計(jì)專業(yè)者，僅有少數(shù)企業(yè)用戶。基礎(chǔ)工具類：相比模板類，基礎(chǔ)工具類可以提供HTML5技術(shù)廣告設(shè)計(jì)操作平臺(tái)，并將許多技術(shù)嵌入在網(wǎng)站中以支持一系列的高級功能[2]，在不會(huì)代碼的情況下使設(shè)計(jì)者能夠設(shè)計(jì)出優(yōu)秀的HTML5廣告，主要面向企業(yè)用戶，傾向于營銷化，少部分為個(gè)人用戶。功能引擎類：主要面向于HTML5廣告設(shè)計(jì)的技術(shù)愛好者或技術(shù)開發(fā)人員，該類平臺(tái)可以為廣大提供基于Canvas的技術(shù)引擎，能夠完成相關(guān)的游戲開發(fā)。3.2.3基于HTML5技術(shù)的3D設(shè)計(jì)與實(shí)現(xiàn)實(shí)際上，HTML5動(dòng)畫效果能夠借助SVG、Canvas和WebGL等技術(shù)實(shí)現(xiàn)，而且每一種技術(shù)都具有其相對獨(dú)特的優(yōu)勢，是HTML5廣告設(shè)計(jì)中較為成熟的一項(xiàng)技術(shù)。在一般HTML5廣告設(shè)計(jì)時(shí)，只需要選擇一種開發(fā)技術(shù)就能達(dá)到預(yù)期的廣告效果。其中SVG技術(shù)是文本式矢量圖形描述語言，由W3C推出，專門為網(wǎng)絡(luò)而設(shè)計(jì)的一種圖像表達(dá)格式。借助SVG技術(shù)可以將品質(zhì)更好的矢量圖形插入到網(wǎng)頁中，通過矢量濾鏡可以使矢量圖像呈現(xiàn)出多元化的視覺效果。Canvas隸屬于HTML5新的技術(shù)語言，能夠被JavaScript代碼操作訪問，允許腳本語言對位圖圖像進(jìn)行動(dòng)態(tài)渲染[3]，通過圖形的繪制可以完成復(fù)雜的動(dòng)畫處理。HTML5技術(shù)在Canvas中嵌入了大量的API，能夠完成對2D圖像的基本操作。
3.3利用交互元素提高用戶粘度
隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展，HTML5技術(shù)的應(yīng)用使廣告形式呈現(xiàn)出多元化的發(fā)展趨勢，不僅可以為用戶提供更加豐富的視覺體驗(yàn)，還可以通過與媒介之間的溝通使用戶參與其中，為用戶提供不一樣的感受。移動(dòng)端廣告的用戶可以通過聽覺、觸覺、視覺等感官獲得反饋的相應(yīng)信息，以更好地提高移動(dòng)端廣告設(shè)計(jì)效果。通常情況下，用戶粘度可以作為用戶對品牌忠誠度評價(jià)的重要依據(jù)，一般是指用戶基于使用和偏好的承諾，形成對產(chǎn)品重復(fù)使用的行為和意愿。在HTML5廣告設(shè)計(jì)過程中，引入交互元素可以有效提高用戶粘度，并以用戶的留存度和主動(dòng)參與度進(jìn)行衡量，與用戶轉(zhuǎn)換成本保持正比例關(guān)系。對移動(dòng)端用戶而言，交互元素對使用粘性存在較為明顯的正向影響[4]。交互環(huán)節(jié)不僅可以使被動(dòng)接受信息的廣告?zhèn)鞑シ绞降玫礁淖儯沂鼓軌蛟诨?dòng)體驗(yàn)中主動(dòng)傳播并接受產(chǎn)品信息。例如，蘇泊爾HTML5廣告設(shè)計(jì)過程中，設(shè)計(jì)的“誰先住進(jìn)你新房”廣告，以粘土動(dòng)畫的形式把人們較為關(guān)注的空氣質(zhì)量問題呈現(xiàn)出來，選題符合社會(huì)熱點(diǎn)話題，不僅可以增加用戶粘度，而且還可以通過有趣的互動(dòng)、直觀的數(shù)據(jù)，使用戶產(chǎn)生一種身臨其境的感覺，在增加用戶粘度的同時(shí)，為用戶帶來滿足感，提高廣告的設(shè)計(jì)效果。
3.4精準(zhǔn)的文案洞察用戶內(nèi)心
對于HTML5廣告設(shè)計(jì)而言，文案的目的并非欺騙用戶選擇用戶根本不需要的產(chǎn)品，而是為用戶提供所需求的產(chǎn)品，以淺顯易懂的方式把產(chǎn)品具有的核心價(jià)值內(nèi)容傳遞給用戶。HTML5技術(shù)創(chuàng)作出來的廣告《我害怕閱讀的人》結(jié)合了現(xiàn)代人過于急功近利，而很少有時(shí)間靜下心來讀書，以達(dá)到引導(dǎo)和鼓勵(lì)用戶多讀書的目的[5]。
3.5聲效渲染為HTML5廣告設(shè)計(jì)增色
聲音主要涉及到音樂和音效兩部分，基于HTML5技術(shù)的移動(dòng)端廣告設(shè)計(jì)增添聲效，不僅可以營造良好的廣告氛圍，為廣告增加趣味性，而且還可以對廣告起到一定的渲染效果。
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告與受眾間開展的全程對話，在廣告?zhèn)鞑ブ惺鼙娍梢詤⑴c、分享、評論和互動(dòng)，讓用戶對產(chǎn)品有全面的了解和掌握，進(jìn)一步強(qiáng)化品牌感知，提高用戶對品牌的印象[6]。
4結(jié)語
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é)院