傅文杰 庫小偉

摘要：隨著移動互聯(lián)網(wǎng)的發(fā)展，新媒體廣告也不斷壯大，其中H5廣告因其技術(shù)的延展性以及視覺多樣性在市場中得到不斷創(chuàng)新，并快速搶占市場成為新媒體廣告的發(fā)展趨勢。文章基于H5廣告的交互性特點，對交互設(shè)計通用原則在H5廣告中的應(yīng)用進行了分析，歸納總結(jié)出我國H5廣告領(lǐng)域目前的分類，并指出了未來可能的發(fā)展方向，為H5廣告基于交互性的設(shè)計發(fā)展提供了一定的參考價值與支持，以促進新媒體廣告行業(yè)的革新與發(fā)展。

關(guān)鍵詞：新媒體廣告；新媒體傳播；人機交互

引言

伴隨著我國互聯(lián)網(wǎng)行業(yè)的快速發(fā)展，移動端新的媒介與渠道不斷產(chǎn)生。在此背景下，亟待創(chuàng)新的傳統(tǒng)廣告行業(yè)紛紛進入其中，向互聯(lián)網(wǎng)進行轉(zhuǎn)型。其中H5廣告借助微信、微博等社交媒體的普及以及抖音、快手等短視頻平臺的發(fā)展，不斷拓展適用的場景與范圍。與此同時，借助H5技術(shù)的發(fā)展，H5廣告的設(shè)計與傳播表現(xiàn)形式也在不斷轉(zhuǎn)變，并隨之推進傳播和變現(xiàn)力度。

1. ?H5新媒體廣告的技術(shù)基礎(chǔ)

H5廣告是大眾對于在HTML5技術(shù)框架下制作的網(wǎng)頁廣告的簡稱。隨著網(wǎng)頁廣告技術(shù)的迅速運用與迭代，現(xiàn)今已經(jīng)不止應(yīng)用于PC網(wǎng)頁端，更是在移動APP領(lǐng)域得到了廣泛應(yīng)用。在近年因社交軟件的爆發(fā)與普及，H5廣告的增長也呈現(xiàn)井噴之勢，短短幾年時間，就被大范圍地推廣與使用。H5指的是第五代超級文本標記語言，其技術(shù)標準規(guī)范于2014年發(fā)布。HTML5的技術(shù)兼容性較好，可以在IOS、安卓、windows等主流操作系統(tǒng)以及目前所有的主流互聯(lián)網(wǎng)設(shè)備平臺中使用[1]。與上一代技術(shù)相比，H5技術(shù)的優(yōu)點使其逐漸成為主流，其中H5對富媒體的支持，使得現(xiàn)今音頻、視頻文件無須第三方插件處理與編輯就可以順利播放。在視頻、音頻以及圖像技術(shù)上的進步與拓展，使其更加符合現(xiàn)今的技術(shù)潮流。用戶習(xí)慣的轉(zhuǎn)變也快速助推了H5廣告的發(fā)展。第四代通信技術(shù)（4G）的普及與成熟，進一步推動了我國互聯(lián)網(wǎng)產(chǎn)品的快速發(fā)展。用戶接收信息的習(xí)慣逐漸被改變。短視頻的興起，使用戶所接收的信息呈現(xiàn)碎片化趨勢，使人們很難形成長閱讀習(xí)慣[2]。另外，隨著互聯(lián)網(wǎng)獲取信息的成本降低，用戶快速養(yǎng)成習(xí)慣，加速形成對新媒體的依賴。

2. H5廣告的現(xiàn)有形式

目前來說，H5廣告形式眾多，隨著互聯(lián)網(wǎng)新媒體的發(fā)展，H5廣告在廣告體系中也不斷擴充。以傳播形式進行分類，主流的H5廣告主要有以下三類：

2.1 信息展示類H5廣告

信息展示類H5廣告，主要指通過圖文排版展示信息內(nèi)容，一般沒有過度的故事情節(jié)渲染與排版，以簡單直白的形式達到強化品牌宣傳和產(chǎn)品推廣的目的。就其形式來說，廣告的指向性與效果十分明顯。例如，近年來各種APP在年末與新春發(fā)布的各種年度賬單與總結(jié)，是主流的表現(xiàn)形式，如網(wǎng)易云的年終聽歌賬單、淘寶生涯賬單，就是信息展示類H5廣告最熱門的形式。這樣的形式讓用戶樂于分享形成社交裂變，在展示品牌與增加用戶黏性上效果非常顯著。

2.2 互動場景類H5廣告

