移動(dòng)端游戲互動(dòng)式H5廣告設(shè)計(jì)研究

張耿 項(xiàng)洋

摘要：通過對(duì)現(xiàn)階段移動(dòng)端游戲互動(dòng)式H5廣告的發(fā)展現(xiàn)狀介紹、對(duì)具體案例進(jìn)行深層次的分析思考，為移動(dòng)端游戲互動(dòng)式H5廣告提供有效的設(shè)計(jì)策略。通過用戶體驗(yàn)的感官體驗(yàn)、情感體驗(yàn)、思維體驗(yàn)、行為體驗(yàn)、關(guān)聯(lián)體驗(yàn)要素來分析具體游戲互動(dòng)式廣告的案例進(jìn)行研究。得出適合移動(dòng)端游戲互動(dòng)式H5廣告的具體設(shè)計(jì)策略。該方法從用戶的體驗(yàn)角度出發(fā)，從而更好地突出品牌化設(shè)計(jì)理念和人性化用戶體驗(yàn)。

關(guān)鍵詞：HS廣告 游戲互動(dòng)式 體驗(yàn)

中圖分類號(hào)：TB47 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2020）02-0131-03

引言

H5廣告是依托于HTML5技術(shù)而實(shí)現(xiàn)的移動(dòng)端網(wǎng)頁廣告。在國(guó)際上沒有出現(xiàn)此類名稱，而是國(guó)內(nèi)比較流行的說法，是方便用戶記憶和理解的。HTML5廣告是從2014年興起，與傳統(tǒng)廣告不同的是，HTML5廣告融合了視覺、技術(shù)、文字、動(dòng)畫效果、音效效果、視頻等多個(gè)維度豐富的設(shè)計(jì)表現(xiàn)形式，并通過微信、微博等社交公眾平臺(tái)發(fā)布信息和宣傳活動(dòng)以及結(jié)合有趣的交互方式來帶動(dòng)用戶參與到品牌宣專的中。

一、H5廣告在國(guó)內(nèi)的發(fā)展現(xiàn)狀

“圍住神經(jīng)貓”的這款H5小游戲自2014年7月在微信朋友圈傳播開來，3天就突破了上億點(diǎn)擊量。HTML5廣告自此在移動(dòng)端廣告界成為商業(yè)活動(dòng)中最重要的營(yíng)銷模式和營(yíng)銷手段。經(jīng)過4年的發(fā)展和變化，2018年2月，北京草莓音樂節(jié)互動(dòng)式HTML5廣告再一次刷爆朋友圈，北京草莓音樂節(jié)完美利用了移動(dòng)優(yōu)先、產(chǎn)品社會(huì)化、交互趣味化的三大優(yōu)勢(shì)在微信平臺(tái)引發(fā)病毒式的分享行為，成功地向廣大群眾宣傳了草莓音樂節(jié)的品牌文化，以及讓所有大眾都有一顆rock的心，每個(gè)人在草莓音樂節(jié)都可以很酷，成為了引人側(cè)目的行業(yè)熱點(diǎn)。

二、游戲互動(dòng)式H5廣告

（一）互動(dòng)式H5廣告的表現(xiàn)形式

微信互動(dòng)型HTML5廣告大致分為四種表現(xiàn)形式：游戲互動(dòng)式，符號(hào)動(dòng)態(tài)頁面，交互式動(dòng)畫和功能性交互式頁面，廣告方可以選擇不同的互動(dòng)類型來適應(yīng)自己的品牌需求。游戲互動(dòng)式廣告在于游戲互動(dòng)的趣味性設(shè)計(jì)，用游戲化的方式讓用戶沉浸其中，以使用戶忘記廣告信息。將廣告宣傳信息融入到游戲中去，讓超強(qiáng)趣味的游戲吸引用戶的眼球，可以讓用戶自動(dòng)瀏覽廣告信息。符號(hào)動(dòng)態(tài)頁面可以利用頁面中的文字、logo、圖形等頁面變化及刺激其他感官的效果來提高與用戶的體驗(yàn)，符號(hào)動(dòng)態(tài)頁面類似于PC端的幻燈片形式，因?yàn)槠浜?jiǎn)單的傳達(dá)方式被廣泛使用。交互式動(dòng)畫廣告類似于動(dòng)畫，但是還具有豐富的交互方式，能夠更加直接地通過交互手法表達(dá)廣告信息以及品牌文化元素，具有較高的商業(yè)價(jià)值。功能性交互頁面是將其變成傳達(dá)信息的一種傳播方式，在宣傳活動(dòng)時(shí)可以兼顧后臺(tái)報(bào)名，整理數(shù)據(jù)等功能，能夠滿足大眾的基本需求，促使大眾二次使用此功能，達(dá)到持續(xù)不斷的傳播效果。

