淺談移動(dòng)終端H5廣告互動(dòng)頁(yè)面設(shè)計(jì)的思考

蔣飛燕

摘要：近年來(lái)，隨著科學(xué)技術(shù)的不斷發(fā)展，移動(dòng)終端的功能得到了大幅度的優(yōu)化，手機(jī)已經(jīng)從原始的通訊工具轉(zhuǎn)變?yōu)橐苿?dòng)新媒體。作為最新版超文本標(biāo)記語(yǔ)言，H5通過移動(dòng)終端以及自身獨(dú)有的技術(shù)，逐漸成為現(xiàn)階段廣告?zhèn)鞑サ闹匾绞街?。因此，本文結(jié)合H5的相關(guān)概念，對(duì)H5廣告互動(dòng)頁(yè)面的設(shè)計(jì)以及H5廣告互動(dòng)頁(yè)面設(shè)計(jì)的應(yīng)用進(jìn)行研究。

關(guān)鍵詞：H5廣告互動(dòng)頁(yè)面;媒體融合;移動(dòng)終端

在移動(dòng)終端新媒體蓬勃發(fā)展的影響下，由于傳統(tǒng)媒體具備很大的局限性，以至于傳統(tǒng)廣告受到了一定程度上的沖擊，導(dǎo)致其傳播效果大幅度下降。同時(shí)，移動(dòng)終端H5廣告應(yīng)運(yùn)而生，開啟了移動(dòng)終端廣告的新時(shí)代。與傳統(tǒng)的廣告相比，移動(dòng)終端H5廣播通過其獨(dú)特的互動(dòng)方式使用戶產(chǎn)生了全新的體驗(yàn)，獲得了廣泛用戶的高度好評(píng)。因此，本文結(jié)合H5廣告的優(yōu)勢(shì)，對(duì)H5廣告如何進(jìn)一步提升用戶體驗(yàn)進(jìn)行探討。

1.H5與H5廣告的相關(guān)概念界定

1.1H5技術(shù)的特點(diǎn)和優(yōu)勢(shì)

H5指的是Hyper Text Markup Language第五代版本，用中文翻譯的大致意思是“超文本標(biāo)記語(yǔ)言”。它能夠?qū)⒒ヂ?lián)網(wǎng)的表現(xiàn)進(jìn)行語(yǔ)義化，以此為人們的解讀提供方便，并且能夠提高移動(dòng)設(shè)備多媒體應(yīng)用的兼容性。與APP相比，H5的投入成本較低，其具有跨平臺(tái)打開、存儲(chǔ)的功能，并且操作十分簡(jiǎn)單。設(shè)計(jì)師可以結(jié)合用戶的行為或者移動(dòng)設(shè)備的型號(hào)，適當(dāng)?shù)恼{(diào)整頁(yè)面。這樣一來(lái)，用戶在任何型號(hào)設(shè)備上操作頁(yè)面的分辨率、相關(guān)腳本功能都會(huì)進(jìn)行自動(dòng)切換。簡(jiǎn)而言之，H5具有三點(diǎn)優(yōu)勢(shì)：

①跨平臺(tái)。即H5能夠在移動(dòng)端、PC端、安卓或者IOS等任何具有兼容性的系統(tǒng)當(dāng)中打開，并且任何信息內(nèi)容都可以傳輸。

②本地存儲(chǔ)。受手機(jī)內(nèi)存限制，用戶下載的軟件、視頻、音樂等都會(huì)占據(jù)較大的空間。H5的本地存儲(chǔ)功能能夠?qū)崿F(xiàn)在移動(dòng)端的零負(fù)擔(dān)運(yùn)行，其本地存儲(chǔ)空間能夠容納H5頁(yè)面當(dāng)中的所有元素，從而緩解手機(jī)存儲(chǔ)的壓力。

③免插件。用戶在使用電腦進(jìn)行觀看視頻時(shí)，大多情況下都必須安裝相應(yīng)的插件或者APP，而H5卻能夠?qū)D像、視頻等多媒體任意插入，這樣一來(lái)，用戶無(wú)需安裝任何APP便能夠?yàn)g覽視頻，方便用戶的使用。

1.2H5廣告的傳播特點(diǎn)

1.2.1互動(dòng)性

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

1.2.2移動(dòng)性

互聯(lián)網(wǎng)的普及，使人與網(wǎng)絡(luò)之間的聯(lián)系變得更加緊密，衣食住行等基本需求都與網(wǎng)絡(luò)有關(guān)。隨著信息時(shí)代的深入發(fā)展，傳統(tǒng)信息傳播方式已經(jīng)無(wú)法滿足現(xiàn)階段社會(huì)的基本需求，因此，新的廣告形式必須要能夠打破傳統(tǒng)時(shí)間與空間限制，擁有實(shí)時(shí)性、移動(dòng)性的特點(diǎn)。而H5恰好滿足了這一要求，其不僅突破了空間與時(shí)間的限制，還能夠無(wú)視設(shè)備的局限性，只要保持網(wǎng)絡(luò)的暢通，在任何時(shí)間和地點(diǎn)，受眾人群只要?jiǎng)右粍?dòng)手指便能夠收獲所需信息。