互動場景型H5廣告，一般是指營造一個情景或者氣氛進行展示的互動廣告，以類似互動小品的形式出現(xiàn)。常見的形式有創(chuàng)意清單、DIY海報、趣味問答類等。例如，華為2022年元旦所推出的《開工第一天，新年第一測》，重點在于交互傳播、互動體驗，以點擊觸點開始測試，答題完畢生成風格海報?；訄鼍邦惖膹V告形式眾多，并隨著廣告宣傳的需求在不斷創(chuàng)新，總體來說，是H5廣告未來發(fā)展的一大方向。

2.3 游戲類H5廣告

游戲型H5廣告主要有兩種形式。第一種是在H5中嵌入游戲，以游戲元素的形式進行展開；第二種是以企業(yè)形象元素進行游戲植入強化，主要針對H5廣告的游戲情節(jié)設(shè)計。例如路易威登推出了《麻Jump》，是基于去年的收集類游戲《LOUIS：THE GAME》開發(fā)，其目的是寄托于中國的微信社交生態(tài)，使本土文化與游戲相結(jié)合，達到觸及大眾用戶的廣告?zhèn)鞑バЧ＞驮O(shè)計而言，麻將牌、中國符號化元素以及成都的城市形象元素相融合，可以達到品牌形象本土化的目的。現(xiàn)階段由于開發(fā)難度的逐漸降低與爆款案例的增多，越來越多的品牌開始嘗試H5游戲領(lǐng)域，可以預(yù)見，這一類型也將是未來可能爆發(fā)的方向。

3. ?H5廣告的傳播特點與模式

2014年H5廣告出現(xiàn)以后，很快就搶占了互聯(lián)網(wǎng)新媒體的一席之地。H5廣告已成為互聯(lián)網(wǎng)廣告中少有的存在。就傳播特點而言，H5廣告具有碎片化、消費場景與受眾空間移動化的特點。在廣告?zhèn)鞑ブ小八槠痹缫殉蔀槌Ｒ姮F(xiàn)象，主要指通過破碎的形式以及相對應(yīng)的視聽語言進行廣告?zhèn)鞑ィプ∮脩舻淖⒁饬σ赃_到品牌宣傳的效果。移動互聯(lián)網(wǎng)天生有著“即拿即放”的特點，和互聯(lián)網(wǎng)產(chǎn)品設(shè)計與用戶習(xí)慣之間相互作用，不斷被強化。此外，H5廣告?zhèn)鞑ブ械南M場景和傳統(tǒng)相比，已經(jīng)發(fā)生了巨大的變化，用戶由被動接收信息轉(zhuǎn)變?yōu)橹鲃訉ふ移放苾?nèi)容，這樣可以更好地觸發(fā)對應(yīng)的體驗消費場景，提高廣告的消費轉(zhuǎn)化率。

隨著新媒體廣告的算法不斷更新，H5的廣告?zhèn)鞑鼍案佣ㄖ苹?，通過營造對應(yīng)的消費場景加強互聯(lián)網(wǎng)廣告的傳播效果，最終實現(xiàn)廣告轉(zhuǎn)化與營收雙重豐收效果。蘇詠平[3]指出傳統(tǒng)廣告?zhèn)鞑ブ饕袃煞N模式，即“信息邂逅”與“搜索滿足”。前者是指廣告?zhèn)鞑ブ饕峭ㄟ^廣告主刻意地傳播信息，讓信息與受眾之間有意識無意識地接觸。后者指受眾主動選擇與篩選信息。而H5廣告?zhèn)鞑t將兩者的特點結(jié)合，實現(xiàn)了特有的廣告信息傳播。不僅如此，現(xiàn)今受眾掌握了傳播途徑，他們還擁有了選擇是否進行二次傳播的主動權(quán)。在H5廣告?zhèn)鞑ブ?，首先，引?dǎo)與促成用戶二次傳播是重要的研究內(nèi)容；其次，受眾的信息接收方式發(fā)生改變，傳統(tǒng)紙媒與電視媒體逐漸被替代為用戶PC+互聯(lián)網(wǎng)的背景下，廣告形式也隨著互聯(lián)網(wǎng)的發(fā)展而進行轉(zhuǎn)變。廣告的形式不斷發(fā)展變化，廣告效果與收益也在逐步提高，因此現(xiàn)今的H5廣告開始針對用戶獲取信息的過程進行設(shè)計；最后，信息源與傳播媒介變得模糊，H5廣告打破了廣告主、創(chuàng)意公司與受眾的三方模式，集合互聯(lián)網(wǎng)的特點將提出、制作、推廣在不同媒介中進行穿插，而在這個過程中廣告創(chuàng)意的重要性也被不斷提高。

