人機(jī)交互設(shè)計(jì)原則在H5廣告?zhèn)鞑ブ袘?yīng)用

傅文杰 庫小偉

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

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

引言

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

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

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

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

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

2.1 信息展示類H5廣告

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

2.2 互動(dòng)場(chǎng)景類H5廣告

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

2.3 游戲類H5廣告

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

3. ?H5廣告的傳播特點(diǎn)與模式

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

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

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

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

4.1 以用戶為中心的原則

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

4.2 統(tǒng)一性原則

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

4.3 易用性原則

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

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

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

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

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

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

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

5.3 信息清晰易讀，簡(jiǎn)化視覺風(fēng)格

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

結(jié)語

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

參考文獻(xiàn)：

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

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

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

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

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

作者簡(jiǎn)介：傅文杰，碩士研究生，助教，研究方向：互動(dòng)媒體設(shè)計(jì)、交互設(shè)計(jì)。