1.2.3及時(shí)性

在互聯(lián)網(wǎng)技術(shù)的影響下，各種媒介在打破傳統(tǒng)壁壘的同時(shí)，還形成了相互之間的融合，在一定程度提高了信息的獲取速度。對(duì)于部分受眾人群來(lái)講，時(shí)間就是金錢，其獲取信息是否及時(shí)直接影響到工作的走向與發(fā)展，因此信息的“及時(shí)性”顯得尤為重要。H5跨平臺(tái)、免插件的特點(diǎn)使信息的傳播速度得到了有效提升，用戶在使用的過程中能夠更快的獲取到想要的知識(shí)與信息。

2.H5廣告的頁(yè)面設(shè)計(jì)

2.1H5廣告的設(shè)計(jì)原則

2.1.1操作方便

H5廣告頁(yè)面當(dāng)中，應(yīng)該重點(diǎn)突出關(guān)鍵功能。隨著移動(dòng)端的不斷改進(jìn)與優(yōu)化，屏幕已經(jīng)逐漸從半屏轉(zhuǎn)變?yōu)槿粒@就使頁(yè)面的呈現(xiàn)內(nèi)容變得更加豐富化、多元化。因此，H5廣告的頁(yè)面設(shè)計(jì)過程中，應(yīng)該突出操作按鈕的設(shè)計(jì)，設(shè)計(jì)人員通過對(duì)頁(yè)面不同內(nèi)容的劃分，能夠使用戶清晰的注意到功能按鈕與關(guān)鍵元素。這樣一來(lái)，用戶在使用過程中便能夠?qū)崿F(xiàn)方便快捷的目的，同時(shí)，還能夠提升用戶進(jìn)入瀏覽狀態(tài)的速度。

2.1.2突出主題

任何廣告對(duì)于主題的突出都尤為重要，H5廣告的頁(yè)面設(shè)計(jì)也依舊如此。用戶在通過零碎的時(shí)間進(jìn)行瀏覽時(shí)，通常都是進(jìn)行粗略的篩選，如果缺少清晰的主題、內(nèi)容冗雜，則很可能導(dǎo)致用戶放棄繼續(xù)瀏覽，從而降低H5廣告的傳播效率。由此可見，H5廣告的頁(yè)面設(shè)計(jì)應(yīng)該明確廣告主題，并且頁(yè)面要具有清晰的層次感，對(duì)廣告內(nèi)容進(jìn)行科學(xué)合理的組織。

2.1.3科學(xué)互動(dòng)

作為互動(dòng)頁(yè)面，最顯著的特點(diǎn)便是對(duì)“互動(dòng)”的突出。因此，H5廣告設(shè)計(jì)時(shí)應(yīng)該結(jié)合多方面因素，構(gòu)建出合理、清新的廣告頁(yè)面結(jié)構(gòu)。同時(shí)，還需要將游戲、動(dòng)畫以及視頻等相關(guān)動(dòng)態(tài)插入到頁(yè)面當(dāng)中，這樣不僅能夠提升用戶的參與性，還能夠增強(qiáng)廣告頁(yè)面的娛樂性和趣味性。另外，還應(yīng)該完善頁(yè)面當(dāng)中索引、查詢等功能，從而使用戶能夠在第一時(shí)間找出所需的信息，提高用戶對(duì)頁(yè)面的印象?，F(xiàn)階段，在互聯(lián)網(wǎng)移動(dòng)終端媒介的融合下，使媒介具有更加豐富的運(yùn)用方法。H5廣告當(dāng)中視頻、動(dòng)畫的插入能夠帶給用戶不一樣的感官體驗(yàn)。

2.1.4視覺體驗(yàn)

手機(jī)、電腦等終端設(shè)備剛剛興起的階段，人們出于好奇會(huì)對(duì)頁(yè)面進(jìn)行盲目的點(diǎn)擊，而隨著現(xiàn)階段互聯(lián)網(wǎng)成熟的今天，用戶已經(jīng)開始有目的進(jìn)行頁(yè)面瀏覽。因此，H5廣告頁(yè)面的設(shè)計(jì)除基本的視覺元素之外，還應(yīng)該將藝術(shù)設(shè)計(jì)充分融入其中，重視用戶的體驗(yàn)效果，借助于自身的成熟技術(shù)對(duì)互動(dòng)頁(yè)面進(jìn)行特色化設(shè)計(jì)。不僅如此，設(shè)計(jì)人員還應(yīng)該從用戶的角度出發(fā)，科學(xué)合理的分配頁(yè)面呈現(xiàn)內(nèi)容和元素，并加入一些引導(dǎo)功能，使用戶能夠更快、更準(zhǔn)的找到想要獲取的信息。H5廣告藝術(shù)性的設(shè)計(jì)應(yīng)該充分迎合用戶的實(shí)際體驗(yàn)，從而提升用戶對(duì)廣告的瀏覽興趣，實(shí)現(xiàn)雙向互動(dòng)。