4. ?H5廣告中的交互設(shè)計原則

自20世紀80年代比爾·莫格里奇提出交互設(shè)計這一概念以來[4]，交互設(shè)計原則就在被不斷地討論與發(fā)展。其研究的目的是為交互設(shè)計提供一系列設(shè)計參考，以提高用戶體驗。就H5廣告而言，其媒介主要為PC+移動端，因此，主要針對移動端、網(wǎng)頁端的交互設(shè)計原則在H5廣告中依然適用。但與之前的APP界面不同，H5界面主要用于廣告宣傳，因此為了達到更好的視覺效果，在交互的容操作性與視覺感染力中的側(cè)重有所不同。我們將從三個方面對H5廣告?zhèn)鞑ブ械慕换ピO(shè)計原則進行探討：

4.1 以用戶為中心的原則

以用戶為中心的設(shè)計原則即UCD（User Centered Design），是交互設(shè)計中最基本的原則，其核心是把用戶需求放在設(shè)計首位，設(shè)計目標都是為提高用戶的使用體驗[5]。UCD原則在不斷地演化過程中形成了很多明確的設(shè)計指導(dǎo)，其中與H5廣告相關(guān)的有兩條：一是尊重用戶習(xí)慣。隨著H5廣告的不斷演化，形式早已由最開始的長圖轉(zhuǎn)變?yōu)榫哂胸S富交互功能的短作品。由于傳統(tǒng)新媒體廣告從平面廣告演變而來，對于用戶交互習(xí)慣的關(guān)注不夠。在H5廣告設(shè)計制作過程中容易習(xí)慣臆斷與猜測用戶的行為習(xí)慣，缺少對用戶行為的深入關(guān)注。二是在H5廣告中越來越多的品牌開始制作互動與游戲類的作品，提高用戶的操作效率?，F(xiàn)今生活節(jié)奏越來越快，用戶對于信息傳遞速度的要求越來越高。因此，配合用戶的使用習(xí)慣，可以促使用戶主動進行分享推廣。對于用戶而言，如在短時間內(nèi)無法吸引用戶進行使用繼續(xù)觀看，則失去了H5廣告?zhèn)鞑サ臋C會，因此提高用戶的操作效率也是推進H5廣告?zhèn)鞑サ囊粭l重要原則。

4.2 統(tǒng)一性原則

對于用戶體驗而言，在同一系統(tǒng)下相同含義的元素使用相同的設(shè)計語言，可以大大降低用戶的學(xué)習(xí)成本。統(tǒng)一性原則可以讓用戶快速地把自己已有的認知，用于新作品的學(xué)習(xí)。由此，可以在H5廣告中大大降低用戶的探索成本，縮短瀏覽內(nèi)容的時間。在H5廣告設(shè)計中主要有兩條原則：首先是視覺風格統(tǒng)一。在H5廣告?zhèn)鞑ブ懈斓亓炎兣c傳播，建立在用戶快速觀看閱讀信息的前提下。視覺風格的統(tǒng)一可以保證，在同一個H5廣告中用戶不用多次學(xué)習(xí)不同的作品界面降低學(xué)習(xí)成本。其次是交互方式統(tǒng)一。H5廣告發(fā)展到現(xiàn)在，越來越多的作品需要用戶進行簡單的交互操作以增加互動性。但在傳播過程中可以發(fā)現(xiàn)，過多過于復(fù)雜的交互形式會阻礙用戶的H5廣告的播放。因此在H5廣告的設(shè)計中，應(yīng)該避免交互環(huán)節(jié)過于復(fù)雜，并且在交互行為的設(shè)計上也應(yīng)該盡力保持統(tǒng)一，以促使整體操作過程平滑流暢。

4.3 易用性原則

在交互設(shè)計中易用性原則是非常重要的一個設(shè)計原則。作品在使用過程中擁有更好的寬容度是近年來交互設(shè)計重點研究方向之一，比如適老化設(shè)計就是易用性原則下的一個設(shè)計趨勢。而在H5廣告領(lǐng)域中追求的視覺效果豐富、表現(xiàn)形式多樣化的大背景下，易用性原則的重要度需要進一步提高。易用性原則有兩大要求：一是頁面的簡潔性。在H5廣告中直接的效果往往可以直接高效地傳達廣告的信息與目的，主動減輕用戶的視覺與記憶負擔，在優(yōu)化用戶使用體驗的同時，還可以加強廣告信息的傳遞；二是操作的易用性。這也是需要重點注意的方向。在H5廣告中最后促成傳播與裂變的就是分享傳播，在促使分享的過程中操作鏈路越短，用戶流失的可能性就越小，越容易達到廣告?zhèn)鞑バЧ?/p>

