HTML5技術的移動端廣告設計

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

摘要：隨著移動終端技術和寬帶無線接入技術的發展，移動端廣告設計不僅能夠提升用戶體驗，而且使得用戶上網的使用習慣發生了改變，并推動了基于html5技術的移動端廣告設計發展，極大地方便了用戶與設計者的記憶和認知。HTML5廣告打破了各種設計界限，將各種藝術表現形式的廣告串聯在一起，給用戶帶來不一樣的感官體驗?；诖耍瑢TML5技術的特點和移動端廣告設計原則進行了介紹，并探究了基于HTML5技術的移動端廣告設計對策，以更好地提高移動端廣告設計質量。

關鍵詞：HTML5技術；移動端廣告；創意性原則

0引言

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

1HTML5技術特點

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

2HTML5廣告設計原則

2.1以用戶為中心

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

2.2以技術為基礎的創意性原則

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

2.3功能與設計的簡潔性原則

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

3HTML5廣告設計的標準與方法

3.1創意是移動端廣告設計的靈魂

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

3.2基于HTML5廣告設計的創新與實現

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

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

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

3.4精準的文案洞察用戶內心

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

3.5聲效渲染為HTML5廣告設計增色

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

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

“強調、引導、提醒”屬于傳統廣告的關鍵詞，而HTML5廣告設計選擇的關鍵詞是“互動、拉新、留存以及分享”，其嘗試著用“參與”取代“只讀”，這些是HTML5廣告設計與傳統廣告的核心區別。HTML5廣告傳播一般是指廣告與受眾間開展的全程對話，在廣告傳播中受眾可以參與、分享、評論和互動，讓用戶對產品有全面的了解和掌握，進一步強化品牌感知，提高用戶對品牌的印象[6]。

4結語

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

作者:李怡 劉大欣 單位：哈爾濱職業技術學院