2.2H5廣告的設(shè)計(jì)方法

2.2.1縮小操作區(qū)域

隨著移動(dòng)設(shè)備的逐漸更新與優(yōu)化，已經(jīng)從原來(lái)的半屏變?yōu)槿缃竦娜?。因此，H5頁(yè)面的設(shè)計(jì)當(dāng)中應(yīng)該加入單手操作的功能，使用戶通過簡(jiǎn)單的操作便能夠進(jìn)行單手操作，使操作范圍盡可能的縮小，保證在頁(yè)面中下區(qū)域用戶手指能觸碰到的位置。所以，H5的頁(yè)面設(shè)計(jì)應(yīng)該遵循兩點(diǎn)原則：①謹(jǐn)慎使用右滑操作。很多移動(dòng)設(shè)備都將右滑默認(rèn)設(shè)置為返回，因此，當(dāng)用戶在單手操作時(shí)，在進(jìn)行右滑指定的操作時(shí)，很可能出現(xiàn)返回上一頁(yè)面的情況出現(xiàn)。②按鈕盡量要距離頁(yè)面底部遠(yuǎn)些，這樣在進(jìn)行操作區(qū)域縮小時(shí)，才能夠?qū)崿F(xiàn)對(duì)屏幕的合理適配。由于移動(dòng)設(shè)備種類較多，屏幕大小也不盡相同，因此，為保證縮放操作后，屏幕當(dāng)中能夠呈現(xiàn)出完整的信息，按鈕應(yīng)該設(shè)計(jì)在距離底部較遠(yuǎn)的位置。

2.2.2扁平化設(shè)計(jì)

互聯(lián)網(wǎng)時(shí)代不斷深入發(fā)展的背景下，人們已經(jīng)逐漸習(xí)慣用零碎的時(shí)間來(lái)進(jìn)行閱讀和瀏覽，如果頁(yè)面內(nèi)容主次不夠清晰，將會(huì)導(dǎo)致用戶喪失閱讀興趣。據(jù)相關(guān)心理研究顯示，同一屏幕，上側(cè)、左側(cè)相較于下側(cè)、右側(cè)會(huì)使人感到更加輕松自在。因此，設(shè)計(jì)人員在進(jìn)行H5廣告設(shè)計(jì)時(shí)，應(yīng)該將這一心理因素融入其中，遵循此類規(guī)律進(jìn)行頁(yè)面的版式設(shè)計(jì)，將重點(diǎn)內(nèi)容盡量都呈現(xiàn)在屏幕左側(cè)或上側(cè)，迎合人體大腦的瀏覽習(xí)性，從而方便用戶進(jìn)行閱讀。由此可見，設(shè)計(jì)人員應(yīng)該結(jié)合不同的情況和經(jīng)驗(yàn)，將頁(yè)面的關(guān)鍵功能設(shè)置在用戶注意力集中的區(qū)域。

2.2.3信息清晰易懂

移動(dòng)終端通常都是通過單一的二維平面進(jìn)行豐富內(nèi)容的呈現(xiàn)，與視覺扁平化的設(shè)計(jì)相比，信息結(jié)構(gòu)扁平化更加能突出設(shè)計(jì)人員的能力水平?，F(xiàn)階段，廣告頁(yè)面的設(shè)計(jì)理念逐漸向扁平化、輕量化趨勢(shì)發(fā)展。輕盈的信息呈現(xiàn)方式不僅能夠突出頁(yè)面當(dāng)中發(fā)的重點(diǎn)內(nèi)容，還能夠降低用戶獲取信息的時(shí)間。輕量級(jí)頁(yè)面設(shè)計(jì)在一定程度上解決了用戶注意力不集中的問題，使用戶能夠通過更加直觀的方式獲取到想要的信息。這種頁(yè)面設(shè)計(jì)方式在簡(jiǎn)約的同時(shí)又不失時(shí)尚，其中與時(shí)俱進(jìn)的元素是滿足現(xiàn)階段社會(huì)以及人們需求的必備條件。

3.H5廣告頁(yè)面設(shè)計(jì)的應(yīng)用

3.1H5互動(dòng)廣告版式設(shè)計(jì)運(yùn)用

3.1.1可視化圖形

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

3.1.2自適應(yīng)字體