5. ?交互設(shè)計原則下H5廣告設(shè)計建議

在H5廣告創(chuàng)作時，設(shè)計原則只能指導(dǎo)我們對于設(shè)計方向的判斷，而具體的設(shè)計建議就是在設(shè)計實踐中具體的方法論指導(dǎo)。如圖1是依據(jù)設(shè)計建議所完成的設(shè)計實踐，而對應(yīng)的設(shè)計建議主要有三點：

5.1 尊重用戶習(xí)慣，強化關(guān)鍵信息

現(xiàn)今用戶的閱讀習(xí)慣越來越碎片化，在此背景下應(yīng)尊重用戶習(xí)慣。H5廣告頁面設(shè)計的頁面信息的主次應(yīng)富有條理，對頁面中的版面信息流進行梳理，保證傳遞給用戶的是關(guān)鍵信息，防止用戶因出現(xiàn)閱讀障礙而阻礙傳播。設(shè)計師還應(yīng)掌握基本的心理認知規(guī)律，避免出現(xiàn)簡單的頁面認知障礙，比如，設(shè)計中可以將交互按鍵放置在頁面最為顯眼的位置，也可以將頁面風格進行簡單化處理，通過視覺強調(diào)視覺重點，以明確傳遞給用戶的關(guān)鍵信息，最終達到尊重用戶習(xí)慣而提升用戶使用體驗、強化H5廣告?zhèn)鞑サ哪康?。在圖1的設(shè)計實踐中將設(shè)計流程設(shè)置得很短，就是為了便于用戶習(xí)慣的碎片化傳播，而交互方式與流程單一是避免不必要的用戶認知負擔。

5.2 縮小操作區(qū)域，方便單手操作

移動設(shè)備的屏幕逐漸變大，類型也比較繁多。為保證在不同屏幕設(shè)備中H5頁面的統(tǒng)一性，交互按鈕需考慮單手操作的普遍性、頁面信息在瀏覽過程中的完整性。在設(shè)計中慎用右滑的操作方式，盡量不使用過多交互層級，避免因調(diào)整轉(zhuǎn)化頁面造成誤操作。在按鈕設(shè)計上，需注意不要過于靠近底部區(qū)域，以保證信息的完整性提高用戶體驗。

5.3 信息清晰易讀，簡化視覺風格

易用性原則在H5廣告設(shè)計與傳播中最重要的體現(xiàn)就是信息簡單直接的表達，由此可以提升用戶使用體驗，加快H5廣告的傳播效率。在設(shè)計上，信息扁平化是其中的關(guān)鍵，輕量化的表達不僅可以突出重點，還可以加快受眾信息的接收，縮短廣告?zhèn)鞑サ逆溌?，避免用戶的流失。在設(shè)計風格上，易用性體現(xiàn)在H5頁面大量使用扁平化進行設(shè)計創(chuàng)意。設(shè)計實踐的插畫風格就以扁平插畫為主配合背景凸顯信息主題。

結(jié)語

本文以H5廣告?zhèn)鞑榍腥朦c，分析了人機交互原則在H5廣告設(shè)計中的指導(dǎo)與建議，但對于人機交互技術(shù)在H5廣告中的應(yīng)用并無詳細分析說明。隨著新媒體載體與技術(shù)的發(fā)展，H5廣告未來會更加重視相互性、游戲性。新媒體廣告也會隨著H5技術(shù)與硬件的發(fā)展，更加重視交互體驗與交互設(shè)計。

參考文獻：

[1]徐磊.受眾視角下H5廣告?zhèn)鞑ゲ呗匝芯縖D].南昌大學(xué)，2019.

[2]杜蔚苗.移動終端H5廣告互動頁面設(shè)計研究[D].湖北工業(yè)大學(xué)，2017.

[3]舒詠平.“信息邂逅”與“搜索滿足”——廣告?zhèn)鞑ツＪ降逆幼兣c實踐自覺[J].新聞大學(xué)，2011（2）：79-83，102.

[4]陳詩怡，呂燕茹.人機交互設(shè)計原則在可視化數(shù)據(jù)新聞中的應(yīng)用[J].新媒體研究，2022， 8（14）：12-16.

[5]譚坤，呂悅寧.基于微信平臺的H5廣告設(shè)計策略分析[J].包裝工程，2016， 37（20）：198-202.

作者簡介：傅文杰，碩士研究生，助教，研究方向：互動媒體設(shè)計、交互設(shè)計。