Html5互動廣告在移動終端的用戶體驗探究

張揚(yáng)揚(yáng)

（首都師范大學(xué) 美術(shù)學(xué)院，北京 100048）

隨著網(wǎng)絡(luò)基礎(chǔ)設(shè)施的不斷完善和信息技術(shù)的發(fā)展，客戶端就技術(shù)逐漸從傳統(tǒng)的基于C/S結(jié)構(gòu)①的交互模式向B/S結(jié)構(gòu)②的交互模式而轉(zhuǎn)變。在B/S架構(gòu)下，用戶無需針對每一類服務(wù)安裝相應(yīng)的客戶端軟件，而只需使用瀏覽器這一軟件即可通過不同的網(wǎng)頁訪問服務(wù)端的應(yīng)用，因此相比較C/S架構(gòu)，B/S架構(gòu)更加方便，因此媒體運(yùn)作模式也隨著用戶使用習(xí)慣發(fā)生著變化。由成本高、投放時間長、僅停留在展示層面上的傳統(tǒng)廣告向成本低、投放時間短、交互體驗方式多的HTML5新型廣告形式轉(zhuǎn)變。

一、移動端HTML5廣告

HTML5廣告是一種基于HTML5編程語言技術(shù)體系的互聯(lián)網(wǎng)廣告，現(xiàn)泛指那些在社交媒體中，如微信，傳播帶有特效（如爆炸等）、互動效果的移動網(wǎng)頁廣告形式。它以多元化的表現(xiàn)方式，插入動畫圖像、音頻等元素，通過有趣的互動，讓用戶接收到不同的感官體驗參與其中，避免傳統(tǒng)廣告帶給用戶與自己無關(guān)的感覺。一個傳統(tǒng)廣告的上線，有復(fù)雜的審批流程，相比之下，HTML5廣告做好后生成鏈接，直接分享就能達(dá)到傳播效果，成本相對較低、開發(fā)周期較短；對于用戶而言，HTML5廣告操作簡單方便，可以在使用的過程中，主動的、有選擇性的了解產(chǎn)品的相關(guān)信息，這種廣告形態(tài)增加了用戶的沉浸度及主動性。

二、 移動端HTML5廣告的交互設(shè)計形式

（一）情境體驗形式

情境體驗形式是指通過營造情氛圍為用戶“還原”真實情景，讓用戶在觀看這類廣告與之交互的過程中產(chǎn)生身臨其境之感。以2017年3月由人民日報發(fā)布的“兩會邀你加入群聊”（圖1）為例。這款廣告采用大家熟知的微信群聊與朋友圈評論這兩種模式作為內(nèi)容展示，這種形式區(qū)別于以往冗長的大段文字的廣告形式，讓用戶在閱讀的過程中了解兩會所提出的民生問題與問題改革，達(dá)到廣告?zhèn)鬟_(dá)信息的目的。進(jìn)入廣告，首先映入眼簾的是用戶最熟悉的手機(jī)開機(jī)虛擬場景，輸入0305所代表會議召開時間的密碼后進(jìn)入“群聊”，在“群聊”中領(lǐng)導(dǎo)人提出民生問題，聊天結(jié)束后跳轉(zhuǎn)到朋友圈，可以查看更多兩會內(nèi)容。

> 圖1“兩會邀你加入群聊”

> 圖2“不是10年老司機(jī)真心玩不了H5”

> 圖3“謝謝，媽媽”

在這個廣告設(shè)計中開鎖界面還原了用戶使用手機(jī)時最常見的場景，逼真的微信界面以及朋友圈評論場景讓用戶主動參與到這個場景之中。將兩會中所提出的政策改革簡潔易懂的表達(dá)出來，成功的吸引用戶的注意力。這款廣告成功地解決了傳統(tǒng)廣告大段文字堆砌到文章里，用戶難以抓住重點(diǎn)等問題。生活場景和廣告信息的巧妙地結(jié)合，根據(jù)用戶思維和互聯(lián)網(wǎng)思維，引導(dǎo)用戶無意識地進(jìn)入場景，增強(qiáng)用戶體驗感受。

（二）游戲互動形式

游戲互動形式是通過游戲的方式，與用戶參與其中?，F(xiàn)如今用戶對于產(chǎn)品使用的要求已經(jīng)不再局限于功能性，更多轉(zhuǎn)向產(chǎn)品所帶來的體驗性上，若將廣告與簡單有趣的小游戲結(jié)合起來，那么更容易刺激用戶的好奇心，加深對產(chǎn)品的印象。

“騰訊：不是10年老司機(jī)真心玩不了H5”（圖2）是騰訊游戲為宣傳互娛平臺在年度發(fā)布會做的宣傳推廣，宣傳的主題是研發(fā)一款真正陪孩子們的成長型玩具。在這則HTML5廣告中，用戶通過不斷尋找臥室中的能提供密碼線索的兒時用品，如復(fù)讀機(jī)、諾基亞手機(jī)等，尋找到密碼后最終打開出去的密碼門。

