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

張揚揚

（首都師范大學 美術學院，北京 100048）

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

一、移動端HTML5廣告

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

二、 移動端HTML5廣告的交互設計形式

（一）情境體驗形式

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

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

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

> 圖3“謝謝，媽媽”

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

（二）游戲互動形式

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

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

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

（三）情感觸動形式

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

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

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

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

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

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

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

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

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

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

> 圖4“唐朝有嘻哈”

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

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

行為層設計與用戶的使用、操作有關，關注的是用戶在與廣告行為互動時所產生的感受和體驗，如使用過程中操作是否方便、邏輯是否合理等。在移動設備中我們運用點、滑等手勢直接觸摸屏幕，代替了傳統的媒體設備使用鼠標進行點擊和瀏覽，因此現在的移動設備能為用戶帶來更直接、更真實的操作體驗。

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

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

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

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

進入廣告以后，首先出現的是一個帶有“你有多久沒回家了？”的頁面，接下來會看到帶有中國元素表現形式的中秋農歷界面，出現一組來自全國各地老鄉們的問候視頻，視頻中老鄉們用當地方言送出對故鄉和親人的思念和祝福。在廣告的最后，可以借此機會，錄上一段鄉音，跟親朋好友們嘮嘮家鄉話。這則廣告的成功之處在于把住了用戶的情感需求。用戶通過參與后觸及用戶內心，進而引起情感共鳴，通過內容傳遞、宣傳產品，并最終促使用戶產生消費行為。

結語

以上是基于移動端互動媒體廣告——HTML5設計用戶體驗的一些案例分析和研究。從新時代的消費者行為來看，消費者們越來越重視產品所帶來的體驗。因此媒體廣告在進行推銷的同時，如何運用情境體驗、游戲互動、情感觸動等形式來建立更好的體驗方式是未來在進行廣告設計和策劃時需要考慮的思路，同時，設計師應該在設計的每一環節中都將用戶考慮在內，從“本能層、行為層、反思層”三種層次中來抓住用戶心理，提高用戶粘度，提升廣告傳播效果。■

注釋:

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

② B/S架構是指瀏覽器/服務器（Browser/Server）架構，用戶通過瀏覽器以網頁的形式訪問服務器端的應用。

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

④ 重力感應：重力感應是指通過對力敏感的傳感器，感受手機在變換姿勢時重心的變化，使手機光標變化位置從而實現選擇的功能。