（二）游戲互動(dòng)式H5廣告優(yōu)勢(shì)

游戲互動(dòng)式H5廣告是移動(dòng)端H5廣告的表現(xiàn)形式之一，本質(zhì)是利用游戲化的思維來解決廣告信息的問題。對(duì)于增加用戶黏性游戲化的互動(dòng)體驗(yàn)擁有絕對(duì)優(yōu)勢(shì)。以游戲化的方式作為根本，讓用戶在觀看或者體驗(yàn)的過程中不自主地進(jìn)入廣告主設(shè)的游戲中去，以此來增加用戶對(duì)廣告的友好度，并且避免了用戶對(duì)廣告的抵觸情緒。除了用游戲的方式來吸引用戶之類，很多廣告主還會(huì)在H5廣告中增加故事情節(jié)，以故事的形式帶動(dòng)用戶增強(qiáng)代入感，讓用戶能夠參與廣告內(nèi)容的個(gè)性化游戲方式，極大地增強(qiáng)了用戶的選擇性和游戲自主性。

（三）游戲互動(dòng)式H5廣告的體驗(yàn)層次分析

1.感官體驗(yàn)

在廣告中，多重的感官體驗(yàn)可以引起用戶的情感，這對(duì)于品牌形象的建立，深化用戶的品牌記憶非常重要。移動(dòng)端游戲互動(dòng)式H5廣告的感官體驗(yàn)主要是視覺、聽覺元素，通過圖形、色彩、版式、音效等元素營(yíng)造良好的視聽感受，讓用戶興奮滿意、從而產(chǎn)生共鳴?！秳?chuàng)造「我」的草莓音樂節(jié)》是以標(biāo)題讓用戶產(chǎn)生自我意識(shí)從而引發(fā)用戶的好奇心。首屏是類似于“臉萌”的人物選擇頁面，靜態(tài)的圖文形式加載較快，可緩解用戶的等待耐心。用戶的注意力很容易受到移動(dòng)場(chǎng)景的變換而分散，《創(chuàng)造「我」的草莓音樂節(jié)》如圖1所示，采用視聽結(jié)合的方式，產(chǎn)生臨近感，方便用戶用視聽兩種感官隨時(shí)切換并加深感官體驗(yàn)層次。

2.情感體驗(yàn)

隨著社會(huì)的不斷發(fā)展，用戶除了注重產(chǎn)品的性能和特點(diǎn)，更看重產(chǎn)品或服務(wù)給自己帶來的附加值，也就是找到產(chǎn)品、服務(wù)、廣告與自己情感的一種共鳴，這會(huì)深深影響受眾對(duì)廣告、產(chǎn)品和服務(wù)的評(píng)價(jià)及選擇。圖2中《2018汪年全家福》中的亮點(diǎn)是H5人物制作，并且可以裝飾自己的家，人物制作的每個(gè)部分都有幾十種的選擇，可供用戶制作生成完全不同，各具風(fēng)格的人物形象，讓用戶在體驗(yàn)的過程中感受到自己是在為過年裝飾自己的家，增強(qiáng)用戶的存在感及代入感。

3.思維體驗(yàn)

很多H5廣告都是強(qiáng)行給用戶輸入品牌活動(dòng)或者信息，都是單向性的傳播，很少有用戶會(huì)去轉(zhuǎn)發(fā)傳播，而寶馬的H5廣告如圖3所示，摒棄傳統(tǒng)的圖文展示方式，以場(chǎng)景模擬這種創(chuàng)意因其用戶的興趣分散，極大的廣告通過「我」這個(gè)標(biāo)題極大地吸引了用戶關(guān)注，用戶被這種創(chuàng)意有趣帶來的新鮮感激起了用戶的興趣。集中用戶的注意力，使思維更具創(chuàng)意，在思考后對(duì)寶馬的全新產(chǎn)品有了更好的認(rèn)識(shí)，這就是營(yíng)造思維體驗(yàn)的目標(biāo)。