傳統(tǒng)媒體頁(yè)面中的字體設(shè)計(jì)都是參照其頁(yè)面內(nèi)容而制定。而H5廣告其具備傳播的開放性，不僅能夠?qū)崿F(xiàn)頁(yè)面的無(wú)限疊加，還打破了傳統(tǒng)媒體頁(yè)面文字容量的限制，并且強(qiáng)大的兼容性能夠很好的移植到不同平臺(tái)當(dāng)中。因此，為更好的適應(yīng)不同設(shè)備的屏幕尺寸，其字體的設(shè)計(jì)要進(jìn)行科學(xué)的考量。H5頁(yè)面設(shè)計(jì)當(dāng)中的字體設(shè)置一般都在18號(hào)以上，字形通常也會(huì)選擇加粗，從而提升文字的辨識(shí)度。另外，頁(yè)面的文字風(fēng)格要與所闡述的內(nèi)容相同，整齊的字體能夠使整個(gè)頁(yè)面顯得連貫、整齊。

3.2H5廣告動(dòng)效運(yùn)用

3.2.1超鏈接的運(yùn)用

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

3.2.2媒體融合的運(yùn)用

近年來(lái)，受移動(dòng)互聯(lián)網(wǎng)沖擊，導(dǎo)致傳統(tǒng)媒體的入口價(jià)值很大程度上的降低。而對(duì)于新媒體來(lái)講，也由于傳播模式的改變而受到人們的質(zhì)疑，使其公信力有所下降。媒體融合可以理解為傳統(tǒng)媒體與新媒體之間的融合，移動(dòng)終端的新媒體無(wú)論是從技術(shù)上還是內(nèi)容上都充分融合了傳統(tǒng)媒體的優(yōu)勢(shì)，而傳統(tǒng)媒體也能夠借鑒新媒體當(dāng)中豐富的新鮮元素，可以說，媒體融合是具有傳統(tǒng)媒體優(yōu)勢(shì)的移動(dòng)終端新媒體傳播形態(tài)。例如，春晚與微信的合作便是傳統(tǒng)媒體與新媒體融合的典型案例。通過觀看春晚，用戶便能夠通過搖一搖獲得隨機(jī)的現(xiàn)金紅包、新年祝福等。而隨著H5技術(shù)的成熟，各大媒體更需要對(duì)優(yōu)質(zhì)的資源進(jìn)行整合，通過彼此之間的互相彌補(bǔ)實(shí)現(xiàn)優(yōu)勢(shì)的最大發(fā)揮。

結(jié)束語(yǔ)：綜上所述，受信息技術(shù)蓬勃發(fā)展的影響，互聯(lián)網(wǎng)使人們的生活變得越來(lái)越豐富，人們足不出戶便能夠獲取自己想要的信息。為迎合社會(huì)的發(fā)展需求，滿足現(xiàn)階段人們的根本需要，移動(dòng)端H5廣告應(yīng)運(yùn)而生。本文結(jié)合H5的相關(guān)概念，對(duì)H5廣告互動(dòng)頁(yè)面的設(shè)計(jì)以及H5廣告互動(dòng)頁(yè)面設(shè)計(jì)的應(yīng)用進(jìn)行詳細(xì)分析，通過對(duì)H5廣告優(yōu)勢(shì)以及H5廣告提升用戶體驗(yàn)的原則和方式的論述和研究，對(duì)我國(guó)移動(dòng)端H5廣告發(fā)展有著重要意義。

參考文獻(xiàn)：

[1]沈黎萍，陳奕櫟. H5廣告的優(yōu)勢(shì)與設(shè)計(jì)思路探究[J]. 產(chǎn)業(yè)與科技論壇，2019，18（08）：113-114.

[2]孟巖，陳明婷. 基于H5廣告的五大設(shè)計(jì)要素的互動(dòng)性研究[J]. 產(chǎn)業(yè)與科技論壇，2019，18（04）：220-221.

[3]陳佳娜. 探析廣告設(shè)計(jì)課程中引入H5廣告的必要性與方法[J]. 工業(yè)設(shè)計(jì)，2018，（06）：116-117.

[4]肖蓉. 手機(jī)端功能型H5廣告的創(chuàng)意設(shè)計(jì)研究[D].青島科技大學(xué)，2018.

[5]鄭舒逸. 移情化設(shè)計(jì)在H5廣告中的應(yīng)用[D].浙江理工大學(xué)，2018.

[6]梁圓. 新媒體環(huán)境下互動(dòng)廣告創(chuàng)意表現(xiàn)研究[D].湖北工業(yè)大學(xué)，2017.

[7]鄧暮媛. 手機(jī)端H5廣告中互動(dòng)化插畫設(shè)計(jì)的研究[D].湖北美術(shù)學(xué)院，2017.