淺談移動終端H5廣告互動頁面設(shè)計的思考

1、    淺談移動終端h5廣告互動頁面設(shè)計的思考    蔣飛燕摘要：近年來，隨著科學(xué)技術(shù)的不斷發(fā)展，移動終端的功能得到了大幅度的優(yōu)化，手機已經(jīng)從原始的通訊工具轉(zhuǎn)變?yōu)橐苿有旅襟w。作為最新版超文本標(biāo)記語言，h5通過移動終端以及自身獨有的技術(shù)，逐漸成為現(xiàn)階段廣告?zhèn)鞑サ闹匾绞街弧Ｒ虼?，本文結(jié)合h5的相關(guān)概念，對h5廣告互動頁面的設(shè)計以及h5廣告互動頁面設(shè)計的應(yīng)用進行研究。關(guān)鍵詞：h5廣告互動頁面;媒體融合;移動終端在移動終端新媒體蓬勃發(fā)展的影響下，由于傳統(tǒng)媒體具備很大的局限性，以至于傳統(tǒng)廣告受到了一定程度上的沖擊，導(dǎo)致其傳播效果大幅度下降。同時，移動終端h5廣

2、告應(yīng)運而生，開啟了移動終端廣告的新時代。與傳統(tǒng)的廣告相比，移動終端h5廣播通過其獨特的互動方式使用戶產(chǎn)生了全新的體驗，獲得了廣泛用戶的高度好評。因此，本文結(jié)合h5廣告的優(yōu)勢，對h5廣告如何進一步提升用戶體驗進行探討。1.h5與h5廣告的相關(guān)概念界定1.1h5技術(shù)的特點和優(yōu)勢h5指的是hyper text markup language第五代版本，用中文翻譯的大致意思是“超文本標(biāo)記語言”。它能夠?qū)⒒ヂ?lián)網(wǎng)的表現(xiàn)進行語義化，以此為人們的解讀提供方便，并且能夠提高移動設(shè)備多媒體應(yīng)用的兼容性。與app相比，h5的投入成本較低，其具有跨平臺打開、存儲的功能，并且操作十分簡單。設(shè)計師可以結(jié)合用戶的行為或者移

3、動設(shè)備的型號，適當(dāng)?shù)恼{(diào)整頁面。這樣一來，用戶在任何型號設(shè)備上操作頁面的分辨率、相關(guān)腳本功能都會進行自動切換。簡而言之，h5具有三點優(yōu)勢：跨平臺。即h5能夠在移動端、pc端、安卓或者ios等任何具有兼容性的系統(tǒng)當(dāng)中打開，并且任何信息內(nèi)容都可以傳輸。本地存儲。受手機內(nèi)存限制，用戶下載的軟件、視頻、音樂等都會占據(jù)較大的空間。h5的本地存儲功能能夠?qū)崿F(xiàn)在移動端的零負(fù)擔(dān)運行，其本地存儲空間能夠容納h5頁面當(dāng)中的所有元素，從而緩解手機存儲的壓力。免插件。用戶在使用電腦進行觀看視頻時，大多情況下都必須安裝相應(yīng)的插件或者app，而h5卻能夠?qū)D像、視頻等多媒體任意插入，這樣一來，用戶無需安裝任何app便能夠瀏

4、覽視頻，方便用戶的使用。1.2h5廣告的傳播特點1.2.1互動性現(xiàn)階段，隨著媒體融合趨勢的到來，互動性逐漸被凸顯。從宏觀上看，新媒體的融合在一定程度上改變了受眾人群的信息獲取方式，受眾人群的自主性得到了增強，并且部分人員還能夠參與到傳播當(dāng)中。h5廣告的傳播形式便充分的體現(xiàn)出互動性這一特點，其廣告涉及體育、游戲、招聘等多方面領(lǐng)域，充滿了生活的各個角落，受眾人群能夠通過移動或pc設(shè)備實現(xiàn)對產(chǎn)品的體驗，從而獲得相關(guān)的知識與信息。h5頁面的信息傳遞方式有受眾人群的加入后變得更加豐富有趣，能夠在潛移默化中提升產(chǎn)品的知名度。同時，h5廣告宣傳的過程中還有抽獎等活動的加入，不僅能夠提升受眾人群的興趣，還能夠

