HTML5技術(shù)的移動端廣告設(shè)計

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

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

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

0引言

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

1HTML5技術(shù)特點

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

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

2.1以用戶為中心

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

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

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

2.3功能與設(shè)計的簡潔性原則

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

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

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

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

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

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

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

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

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

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

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

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

3.6激勵用戶參與，進一步強化品牌感知

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

4結(jié)語

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

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