從交互形式上來看，這則廣告更像是一個密室逃脫游戲，廣告的設(shè)計是在不斷引導(dǎo)用戶去探索游戲里設(shè)置的機(jī)關(guān)，最終打開游戲中能走出去的門后，便了解到騰訊互動娛樂平臺的主題。整個設(shè)計讓用戶不覺得是在看一則廣告，在玩游戲中達(dá)到宣傳目的。

（三）情感觸動形式

情感觸動形式是指通過廣告所蘊(yùn)含的情感意義，對廣告的受眾進(jìn)行情感刺激，進(jìn)而達(dá)到傳遞廣告內(nèi)容的的一種廣告形式。什么是情感？心理學(xué)家將其定義為“人對客觀現(xiàn)實的一種特殊反映形式，是人對于客觀事物是否符合人的需要而產(chǎn)生的態(tài)度體驗”③，情感決定了人對外界事物的精神體驗。情感化設(shè)計可以賦予廣告更多的感動點(diǎn)，拉近與受眾之間的距離，增強(qiáng)了宣傳力度，更重要的是喚起受眾的情感認(rèn)知，得到受眾心理的認(rèn)可。

在母親節(jié)時期洗衣粉品牌奧妙推出“謝謝，媽媽”（圖3），這是一個宣傳奧妙新推出的一款洗衣液的廣告，旨在通過在母親節(jié)對母親的思念達(dá)到宣傳其洗衣粉產(chǎn)品的效果。進(jìn)入這則廣告后，出現(xiàn)一段視頻，視頻內(nèi)容是詢問被采訪的對象是否為媽媽洗過衣服以及媽媽為你洗過多少衣服，進(jìn)而回憶媽媽對自己的愛。廣告的最后是進(jìn)入奧妙京東自營店，可以購買洗衣粉為媽媽洗一次衣服。

“你為媽媽洗過衣服嗎？”簡單的問題里透出的是媽媽對自己多年來默默的愛，以及自己對這些愛的忽視。這則廣告主題很鮮明，孝順父母要落實到行動上，廣告內(nèi)容也很簡單，形式也是常見的內(nèi)嵌視頻形式，但卻觸動用戶情感、引人深思。

三、移動端HTML5廣告中的用戶體驗

用戶體驗是指用戶在使用產(chǎn)品過程中所產(chǎn)生的感受。直到2004年，唐納德·諾 曼《情感化設(shè)計》的問世，標(biāo)志著情感化設(shè)計研究從幕后走向臺前。諾曼提出，產(chǎn)品設(shè)計應(yīng)該解決三個不同層次的認(rèn)知和情感處理過程，即“本能層、行為層和反思層”。在信息爆炸的時代中的虛擬產(chǎn)品，不同于現(xiàn)實產(chǎn)品有“說明書”，用戶在使用過程中只能根據(jù)自己的經(jīng)驗和習(xí)慣自助地來使用，如果在使用過程中，用戶覺得操作過于復(fù)雜，或是對該產(chǎn)品不感興趣，那么用戶就會慢慢選擇放棄對它的使用。HTML5廣告也是一種虛擬的、自助的互聯(lián)網(wǎng)產(chǎn)品，因此在設(shè)計廣告時應(yīng)結(jié)合用戶體驗的相關(guān)理論，滿足用戶的各層次的需求，深化用戶體驗。

（一）媒體廣告中的感官體驗

本能層次是人們看到實物的初始效果，是第一印象，給人直接的感官刺激。感官體驗是調(diào)動了視覺、聽覺、觸覺等感覺來體驗和認(rèn)識這個世界。在媒體互動廣告設(shè)計中，感官體驗通常指的是從獨(dú)特的視角出發(fā)，以一種切身體驗的方式，廣告所帶給用戶的視聽體驗。比如界面用色是否合理、效果音樂是否吸引等，從而進(jìn)行下一步的體驗階段，增加對產(chǎn)品的認(rèn)識。

以搜狗推出的一款互動HTML5廣告“唐朝有嘻哈”為例（圖4），進(jìn)入廣告點(diǎn)擊“開始表演”播放視頻。視頻講述的是盛世唐朝時舉辦的詩詞大賽，選手是李白和杜甫，在選手各對詩一句被評委說沒有新意后，接下來兩位選手開啟說唱模式。在視頻結(jié)束時，畫面中有詩詞以彈幕的形式飄過，用戶可以點(diǎn)擊感興趣的詩詞，體驗搜狗翻譯工具翻譯的英文詩詞。

首先，廣告在視覺設(shè)計上，采用了與當(dāng)時熱播綜藝節(jié)目“中國有嘻哈”舞臺效果相近的色彩和風(fēng)格，并巧妙地結(jié)合了中國傳統(tǒng)元素——皮影進(jìn)行手繪制作，畫面精美，制作精致；其次在聽覺上，廣告大量引用了節(jié)目中說唱的方式，將詩詞、英文伴隨著音樂快速地、押韻地說唱出來，給用戶呈現(xiàn)了一個酷炫又有趣的比賽。這種從視覺、聽覺等感官直覺引發(fā)的刺激，從而有效地調(diào)動用戶的積極性。

（二）媒體廣告中的行為體驗

> 圖4“唐朝有嘻哈”

> 圖5“你敢在辦公室里變瘦嗎？”