4.行為體驗(yàn)

《紀(jì)念哈利·波特20周年》中如圖4所示，是通過動(dòng)作交互和圖像交互來增強(qiáng)用戶與廣告之間的行為交換動(dòng)作，用戶可通過點(diǎn)擊、上下滑動(dòng)的手勢(shì)自然完成，并根據(jù)用戶的行為進(jìn)行圖像交互，產(chǎn)生圖形圖像間的交互行為。用戶在滑動(dòng)、點(diǎn)擊的同時(shí)，文字便會(huì)有破碎、移動(dòng)等效果，這就使用戶親身參與到廣告之中，幫助用戶更好的理解廣告的內(nèi)容信息。

5.關(guān)聯(lián)體驗(yàn)

《創(chuàng)造「我」的草莓音樂節(jié)》選擇在微信朋友圈中做爆款H5廣告，首先，定位人群受眾在青年中，用戶將自己與自己所喜歡參加的音樂節(jié)聯(lián)系起來，既可喚起用戶的歸屬感，還可以讓用戶在社交圈分享轉(zhuǎn)發(fā)，吸引更多的年輕用戶，營(yíng)造溝通互動(dòng)的環(huán)境，形成共識(shí)。

三、游戲互動(dòng)式HTML5廣告的設(shè)計(jì)原則

（一）互動(dòng)多樣原則

移動(dòng)端廣告相比于傳統(tǒng)廣告最大的區(qū)別是交互方式，不同的交互方式和方法會(huì)促使用戶轉(zhuǎn)被動(dòng)為主動(dòng)，讓用戶從“接收者”中跳出來，轉(zhuǎn)而變?yōu)椤皠?chuàng)造者”。如上文中介紹的《紀(jì)念哈利·波特20周年》中采用了文字隨屏幕傾斜，滑動(dòng)屏幕文字破碎，自行畫符咒等互動(dòng)手段，帶領(lǐng)用戶進(jìn)入真正的魔法世界，該H5以全新的互動(dòng)形式在朋友圈中刷屏式的出現(xiàn)，形成極大的傳播量。

（二）感官平衡原則

游戲互動(dòng)式H5廣告依靠HTML5技術(shù)來模擬交互游戲的場(chǎng)景，體驗(yàn)經(jīng)濟(jì)的到來促使我們也不僅僅只是通過眼睛來單方面的觀看廣告，而是通過多感官（視覺、聽覺、觸覺等）來實(shí)現(xiàn)游戲環(huán)境中的交互行為，讓用戶自然地融入到廣告中去。所以基于多感官的設(shè)計(jì)因素，設(shè)計(jì)廣告不能單單重視視覺畫面，還要兼顧聽覺，運(yùn)動(dòng)覺，神經(jīng)覺等感官知覺，全新BMW M2預(yù)售的H5如圖3所示，在點(diǎn)擊車這個(gè)圖案時(shí)有發(fā)動(dòng)機(jī)的有震動(dòng)反應(yīng)，并且伴隨著聲音提示來代表已完成操作，因?yàn)槠渌泄俚母兄谟螒蚧?dòng)式H5廣告中其也同等重要，通常品質(zhì)感、體驗(yàn)感較好的游戲互動(dòng)式H5廣告中都少不了全方位的感知效果。

（三）簡(jiǎn)化層級(jí)原則

移動(dòng)端科技的發(fā)展讓廣告信息發(fā)生了巨大的變化，不同的數(shù)字傳播方式有著不同的特性，同樣也就意味著有著不同廣告分級(jí)方式?，F(xiàn)階段H5廣告微信朋友圈中傳播的，而朋友圈內(nèi)頁面分級(jí)是呈直線分級(jí)的，對(duì)于廣告信息的閱讀及交互方式只能通過少量的按鍵進(jìn)行線性選擇。應(yīng)該在設(shè)計(jì)之前抓住用戶的認(rèn)知心理特征，邏輯嚴(yán)謹(jǐn)?shù)臉?gòu)建整個(gè)廣告的框架和層級(jí)，明確視覺導(dǎo)向流程，為了方便引導(dǎo)用戶體驗(yàn)，可增加些動(dòng)效形式來凸顯信息的重要性。在2018汪年全家福的H5廣告中利用簡(jiǎn)潔一段式選擇界面，選擇性別，選擇衣服，生成自己的海報(bào)這種在同一頁面內(nèi)線性的方式很容易操作，更容易使用戶適應(yīng)。