5、更深層次的提高宣傳效果。1.2.2移動性互聯(lián)網(wǎng)的普及，使人與網(wǎng)絡(luò)之間的聯(lián)系變得更加緊密，衣食住行等基本需求都與網(wǎng)絡(luò)有關(guān)。隨著信息時代的深入發(fā)展，傳統(tǒng)信息傳播方式已經(jīng)無法滿足現(xiàn)階段社會的基本需求，因此，新的廣告形式必須要能夠打破傳統(tǒng)時間與空間限制，擁有實時性、移動性的特點。而h5恰好滿足了這一要求，其不僅突破了空間與時間的限制，還能夠無視設(shè)備的局限性，只要保持網(wǎng)絡(luò)的暢通，在任何時間和地點，受眾人群只要動一動手指便能夠收獲所需信息。1.2.3及時性在互聯(lián)網(wǎng)技術(shù)的影響下，各種媒介在打破傳統(tǒng)壁壘的同時，還形成了相互之間的融合，在一定程度提高了信息的獲取速度。對于部分受眾人群來講，時間就是金錢，其獲取信

6、息是否及時直接影響到工作的走向與發(fā)展，因此信息的“及時性”顯得尤為重要。h5跨平臺、免插件的特點使信息的傳播速度得到了有效提升，用戶在使用的過程中能夠更快的獲取到想要的知識與信息。2.h5廣告的頁面設(shè)計2.1h5廣告的設(shè)計原則2.1.1操作方便h5廣告頁面當(dāng)中，應(yīng)該重點突出關(guān)鍵功能。隨著移動端的不斷改進與優(yōu)化，屏幕已經(jīng)逐漸從半屏轉(zhuǎn)變?yōu)槿?，這就使頁面的呈現(xiàn)內(nèi)容變得更加豐富化、多元化。因此，h5廣告的頁面設(shè)計過程中，應(yīng)該突出操作按鈕的設(shè)計，設(shè)計人員通過對頁面不同內(nèi)容的劃分，能夠使用戶清晰的注意到功能按鈕與關(guān)鍵元素。這樣一來，用戶在使用過程中便能夠?qū)崿F(xiàn)方便快捷的目的，同時，還能夠提升用戶進入瀏覽狀

7、態(tài)的速度。2.1.2突出主題任何廣告對于主題的突出都尤為重要，h5廣告的頁面設(shè)計也依舊如此。用戶在通過零碎的時間進行瀏覽時，通常都是進行粗略的篩選，如果缺少清晰的主題、內(nèi)容冗雜，則很可能導(dǎo)致用戶放棄繼續(xù)瀏覽，從而降低h5廣告的傳播效率。由此可見，h5廣告的頁面設(shè)計應(yīng)該明確廣告主題，并且頁面要具有清晰的層次感，對廣告內(nèi)容進行科學(xué)合理的組織。2.1.3科學(xué)互動作為互動頁面，最顯著的特點便是對“互動”的突出。因此，h5廣告設(shè)計時應(yīng)該結(jié)合多方面因素，構(gòu)建出合理、清新的廣告頁面結(jié)構(gòu)。同時，還需要將游戲、動畫以及視頻等相關(guān)動態(tài)插入到頁面當(dāng)中，這樣不僅能夠提升用戶的參與性，還能夠增強廣告頁面的娛樂性和趣味性

8、。另外，還應(yīng)該完善頁面當(dāng)中索引、查詢等功能，從而使用戶能夠在第一時間找出所需的信息，提高用戶對頁面的印象。現(xiàn)階段，在互聯(lián)網(wǎng)移動終端媒介的融合下，使媒介具有更加豐富的運用方法。h5廣告當(dāng)中視頻、動畫的插入能夠帶給用戶不一樣的感官體驗。2.1.4視覺體驗手機、電腦等終端設(shè)備剛剛興起的階段，人們出于好奇會對頁面進行盲目的點擊，而隨著現(xiàn)階段互聯(lián)網(wǎng)成熟的今天，用戶已經(jīng)開始有目的進行頁面瀏覽。因此，h5廣告頁面的設(shè)計除基本的視覺元素之外，還應(yīng)該將藝術(shù)設(shè)計充分融入其中，重視用戶的體驗效果，借助于自身的成熟技術(shù)對互動頁面進行特色化設(shè)計。不僅如此，設(shè)計人員還應(yīng)該從用戶的角度出發(fā)，科學(xué)合理的分配頁面呈現(xiàn)內(nèi)容和元素