> 圖6“‘手心’手霜：我說手心你說喲！”

行為層設(shè)計與用戶的使用、操作有關(guān)，關(guān)注的是用戶在與廣告行為互動時所產(chǎn)生的感受和體驗，如使用過程中操作是否方便、邏輯是否合理等。在移動設(shè)備中我們運(yùn)用點(diǎn)、滑等手勢直接觸摸屏幕，代替了傳統(tǒng)的媒體設(shè)備使用鼠標(biāo)進(jìn)行點(diǎn)擊和瀏覽，因此現(xiàn)在的移動設(shè)備能為用戶帶來更直接、更真實的操作體驗。

Juice Up是一個排毒蔬果汁的品牌，倡導(dǎo)定期以果汁代替一日三餐，通過輕斷食和新鮮蔬果汁維持身體功能，進(jìn)而達(dá)到減肥的效果。進(jìn)入它的廣告頁面時（圖5），用戶會被問道“敢在辦公室里變瘦嗎？”，用戶可以選擇“敢”或“不敢”，如果選擇不敢，會被告知“膽小鬼請關(guān)閉頁面”；如果選擇敢則會進(jìn)入到下個頁面。此時看到一個運(yùn)動型的美女引導(dǎo)你拿著手機(jī)做她給出的動作，做完一套動作后便可以激活這套蔬果汁。在廣告最后還附帶一個給同事倒果汁的雙屏互動小游戲，用一部手機(jī)在另一部手機(jī)上方作出傾倒動作，上方手機(jī)所圖示杯子中的“果汁”會流入下方手機(jī)圖示的杯子中，進(jìn)而完成分享任務(wù)。

這則應(yīng)用重力感應(yīng)④的廣告，模擬生活中倒果汁的場景，大大提高了廣告的可玩性和趣味性。因此，設(shè)計師在進(jìn)行移動端HTML5廣告的交互性設(shè)計時，應(yīng)盡可能地模擬現(xiàn)實生活中熟悉的操作，保證用戶在操作過程中更便捷、真實。

（三）媒體廣告中的情感體驗

反思層是意識、情感和情緒認(rèn)知的最高水平，常常決定用戶對某個產(chǎn)品的整體印象，能讓用戶通過精神的觀照與某種特定的意義聯(lián)系在一起，幫助人們做出決策。反思層的設(shè)計更注重的是信息、文化以及產(chǎn)品給人的感覺，例如相宜本草在2015年中秋時節(jié)推出的一款手機(jī)HTML5廣告“‘手心’手霜：我說手心你說喲！”（圖6）

進(jìn)入廣告以后，首先出現(xiàn)的是一個帶有“你有多久沒回家了？”的頁面，接下來會看到帶有中國元素表現(xiàn)形式的中秋農(nóng)歷界面，出現(xiàn)一組來自全國各地老鄉(xiāng)們的問候視頻，視頻中老鄉(xiāng)們用當(dāng)?shù)胤窖运统鰧枢l(xiāng)和親人的思念和祝福。在廣告的最后，可以借此機(jī)會，錄上一段鄉(xiāng)音，跟親朋好友們嘮嘮家鄉(xiāng)話。這則廣告的成功之處在于把住了用戶的情感需求。用戶通過參與后觸及用戶內(nèi)心，進(jìn)而引起情感共鳴，通過內(nèi)容傳遞、宣傳產(chǎn)品，并最終促使用戶產(chǎn)生消費(fèi)行為。

結(jié)語

以上是基于移動端互動媒體廣告——HTML5設(shè)計用戶體驗的一些案例分析和研究。從新時代的消費(fèi)者行為來看，消費(fèi)者們越來越重視產(chǎn)品所帶來的體驗。因此媒體廣告在進(jìn)行推銷的同時，如何運(yùn)用情境體驗、游戲互動、情感觸動等形式來建立更好的體驗方式是未來在進(jìn)行廣告設(shè)計和策劃時需要考慮的思路，同時，設(shè)計師應(yīng)該在設(shè)計的每一環(huán)節(jié)中都將用戶考慮在內(nèi)，從“本能層、行為層、反思層”三種層次中來抓住用戶心理，提高用戶粘度，提升廣告?zhèn)鞑バЧ??！?/p>

注釋:

① C/S架構(gòu)是指客戶端/服務(wù)器（Client/Server）架構(gòu)，客戶端指客戶端軟件，在這一類架構(gòu)下，用戶通過計算機(jī)安裝的客戶端軟件來訪問服務(wù)器端的服務(wù)。

② B/S架構(gòu)是指瀏覽器/服務(wù)器（Browser/Server）架構(gòu)，用戶通過瀏覽器以網(wǎng)頁的形式訪問服務(wù)器端的應(yīng)用。

③ 謝傳偉.情感化設(shè)計在用戶體驗中的運(yùn)用[J].設(shè)計，2014（2）：21-22.

④ 重力感應(yīng)：重力感應(yīng)是指通過對力敏感的傳感器，感受手機(jī)在變換姿勢時重心的變化，使手機(jī)光標(biāo)變化位置從而實現(xiàn)選擇的功能。