（四）品牌融入原則

商業(yè)廣告的創(chuàng)新重點(diǎn)即是將廣告主的品牌文化嵌入到廣告中去，品牌文化的不同，可以促使更多不同新奇的創(chuàng)意設(shè)計(jì)，讓廣告融入到設(shè)計(jì)中去，使二者完美融合。首先，從宏觀因素來說，廣告中的主題及色彩應(yīng)該融入品牌的代表性元素，如2018草莓音樂節(jié)中以其代表性草莓作為等待頁面，讓品牌元素融入H5廣告中，這是廣告創(chuàng)新的關(guān)鍵;第二，依據(jù)品牌的視覺識(shí)別系統(tǒng)，廣告中的視覺效果應(yīng)與之相符合，這樣更容易加深用戶對(duì)品牌的認(rèn)識(shí)，草莓音樂節(jié)在2018年的對(duì)外輸出形象依舊是草莓，所以在每個(gè)頁面中，都有體現(xiàn)strawbeery的logo，并且主題背景選擇的也是今年的主題色明黃色;第三，區(qū)別于其他競(jìng)品的關(guān)鍵要素就是視覺的差異化，所以要做大量的競(jìng)品分析，總結(jié)競(jìng)品的品牌定位，以及對(duì)外的視覺產(chǎn)出，分析用戶對(duì)于該品牌的視覺印象。規(guī)避相似的視覺形象，得出最貼近自己品牌且區(qū)別于其他競(jìng)品的視覺風(fēng)格。迷笛音樂節(jié)和草莓音樂節(jié)是競(jìng)品，但迷笛音樂節(jié)給大眾的印象是黑綠色為主的品牌形象，草莓音樂節(jié)則是草莓星球的各種衍生品，它把握住了具有強(qiáng)烈代表性的草莓符號(hào)元素，基于草莓元素衍生出一系列草莓音樂節(jié)產(chǎn)品，這種設(shè)計(jì)再次加深了用戶對(duì)品牌的印象。

四、游戲互動(dòng)式廣告的設(shè)計(jì)策略

（一）運(yùn)用多交互手段提高用戶粘性

交互形式不僅局限于視覺、聽覺上，還應(yīng)通過多感官體驗(yàn)來實(shí)現(xiàn)游戲環(huán)境中的交互行為，比如重力感應(yīng)、體感控制、拍攝功能等多種互動(dòng)形式的整合，多感官并行的體驗(yàn)?zāi)Ｊ郊瓤梢栽黾訌V告的趣味性，又可以提高用戶對(duì)此廣告的黏性。然而用戶黏度正是品牌忠誠(chéng)度的重要支撐依據(jù)，用戶參與度和留存度是用來評(píng)價(jià)用戶黏度的評(píng)判標(biāo)準(zhǔn)，同時(shí)與用戶的轉(zhuǎn)換成本成正比，交互元素的多少對(duì)用戶黏性產(chǎn)生至關(guān)重要的影響。一個(gè)有趣的交互方式或者互動(dòng)形式，會(huì)讓用戶有情感和行為上的交流，讓用戶有身當(dāng)其境的感受，這就增加了用戶黏度。H5廣告的互動(dòng)體驗(yàn)形式可以為品牌在產(chǎn)品之外增加樂趣，讓用戶對(duì)品牌的忠誠(chéng)度再次增加。

（二）增加故事情節(jié)，提升用戶代入感

游戲互動(dòng)式H5廣告需提高廣告的故事情節(jié)設(shè)計(jì)，讓用戶與H5廣告產(chǎn)生互動(dòng)性的參與性設(shè)計(jì)。超強(qiáng)的代入感需要多感官體驗(yàn)的融合，另外，還需結(jié)合該品牌產(chǎn)品的特殊性來設(shè)置互動(dòng)的方式，提高用戶體驗(yàn)效果。如圖5所示，2018草莓音樂節(jié)年度主題「我」用戶可通過生成自己的形象，形成自己獨(dú)具一格的入場(chǎng)券，使用戶身臨其境。類似于曾經(jīng)的變裝小游戲中選擇自己喜歡的服飾配飾，根據(jù)自身的形象選擇自己的搭配，讓用戶感到這就是我的形象，提高游戲的代入感。

（三）提升HTML5技術(shù)以實(shí)現(xiàn)更好的用戶體驗(yàn)