9、，并加入一些引導(dǎo)功能，使用戶能夠更快、更準(zhǔn)的找到想要獲取的信息。h5廣告藝術(shù)性的設(shè)計應(yīng)該充分迎合用戶的實際體驗，從而提升用戶對廣告的瀏覽興趣，實現(xiàn)雙向互動。2.2h5廣告的設(shè)計方法2.2.1縮小操作區(qū)域隨著移動設(shè)備的逐漸更新與優(yōu)化，已經(jīng)從原來的半屏變?yōu)槿缃竦娜?。因此，h5頁面的設(shè)計當(dāng)中應(yīng)該加入單手操作的功能，使用戶通過簡單的操作便能夠進行單手操作，使操作范圍盡可能的縮小，保證在頁面中下區(qū)域用戶手指能觸碰到的位置。所以，h5的頁面設(shè)計應(yīng)該遵循兩點原則：謹(jǐn)慎使用右滑操作。很多移動設(shè)備都將右滑默認(rèn)設(shè)置為返回，因此，當(dāng)用戶在單手操作時，在進行右滑指定的操作時，很可能出現(xiàn)返回上一頁面的情況出現(xiàn)。按鈕盡

10、量要距離頁面底部遠些，這樣在進行操作區(qū)域縮小時，才能夠?qū)崿F(xiàn)對屏幕的合理適配。由于移動設(shè)備種類較多，屏幕大小也不盡相同，因此，為保證縮放操作后，屏幕當(dāng)中能夠呈現(xiàn)出完整的信息，按鈕應(yīng)該設(shè)計在距離底部較遠的位置。2.2.2扁平化設(shè)計互聯(lián)網(wǎng)時代不斷深入發(fā)展的背景下，人們已經(jīng)逐漸習(xí)慣用零碎的時間來進行閱讀和瀏覽，如果頁面內(nèi)容主次不夠清晰，將會導(dǎo)致用戶喪失閱讀興趣。據(jù)相關(guān)心理研究顯示，同一屏幕，上側(cè)、左側(cè)相較于下側(cè)、右側(cè)會使人感到更加輕松自在。因此，設(shè)計人員在進行h5廣告設(shè)計時，應(yīng)該將這一心理因素融入其中，遵循此類規(guī)律進行頁面的版式設(shè)計，將重點內(nèi)容盡量都呈現(xiàn)在屏幕左側(cè)或上側(cè)，迎合人體大腦的瀏覽習(xí)性，從而方

11、便用戶進行閱讀。由此可見，設(shè)計人員應(yīng)該結(jié)合不同的情況和經(jīng)驗，將頁面的關(guān)鍵功能設(shè)置在用戶注意力集中的區(qū)域。2.2.3信息清晰易懂移動終端通常都是通過單一的二維平面進行豐富內(nèi)容的呈現(xiàn)，與視覺扁平化的設(shè)計相比，信息結(jié)構(gòu)扁平化更加能突出設(shè)計人員的能力水平?，F(xiàn)階段，廣告頁面的設(shè)計理念逐漸向扁平化、輕量化趨勢發(fā)展。輕盈的信息呈現(xiàn)方式不僅能夠突出頁面當(dāng)中發(fā)的重點內(nèi)容，還能夠降低用戶獲取信息的時間。輕量級頁面設(shè)計在一定程度上解決了用戶注意力不集中的問題，使用戶能夠通過更加直觀的方式獲取到想要的信息。這種頁面設(shè)計方式在簡約的同時又不失時尚，其中與時俱進的元素是滿足現(xiàn)階段社會以及人們需求的必備條件。3.h5廣告頁

12、面設(shè)計的應(yīng)用3.1h5互動廣告版式設(shè)計運用3.1.1可視化圖形與傳統(tǒng)媒體設(shè)計觀念方式相比，h5廣告可以不借助任何插件加入視頻、圖片等元素，使圖形在頁面設(shè)計當(dāng)中起到更加豐富、生動的作用。圖形對于信息的表達并非文字可比，h5頁面當(dāng)中的圖形主要包括平面圖像、二維以及三維圖像等不同形式。h5廣告的信息化圖形設(shè)計，在很大程度上縮減了文字的呈現(xiàn)量，利用圖形信息進行文字內(nèi)容的表達。有限的移動設(shè)備屏幕當(dāng)中應(yīng)該盡可能的將想要呈現(xiàn)的內(nèi)容進行充分的表達，而相較于文字 ，圖片更加具有沖擊力，能夠吸引用戶的注意力。例如，現(xiàn)階段的淘寶網(wǎng)頁當(dāng)中，各種形式的圖片海報層出不窮，用戶能夠根據(jù)自身的喜好和興趣點擊相應(yīng)的海報，引導(dǎo)用

