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

1、    淺談移動(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通過(guò)移動(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廣

2、告應(yīng)運(yùn)而生，開(kāi)啟了移動(dòng)終端廣告的新時(shí)代。與傳統(tǒng)的廣告相比，移動(dòng)終端h5廣播通過(guò)其獨(dú)特的互動(dòng)方式使用戶(hù)產(chǎn)生了全新的體驗(yàn)，獲得了廣泛用戶(hù)的高度好評(píng)。因此，本文結(jié)合h5廣告的優(yōu)勢(shì)，對(duì)h5廣告如何進(jìn)一步提升用戶(hù)體驗(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)打開(kāi)、存儲(chǔ)的功能，并且操作十分簡(jiǎn)單。設(shè)計(jì)師可以結(jié)合用戶(hù)的行為或者移

3、動(dòng)設(shè)備的型號(hào)，適當(dāng)?shù)恼{(diào)整頁(yè)面。這樣一來(lái)，用戶(hù)在任何型號(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)中打開(kāi)，并且任何信息內(nèi)容都可以傳輸。本地存儲(chǔ)。受手機(jī)內(nèi)存限制，用戶(hù)下載的軟件、視頻、音樂(lè)等都會(huì)占據(jù)較大的空間。h5的本地存儲(chǔ)功能能夠?qū)崿F(xiàn)在移動(dòng)端的零負(fù)擔(dān)運(yùn)行，其本地存儲(chǔ)空間能夠容納h5頁(yè)面當(dāng)中的所有元素，從而緩解手機(jī)存儲(chǔ)的壓力。免插件。用戶(hù)在使用電腦進(jìn)行觀看視頻時(shí)，大多情況下都必須安裝相應(yīng)的插件或者app，而h5卻能夠?qū)D像、視頻等多媒體任意插入，這樣一來(lái)，用戶(hù)無(wú)需安裝任何app便能夠?yàn)g

4、覽視頻，方便用戶(hù)的使用。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)域，充滿(mǎn)了生活的各個(gè)角落，受眾人群能夠通過(guò)移動(dòng)或pc設(shè)備實(shí)現(xiàn)對(duì)產(chǎn)品的體驗(yàn)，從而獲得相關(guān)的知識(shí)與信息。h5頁(yè)面的信息傳遞方式有受眾人群的加入后變得更加豐富有趣，能夠在潛移默化中提升產(chǎn)品的知名度。同時(shí)，h5廣告宣傳的過(guò)程中還有抽獎(jiǎng)等活動(dòng)的加入，不僅能夠提升受眾人群的興趣，還能夠

5、更深層次的提高宣傳效果。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ú)法滿(mǎn)足現(xiàn)階段社會(huì)的基本需求，因此，新的廣告形式必須要能夠打破傳統(tǒng)時(shí)間與空間限制，擁有實(shí)時(shí)性、移動(dòng)性的特點(diǎn)。而h5恰好滿(mǎn)足了這一要求，其不僅突破了空間與時(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í)間就是金錢(qián)，其獲取信

6、息是否及時(shí)直接影響到工作的走向與發(fā)展，因此信息的“及時(shí)性”顯得尤為重要。h5跨平臺(tái)、免插件的特點(diǎn)使信息的傳播速度得到了有效提升，用戶(hù)在使用的過(guò)程中能夠更快的獲取到想要的知識(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ì)過(guò)程中，應(yīng)該突出操作按鈕的設(shè)計(jì)，設(shè)計(jì)人員通過(guò)對(duì)頁(yè)面不同內(nèi)容的劃分，能夠使用戶(hù)清晰的注意到功能按鈕與關(guān)鍵元素。這樣一來(lái)，用戶(hù)在使用過(guò)程中便能夠?qū)崿F(xiàn)方便快捷的目的，同時(shí)，還能夠提升用戶(hù)進(jìn)入瀏覽狀

7、態(tài)的速度。2.1.2突出主題任何廣告對(duì)于主題的突出都尤為重要，h5廣告的頁(yè)面設(shè)計(jì)也依舊如此。用戶(hù)在通過(guò)零碎的時(shí)間進(jìn)行瀏覽時(shí)，通常都是進(jìn)行粗略的篩選，如果缺少清晰的主題、內(nèi)容冗雜，則很可能導(dǎo)致用戶(hù)放棄繼續(xù)瀏覽，從而降低h5廣告的傳播效率。由此可見(jiàn)，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)畫(huà)以及視頻等相關(guān)動(dòng)態(tài)插入到頁(yè)面當(dāng)中，這樣不僅能夠提升用戶(hù)的參與性，還能夠增強(qiáng)廣告頁(yè)面的娛樂(lè)性和趣味性

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

