張揚(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ú)需針對(duì)每一類(lèi)服務(wù)安裝相應(yīng)的客戶端軟件，而只需使用瀏覽器這一軟件即可通過(guò)不同的網(wǎng)頁(yè)訪問(wèn)服務(wù)端的應(yīng)用，因此相比較C/S架構(gòu)，B/S架構(gòu)更加方便，因此媒體運(yùn)作模式也隨著用戶使用習(xí)慣發(fā)生著變化。由成本高、投放時(shí)間長(zhǎng)、僅停留在展示層面上的傳統(tǒng)廣告向成本低、投放時(shí)間短、交互體驗(yàn)方式多的HTML5新型廣告形式轉(zhuǎn)變。

一、移動(dòng)端HTML5廣告

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

二、 移動(dòng)端HTML5廣告的交互設(shè)計(jì)形式

（一）情境體驗(yàn)形式

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

> 圖1“兩會(huì)邀你加入群聊”

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

> 圖3“謝謝，媽媽”

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

（二）游戲互動(dòng)形式

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

“騰訊：不是10年老司機(jī)真心玩不了H5”（圖2）是騰訊游戲?yàn)樾麄骰势脚_(tái)在年度發(fā)布會(huì)做的宣傳推廣，宣傳的主題是研發(fā)一款真正陪孩子們的成長(zhǎng)型玩具。在這則HTML5廣告中，用戶通過(guò)不斷尋找臥室中的能提供密碼線索的兒時(shí)用品，如復(fù)讀機(jī)、諾基亞手機(jī)等，尋找到密碼后最終打開(kāi)出去的密碼門(mén)。

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

（三）情感觸動(dòng)形式

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

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

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

三、移動(dòng)端HTML5廣告中的用戶體驗(yàn)

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

（一）媒體廣告中的感官體驗(yàn)

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

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

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

（二）媒體廣告中的行為體驗(yàn)

> 圖4“唐朝有嘻哈”

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

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

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

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

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

（三）媒體廣告中的情感體驗(yàn)

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

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

結(jié)語(yǔ)

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

注釋:

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

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

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

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