人機交互設計原則在H5廣告傳播中應用

傅文杰 庫小偉

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

關鍵詞：新媒體廣告；新媒體傳播；人機交互

引言

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

1. ?H5新媒體廣告的技術基礎

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

2. H5廣告的現有形式

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

2.1 信息展示類H5廣告

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

2.2 互動場景類H5廣告

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

2.3 游戲類H5廣告

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

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

2014年H5廣告出現以后，很快就搶占了互聯網新媒體的一席之地。H5廣告已成為互聯網廣告中少有的存在。就傳播特點而言，H5廣告具有碎片化、消費場景與受眾空間移動化的特點。在廣告傳播中“碎片化”早已成為常見現象，主要指通過破碎的形式以及相對應的視聽語言進行廣告傳播，抓住用戶的注意力以達到品牌宣傳的效果。移動互聯網天生有著“即拿即放”的特點，和互聯網產品設計與用戶習慣之間相互作用，不斷被強化。此外，H5廣告傳播中的消費場景和傳統相比，已經發生了巨大的變化，用戶由被動接收信息轉變為主動尋找品牌內容，這樣可以更好地觸發對應的體驗消費場景，提高廣告的消費轉化率。

隨著新媒體廣告的算法不斷更新，H5的廣告傳播場景更加定制化，通過營造對應的消費場景加強互聯網廣告的傳播效果，最終實現廣告轉化與營收雙重豐收效果。蘇詠平[3]指出傳統廣告傳播主要有兩種模式，即“信息邂逅”與“搜索滿足”。前者是指廣告傳播主要是通過廣告主刻意地傳播信息，讓信息與受眾之間有意識無意識地接觸。后者指受眾主動選擇與篩選信息。而H5廣告傳播則將兩者的特點結合，實現了特有的廣告信息傳播。不僅如此，現今受眾掌握了傳播途徑，他們還擁有了選擇是否進行二次傳播的主動權。在H5廣告傳播中，首先，引導與促成用戶二次傳播是重要的研究內容；其次，受眾的信息接收方式發生改變，傳統紙媒與電視媒體逐漸被替代為用戶PC+互聯網的背景下，廣告形式也隨著互聯網的發展而進行轉變。廣告的形式不斷發展變化，廣告效果與收益也在逐步提高，因此現今的H5廣告開始針對用戶獲取信息的過程進行設計；最后，信息源與傳播媒介變得模糊，H5廣告打破了廣告主、創意公司與受眾的三方模式，集合互聯網的特點將提出、制作、推廣在不同媒介中進行穿插，而在這個過程中廣告創意的重要性也被不斷提高。

4. ?H5廣告中的交互設計原則

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

4.1 以用戶為中心的原則

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

4.2 統一性原則

對于用戶體驗而言，在同一系統下相同含義的元素使用相同的設計語言，可以大大降低用戶的學習成本。統一性原則可以讓用戶快速地把自己已有的認知，用于新作品的學習。由此，可以在H5廣告中大大降低用戶的探索成本，縮短瀏覽內容的時間。在H5廣告設計中主要有兩條原則：首先是視覺風格統一。在H5廣告傳播中更快地裂變與傳播，建立在用戶快速觀看閱讀信息的前提下。視覺風格的統一可以保證，在同一個H5廣告中用戶不用多次學習不同的作品界面降低學習成本。其次是交互方式統一。H5廣告發展到現在，越來越多的作品需要用戶進行簡單的交互操作以增加互動性。但在傳播過程中可以發現，過多過于復雜的交互形式會阻礙用戶的H5廣告的播放。因此在H5廣告的設計中，應該避免交互環節過于復雜，并且在交互行為的設計上也應該盡力保持統一，以促使整體操作過程平滑流暢。

4.3 易用性原則

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

5. ?交互設計原則下H5廣告設計建議

在H5廣告創作時，設計原則只能指導我們對于設計方向的判斷，而具體的設計建議就是在設計實踐中具體的方法論指導。如圖1是依據設計建議所完成的設計實踐，而對應的設計建議主要有三點：

5.1 尊重用戶習慣，強化關鍵信息

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

5.2 縮小操作區域，方便單手操作

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

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

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

結語

本文以H5廣告傳播為切入點，分析了人機交互原則在H5廣告設計中的指導與建議，但對于人機交互技術在H5廣告中的應用并無詳細分析說明。隨著新媒體載體與技術的發展，H5廣告未來會更加重視相互性、游戲性。新媒體廣告也會隨著H5技術與硬件的發展，更加重視交互體驗與交互設計。

參考文獻：

[1]徐磊.受眾視角下H5廣告傳播策略研究[D].南昌大學，2019.

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

[3]舒詠平.“信息邂逅”與“搜索滿足”——廣告傳播模式的嬗變與實踐自覺[J].新聞大學，2011（2）：79-83，102.

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

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

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