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

蔣飛燕

摘要：近年來，隨著科學技術的不斷發展，移動終端的功能得到了大幅度的優化，手機已經從原始的通訊工具轉變為移動新媒體。作為最新版超文本標記語言，H5通過移動終端以及自身獨有的技術，逐漸成為現階段廣告傳播的重要方式之一。因此，本文結合H5的相關概念，對H5廣告互動頁面的設計以及H5廣告互動頁面設計的應用進行研究。

關鍵詞：H5廣告互動頁面;媒體融合;移動終端

在移動終端新媒體蓬勃發展的影響下，由于傳統媒體具備很大的局限性，以至于傳統廣告受到了一定程度上的沖擊，導致其傳播效果大幅度下降。同時，移動終端H5廣告應運而生，開啟了移動終端廣告的新時代。與傳統的廣告相比，移動終端H5廣播通過其獨特的互動方式使用戶產生了全新的體驗，獲得了廣泛用戶的高度好評。因此，本文結合H5廣告的優勢，對H5廣告如何進一步提升用戶體驗進行探討。

1.H5與H5廣告的相關概念界定

1.1H5技術的特點和優勢

H5指的是Hyper Text Markup Language第五代版本，用中文翻譯的大致意思是“超文本標記語言”。它能夠將互聯網的表現進行語義化，以此為人們的解讀提供方便，并且能夠提高移動設備多媒體應用的兼容性。與APP相比，H5的投入成本較低，其具有跨平臺打開、存儲的功能，并且操作十分簡單。設計師可以結合用戶的行為或者移動設備的型號，適當的調整頁面。這樣一來，用戶在任何型號設備上操作頁面的分辨率、相關腳本功能都會進行自動切換。簡而言之，H5具有三點優勢：

①跨平臺。即H5能夠在移動端、PC端、安卓或者IOS等任何具有兼容性的系統當中打開，并且任何信息內容都可以傳輸。

②本地存儲。受手機內存限制，用戶下載的軟件、視頻、音樂等都會占據較大的空間。H5的本地存儲功能能夠實現在移動端的零負擔運行，其本地存儲空間能夠容納H5頁面當中的所有元素，從而緩解手機存儲的壓力。

③免插件。用戶在使用電腦進行觀看視頻時，大多情況下都必須安裝相應的插件或者APP，而H5卻能夠將圖像、視頻等多媒體任意插入，這樣一來，用戶無需安裝任何APP便能夠瀏覽視頻，方便用戶的使用。

1.2H5廣告的傳播特點

1.2.1互動性

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

1.2.2移動性

互聯網的普及，使人與網絡之間的聯系變得更加緊密，衣食住行等基本需求都與網絡有關。隨著信息時代的深入發展，傳統信息傳播方式已經無法滿足現階段社會的基本需求，因此，新的廣告形式必須要能夠打破傳統時間與空間限制，擁有實時性、移動性的特點。而H5恰好滿足了這一要求，其不僅突破了空間與時間的限制，還能夠無視設備的局限性，只要保持網絡的暢通，在任何時間和地點，受眾人群只要動一動手指便能夠收獲所需信息。

1.2.3及時性

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

2.H5廣告的頁面設計

2.1H5廣告的設計原則

2.1.1操作方便

H5廣告頁面當中，應該重點突出關鍵功能。隨著移動端的不斷改進與優化，屏幕已經逐漸從半屏轉變為全屏，這就使頁面的呈現內容變得更加豐富化、多元化。因此，H5廣告的頁面設計過程中，應該突出操作按鈕的設計，設計人員通過對頁面不同內容的劃分，能夠使用戶清晰的注意到功能按鈕與關鍵元素。這樣一來，用戶在使用過程中便能夠實現方便快捷的目的，同時，還能夠提升用戶進入瀏覽狀態的速度。

2.1.2突出主題

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

2.1.3科學互動