13、戶進行購買。借助可視化的圖形，能夠?qū)⑾嚓P(guān)的數(shù)據(jù)進行有效的結(jié)合，從多角度進行主題的闡述與表達，使頁面更加富有生動性、豐富性、形象性。3.1.2自適應(yīng)字體傳統(tǒng)媒體頁面中的字體設(shè)計都是參照其頁面內(nèi)容而制定。而h5廣告其具備傳播的開放性，不僅能夠?qū)崿F(xiàn)頁面的無限疊加，還打破了傳統(tǒng)媒體頁面文字容量的限制，并且強大的兼容性能夠很好的移植到不同平臺當(dāng)中。因此，為更好的適應(yīng)不同設(shè)備的屏幕尺寸，其字體的設(shè)計要進行科學(xué)的考量。h5頁面設(shè)計當(dāng)中的字體設(shè)置一般都在18號以上，字形通常也會選擇加粗，從而提升文字的辨識度。另外，頁面的文字風(fēng)格要與所闡述的內(nèi)容相同，整齊的字體能夠使整個頁面顯得連貫、整齊。3.2h5廣告動效運

14、用3.2.1超鏈接的運用頁面異化是降低用戶瀏覽興趣的主要原因，其主要是由于頁面內(nèi)容文字過多、內(nèi)容冗雜而導(dǎo)致。對于這一問題，設(shè)計人員可以在設(shè)計過程中加入超鏈接來適應(yīng)不同屏幕尺寸。文字過多會使用戶產(chǎn)生閱讀疲勞，從而降低瀏覽興致，超鏈接指的是借助某種指向，使某一頁面到達另一頁面的鏈接。文件、圖片或者頁面可以設(shè)置為目標(biāo)頁面。超鏈接工廠應(yīng)用在非單一頁面當(dāng)中，這樣能夠有效的降低h5頁面當(dāng)中出現(xiàn)過多的文字。這一技術(shù)的應(yīng)用，在很大程度上激起了用戶的瀏覽興趣，并且能夠使用戶對頁面保持長期的關(guān)注，促進了廣告信息的主動傳播。為保證頁面當(dāng)中設(shè)置的超鏈接能夠得到流暢、準(zhǔn)確的跳轉(zhuǎn)，設(shè)計人員可以通過在頁面當(dāng)中插入圖形或文字

15、的方式對用戶進行導(dǎo)航，從而使用戶能夠直觀的理解設(shè)計人員的目的，實現(xiàn)用戶與頁面之間的良好互動。3.2.2媒體融合的運用近年來，受移動互聯(lián)網(wǎng)沖擊，導(dǎo)致傳統(tǒng)媒體的入口價值很大程度上的降低。而對于新媒體來講，也由于傳播模式的改變而受到人們的質(zhì)疑，使其公信力有所下降。媒體融合可以理解為傳統(tǒng)媒體與新媒體之間的融合，移動終端的新媒體無論是從技術(shù)上還是內(nèi)容上都充分融合了傳統(tǒng)媒體的優(yōu)勢，而傳統(tǒng)媒體也能夠借鑒新媒體當(dāng)中豐富的新鮮元素，可以說，媒體融合是具有傳統(tǒng)媒體優(yōu)勢的移動終端新媒體傳播形態(tài)。例如，春晚與微信的合作便是傳統(tǒng)媒體與新媒體融合的典型案例。通過觀看春晚，用戶便能夠通過搖一搖獲得隨機的現(xiàn)金紅包、新年祝福等

16、。而隨著h5技術(shù)的成熟，各大媒體更需要對優(yōu)質(zhì)的資源進行整合，通過彼此之間的互相彌補實現(xiàn)優(yōu)勢的最大發(fā)揮。結(jié)束語：綜上所述，受信息技術(shù)蓬勃發(fā)展的影響，互聯(lián)網(wǎng)使人們的生活變得越來越豐富，人們足不出戶便能夠獲取自己想要的信息。為迎合社會的發(fā)展需求，滿足現(xiàn)階段人們的根本需要，移動端h5廣告應(yīng)運而生。本文結(jié)合h5的相關(guān)概念，對h5廣告互動頁面的設(shè)計以及h5廣告互動頁面設(shè)計的應(yīng)用進行詳細(xì)分析，通過對h5廣告優(yōu)勢以及h5廣告提升用戶體驗的原則和方式的論述和研究，對我國移動端h5廣告發(fā)展有著重要意義。參考文獻：1沈黎萍，陳奕櫟. h5廣告的優(yōu)勢與設(shè)計思路探究j. 產(chǎn)業(yè)與科技論壇，2019，18（08）：113-114.2孟巖，陳明婷. 基于h5廣告