張耿 項洋

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

關鍵詞：HS廣告 游戲互動式 體驗

中圖分類號：TB47 文獻標識碼：A

文章編號：1003-0069（2020）02-0131-03

引言

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

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

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

二、游戲互動式H5廣告

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

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

（二）游戲互動式H5廣告優(yōu)勢

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

（三）游戲互動式H5廣告的體驗層次分析

1.感官體驗

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

2.情感體驗

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

3.思維體驗

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

4.行為體驗

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

5.關聯(lián)體驗

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

三、游戲互動式HTML5廣告的設計原則

（一）互動多樣原則

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

（二）感官平衡原則

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

（三）簡化層級原則

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

（四）品牌融入原則

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

四、游戲互動式廣告的設計策略

（一）運用多交互手段提高用戶粘性

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

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

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

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

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

（四）定準目標人群，提高投放精準度

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

結語

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

參考文獻

[1]中國互聯(lián)網(wǎng)信息中心，第40次中國移動互聯(lián)網(wǎng)發(fā)展狀況報告[R].中國互聯(lián)網(wǎng)信息中心，2017

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

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

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

[5]鄭閔謙，郝珊，朱華.移動端HTML5場景型廣告設計研究[J].設計，2017（23）：144-145.

[6]劉寒韻.移動端界面設計趨勢研究[J].設計，2017（12）：110-111.

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

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

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

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

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