作為互動頁面，最顯著的特點便是對“互動”的突出。因此，H5廣告設計時應該結合多方面因素，構建出合理、清新的廣告頁面結構。同時，還需要將游戲、動畫以及視頻等相關動態插入到頁面當中，這樣不僅能夠提升用戶的參與性，還能夠增強廣告頁面的娛樂性和趣味性。另外，還應該完善頁面當中索引、查詢等功能，從而使用戶能夠在第一時間找出所需的信息，提高用戶對頁面的印象。現階段，在互聯網移動終端媒介的融合下，使媒介具有更加豐富的運用方法。H5廣告當中視頻、動畫的插入能夠帶給用戶不一樣的感官體驗。

2.1.4視覺體驗

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

2.2H5廣告的設計方法

2.2.1縮小操作區域

隨著移動設備的逐漸更新與優化，已經從原來的半屏變為如今的全屏。因此，H5頁面的設計當中應該加入單手操作的功能，使用戶通過簡單的操作便能夠進行單手操作，使操作范圍盡可能的縮小，保證在頁面中下區域用戶手指能觸碰到的位置。所以，H5的頁面設計應該遵循兩點原則：①謹慎使用右滑操作。很多移動設備都將右滑默認設置為返回，因此，當用戶在單手操作時，在進行右滑指定的操作時，很可能出現返回上一頁面的情況出現。②按鈕盡量要距離頁面底部遠些，這樣在進行操作區域縮小時，才能夠實現對屏幕的合理適配。由于移動設備種類較多，屏幕大小也不盡相同，因此，為保證縮放操作后，屏幕當中能夠呈現出完整的信息，按鈕應該設計在距離底部較遠的位置。

2.2.2扁平化設計

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

2.2.3信息清晰易懂

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

3.H5廣告頁面設計的應用

3.1H5互動廣告版式設計運用

3.1.1可視化圖形

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

3.1.2自適應字體

傳統媒體頁面中的字體設計都是參照其頁面內容而制定。而H5廣告其具備傳播的開放性，不僅能夠實現頁面的無限疊加，還打破了傳統媒體頁面文字容量的限制，并且強大的兼容性能夠很好的移植到不同平臺當中。因此，為更好的適應不同設備的屏幕尺寸，其字體的設計要進行科學的考量。H5頁面設計當中的字體設置一般都在18號以上，字形通常也會選擇加粗，從而提升文字的辨識度。另外，頁面的文字風格要與所闡述的內容相同，整齊的字體能夠使整個頁面顯得連貫、整齊。

3.2H5廣告動效運用

3.2.1超鏈接的運用

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

3.2.2媒體融合的運用

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

結束語：綜上所述，受信息技術蓬勃發展的影響，互聯網使人們的生活變得越來越豐富，人們足不出戶便能夠獲取自己想要的信息。為迎合社會的發展需求，滿足現階段人們的根本需要，移動端H5廣告應運而生。本文結合H5的相關概念，對H5廣告互動頁面的設計以及H5廣告互動頁面設計的應用進行詳細分析，通過對H5廣告優勢以及H5廣告提升用戶體驗的原則和方式的論述和研究，對我國移動端H5廣告發展有著重要意義。

參考文獻：

[1]沈黎萍，陳奕櫟. H5廣告的優勢與設計思路探究[J]. 產業與科技論壇，2019，18（08）：113-114.

[2]孟巖，陳明婷. 基于H5廣告的五大設計要素的互動性研究[J]. 產業與科技論壇，2019，18（04）：220-221.

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

[4]肖蓉. 手機端功能型H5廣告的創意設計研究[D].青島科技大學，2018.

[5]鄭舒逸. 移情化設計在H5廣告中的應用[D].浙江理工大學，2018.

[6]梁圓. 新媒體環境下互動廣告創意表現研究[D].湖北工業大學，2017.

[7]鄧暮媛. 手機端H5廣告中互動化插畫設計的研究[D].湖北美術學院，2017.