H5廣告不僅有基本的圖文功能，還有更高的技術(shù)來實(shí)現(xiàn)更好的用戶體驗(yàn)，如搖一搖、重力感應(yīng)、場(chǎng)景模式等多種互動(dòng)方式。以此來營(yíng)造更加豐富的互動(dòng)形式來增強(qiáng)用戶體驗(yàn)。但是并不能過度重視互動(dòng)形式，忽視最該關(guān)注的戰(zhàn)略層及范圍層，這是一種本末倒置的行為。H5廣告應(yīng)該在戰(zhàn)略層范圍層結(jié)構(gòu)層都合理的范圍內(nèi)，合理地運(yùn)用交互手段，以此為用戶提供有邏輯有內(nèi)容有趣味的H5廣告在。探索更多的日丁ML5技術(shù)，從而實(shí)現(xiàn)更多不同的交互形式及手段，如圖6所示，可以用過屏幕畫符號(hào)讓屏幕的圖形動(dòng)起來，可以突破屏幕瀏覽的界面，實(shí)現(xiàn)重力感應(yīng)等方式。

（四）定準(zhǔn)目標(biāo)人群，提高投放精準(zhǔn)度

H5廣告之所以能瞬間成為爆款，或者說能被用戶所熟知，絕大部分是源于精準(zhǔn)的投放力度，將目標(biāo)用戶群體的用戶畫像以邏輯思維導(dǎo)圖的方式整理出來，比如，目標(biāo)用戶群里的年齡段、經(jīng)常使用的聊天軟件、所搭乘的交通工具、活動(dòng)范圍等。根據(jù)不同的目標(biāo)人群，設(shè)計(jì)不同風(fēng)格的游戲互動(dòng)型H5廣告。2018年草莓音樂節(jié)的主要目標(biāo)人群是18-30歲，熱愛音樂，個(gè)性十足的年輕人，所以H5廣告會(huì)選擇游戲互動(dòng)型的形式，且完全滿足了個(gè)性十足的用戶來自己搭配自己所獨(dú)具一格的穿搭方式。

結(jié)語

在這個(gè)移動(dòng)時(shí)代，數(shù)字媒體已是主流，游戲互動(dòng)式HTML5廣告為了更好地提升網(wǎng)絡(luò)廣告的質(zhì)量，幫助企業(yè)和品牌的宣傳，完善用戶體驗(yàn)。但是僅從游戲機(jī)制的創(chuàng)新是無法從根本上實(shí)現(xiàn)創(chuàng)新發(fā)展。要合理利用用戶的情感以及其心理規(guī)律，從而打造出契合品牌本身的表現(xiàn)形式來打動(dòng)用戶，最終實(shí)現(xiàn)藝術(shù)價(jià)值和商業(yè)價(jià)值的統(tǒng)一，更有利地推廣和服務(wù)于品牌。

參考文獻(xiàn)

[1]中國(guó)互聯(lián)網(wǎng)信息中心，第40次中國(guó)移動(dòng)互聯(lián)網(wǎng)發(fā)展?fàn)顩r報(bào)告[R].中國(guó)互聯(lián)網(wǎng)信息中心，2017

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

[3]李青.互動(dòng)廣告新形式——H5廣告研究[J].新聞研究導(dǎo)刊，2016，7（09）：286.

[4]劉文勇.新時(shí)代傳播的寵兒一一病毒式傳播[J].東南傳播，2007（09）：54-55.

[5]鄭閔謙，郝珊，朱華.移動(dòng)端HTML5場(chǎng)景型廣告設(shè)計(jì)研究[J].設(shè)計(jì)，2017（23）：144-145.

[6]劉寒韻.移動(dòng)端界面設(shè)計(jì)趨勢(shì)研究[J].設(shè)計(jì)，2017（12）：110-111.

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

[8]毓鑫，黃弘.基于移動(dòng)互聯(lián)網(wǎng)環(huán)境下的H5設(shè)計(jì)形式探究[J].設(shè)計(jì)，2016（23）：134-135.

[9]李青.互動(dòng)廣告新形式——H5廣告研究[J].新聞研究導(dǎo)刊，2016，7（09）：286.

[10]張振東.游戲化視角下的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)策略研究[D].江南大學(xué)，2015.

[11]劉辰.交互廣告設(shè)計(jì)[D].大連工業(yè)大學(xué)，2013.