9、，并加入一些引導(dǎo)功能，使用戶(hù)能夠更快、更準(zhǔn)的找到想要獲取的信息。h5廣告藝術(shù)性的設(shè)計(jì)應(yīng)該充分迎合用戶(hù)的實(shí)際體驗(yàn)，從而提升用戶(hù)對(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)該加入單手操作的功能，使用戶(hù)通過(guò)簡(jiǎn)單的操作便能夠進(jìn)行單手操作，使操作范圍盡可能的縮小，保證在頁(yè)面中下區(qū)域用戶(hù)手指能觸碰到的位置。所以，h5的頁(yè)面設(shè)計(jì)應(yīng)該遵循兩點(diǎn)原則：謹(jǐn)慎使用右滑操作。很多移動(dòng)設(shè)備都將右滑默認(rèn)設(shè)置為返回，因此，當(dāng)用戶(hù)在單手操作時(shí)，在進(jìn)行右滑指定的操作時(shí)，很可能出現(xiàn)返回上一頁(yè)面的情況出現(xiàn)。按鈕盡

10、量要距離頁(yè)面底部遠(yuǎn)些，這樣在進(jìn)行操作區(qū)域縮小時(shí)，才能夠?qū)崿F(xiàn)對(duì)屏幕的合理適配。由于移動(dòng)設(shè)備種類(lèi)較多，屏幕大小也不盡相同，因此，為保證縮放操作后，屏幕當(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)致用戶(hù)喪失閱讀興趣。據(jù)相關(guān)心理研究顯示，同一屏幕，上側(cè)、左側(cè)相較于下側(cè)、右側(cè)會(huì)使人感到更加輕松自在。因此，設(shè)計(jì)人員在進(jìn)行h5廣告設(shè)計(jì)時(shí)，應(yīng)該將這一心理因素融入其中，遵循此類(lèi)規(guī)律進(jìn)行頁(yè)面的版式設(shè)計(jì)，將重點(diǎn)內(nèi)容盡量都呈現(xiàn)在屏幕左側(cè)或上側(cè)，迎合人體大腦的瀏覽習(xí)性，從而方

11、便用戶(hù)進(jìn)行閱讀。由此可見(jiàn)，設(shè)計(jì)人員應(yīng)該結(jié)合不同的情況和經(jīng)驗(yàn)，將頁(yè)面的關(guān)鍵功能設(shè)置在用戶(hù)注意力集中的區(qū)域。2.2.3信息清晰易懂移動(dòng)終端通常都是通過(guò)單一的二維平面進(jìn)行豐富內(nèi)容的呈現(xiàn)，與視覺(jué)扁平化的設(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)容，還能夠降低用戶(hù)獲取信息的時(shí)間。輕量級(jí)頁(yè)面設(shè)計(jì)在一定程度上解決了用戶(hù)注意力不集中的問(wèn)題，使用戶(hù)能夠通過(guò)更加直觀的方式獲取到想要的信息。這種頁(yè)面設(shè)計(jì)方式在簡(jiǎn)約的同時(shí)又不失時(shí)尚，其中與時(shí)俱進(jìn)的元素是滿(mǎn)足現(xiàn)階段社會(huì)以及人們需求的必備條件。3.h5廣告頁(yè)

12、面設(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á)，而相較于文字 ，圖片更加具有沖擊力，能夠吸引用戶(hù)的注意力。例如，現(xiàn)階段的淘寶網(wǎng)頁(yè)當(dāng)中，各種形式的圖片海報(bào)層出不窮，用戶(hù)能夠根據(jù)自身的喜好和興趣點(diǎn)擊相應(yīng)的海報(bào)，引導(dǎo)用

13、戶(hù)進(jìn)行購(gòu)買(mǎi)。借助可視化的圖形，能夠?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廣告其具備傳播的開(kāi)放性，不僅能夠?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)

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

15、的方式對(duì)用戶(hù)進(jìn)行導(dǎo)航，從而使用戶(hù)能夠直觀的理解設(shè)計(jì)人員的目的，實(shí)現(xiàn)用戶(hù)與頁(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)中豐富的新鮮元素，可以說(shuō)，媒體融合是具有傳統(tǒng)媒體優(yōu)勢(shì)的移動(dòng)終端新媒體傳播形態(tài)。例如，春晚與微信的合作便是傳統(tǒng)媒體與新媒體融合的典型案例。通過(guò)觀看春晚，用戶(hù)便能夠通過(guò)搖一搖獲得隨機(jī)的現(xiàn)金紅包、新年祝福等

16、。而隨著h5技術(shù)的成熟，各大媒體更需要對(duì)優(yōu)質(zhì)的資源進(jìn)行整合，通過(guò)彼此之間的互相彌補(bǔ)實(shí)現(xiàn)優(yōu)勢(shì)的最大發(fā)揮。結(jié)束語(yǔ)：綜上所述，受信息技術(shù)蓬勃發(fā)展的影響，互聯(lián)網(wǎng)使人們的生活變得越來(lái)越豐富，人們足不出戶(hù)便能夠獲取自己想要的信息。為迎合社會(huì)的發(fā)展需求，滿(mǎn)足現(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ì)分析，通過(guò)對(duì)h5廣告優(yōu)勢(shì)以及h5廣告提升用戶(hù)體驗(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廣告