基于情感體驗的HTML5廣告設計研究

劉春雷 高研

關鍵詞：情感體驗;HTML5廣告設計;互動;方法

1情感體驗論述

情感是人類精神活動的重要組成部分，是人們評價客觀事物是否滿足自我需求和態度的一種心理反應。情感體驗強調人的情緒與感受，每個人在接觸相同事物的時候所引發地情感是不同的，這是受到個人的文化、經驗和價值觀念的影響，呈現出的個體差異性。情感來源于體驗，同時體驗引發情感，兩者相互作用，在不同的環境下建立永恒的愉悅回憶。在體驗經濟信息化時代下，人們由物質層面的功能追求逐漸轉向精神層面的情感追求，設計除了“好用”以外，還要通過設計背后的故事來激發用戶反思，實現情感共鳴和建立精神寄托。因此，情感體驗設計可以等同于“以人為本”的設計。從情感出發，發掘用戶深層次的需求，幫助用戶建立良好的自我形象和社會地位，是當代設計師的價值追求。

美國著名的心理學家和工業設計師唐納德·諾曼專注于研究用戶的情感體驗。他在《情感化設計》著作中將情感體驗進行層次性地劃分，包括本能層、行為層以及反思層三種層次。本能層作為基礎層，是情感處理的起點，再設計中通過注視、感受和聲音等生理特征起主導作用;行為層次和使用有關，強調整個使用過程的體驗，想要達到良好的行為層次，就要了解顧客是如何使用產品的，發掘用戶的真正需求;反思層次作為情感體驗的最高層次，它決定著一個人對某件產品的整體印象。反思層次的設計已經超越了外表，是自我意識的反思經驗，表現為喚醒的記憶。

2 HTML5廣告設計概念及表現形式

2.1 HTML5廣告設計概念

HTML5廣告設計簡稱H5廣告設計（文中均用簡稱），它是一種高級網頁技術;集文字、圖片、音樂、視頻、鏈接和豐富的控件、技術、動效等組成。最初H5廣告是指利用HTML5技術實現的互聯網廣告設計，但隨著媒體表現形式的豐富與轉變，H5廣告設計不僅是運用了HTML5技術實現的Web廣告頁面，還涵蓋了因H5而涉及到H5相關技術的所有社交媒體的互動廣告。H5廣告設計以多媒體形式發布產品、活動或品牌信息，通過趣味性的互動體驗讓受眾者參與其中，對品牌推廣、產品宣傳等具有重要作用。

2.2 HTML5廣告設計表現形式

H5廣告普及于各行各業，成為大眾必不可少的信息源，針對不同的目標人群和應用目的，表現形式呈現多元化和分眾化。通過大量的H5廣告設計案例分析，從表現形式上可總結為以下幾種類型：

2.2.1圖文介紹

圖文結合是H5廣告設計中最為基礎和常見的表現形式。“圖”的運用和展現不僅僅局限于靜態的圖片，動畫和視頻的介入更容易引發視覺沖擊。豐富多態的圖片展示搭配相關文案說明就可清楚明了地傳遞廣告內容。這一表現形式的H5廣告設計通常通過點擊、滑動等行為來進行頁面切換，操作簡單，實用性強。

2.2.2情境故事

情境故事作為“以情動人”的廣告設計表現形式，通常在H5廣告設計中建立場景或以某個故事為主線。用戶在體驗時被設計師帶入設定好的情境中，變身為故事的“主人公”。在身臨其境中引發情感共鳴，激發記憶觸點，從而形成長久而深刻的回憶。設計師在制作情境故事形式的H5廣告時，需要對目標人群進行深入地剖析，尋找用戶關心和敏感的熱點和話題，發覺共性痛點，用戶體驗的過程則成為了情感寄托的過程。

2.2.3互動游戲

互動游戲H5廣告設計形式是大眾樂于接受的表現形式。將H5廣告變身成小游戲，通過設置關卡和測試來進行間關，游戲成功后獲得相應的獎勵，可以激發用戶參與和互動的積極性，從而享受游戲的樂趣。這種廣告表現形式通常深受銷售商家的喜愛，游戲的介入使廣告由硬式填壓變為趣味滲透，用戶的態度也由抗拒抵觸轉變為積極參與。互動游戲形式的H5廣告設計將整個營銷過程轉變為游戲體驗的過程，商家通常將相關產品的優惠券或代金券等作為游戲的獎勵，無形中激發用戶消費，實現利益的最大化。

3基于情感體驗的HTML5廣告設計方法

3.1本能層次的生動視覺設計

人們在進入全新的空間時，會通過自身的感官系統有效感知空間的色彩、材質以及整體的布局，這種通過感官獲取印象是情感體驗的第一步。人類的視、聽、嗅、味、觸覺感官在接觸到新鮮事物時會通過形態、聲音、氣味等元素產生情感上的變化。在H5廣告設計中，視覺元素對用戶的體驗質量影響最大，聽覺和觸覺作為次要元素配合視覺營造感知氛圍，嗅覺和味覺也只能通過可視化形態的變化產生聯覺和通感效應。

例如，由“IDO”婚戒H5廣告設計：“十一，別喊朕回宮”，畫面中嚴肅的古代人物形象進行了生動化地動態處理，加上豐富的場景切換，從杭州西湖到云南麗江再到海南，在視覺上帶領用戶體驗了—把十一長假的游玩之樂。設計上采用黃橙色的復古風格，技術上運用Video視頻來進動態化展示，并配以線下大熱的說唱音樂，從本能層次上激發用戶的感官體驗（如圖1）。

3.2行為層次的趣味互動設計

豐富且趣味性的操作能夠引發聯想，生動地引導用戶解讀品牌信息，激發受眾者參與的熱情。趣味性的手勢操作將H5廣告延伸為互動小游戲，操作設計必須要以受眾的需求為中心。

例如，在內衣品牌“維多利亞的秘密”H5廣告中，首頁是一幅經過霧化處理的照片，通過手指摩擦屏幕就能清晰地看到穿著內衣的性感女郎。魅力、浪漫和縱容是此品牌的亮點，霧化處理手段散發著一種朦朧的吸引力，切合品牌的神秘性。用手擦除的行為使用戶不免感到親密和暖昧，這種行為層次下的趣味操作使“維多利亞秘密”的品牌理念在用戶體驗中形成不言而喻的故事。

3.3反思層次的帶入情境設計

受眾行為的反思層次受到個人意志、理解、思維模式的影響，在H5廣告設計中，若要突出情感體驗的反思層次，則需注重廣告體驗過程中對受眾者長久記憶的引發。反思層次的建立不僅僅是所有功能的集合，真正的價值在于整體印象所滿足的情感需求。因此，H5廣告在進行情節和場景的設計時，要讓用戶進入情境中，形成自我心中的故事，故事性的設計體驗可以加深受眾的信任感和認同感。

由“騰訊新間”和“局部氣候”制作的慶祝中華人民共和國建國70周年的國慶H5廣告設計“一條長街看盡七十年歲月的故事”，在設計反思層次做得十分成功。整個廣告采用長圖設計，只需長按畫面即可播放，沒有過多復雜地交互操作。但廣告的故事情節激發回憶，并讓人回味無窮。故事內容是從建國開始到步入現代社會70年間每個時代的變化，色調由舊到新加上簡單地動態演示，將每一次改革和發展的故事都演繹得淋漓盡致。廣告的用戶群體是所有的中國公民，建國初期的景象、唐山大地震、城市和網絡的發展故事都能與用戶產生情感共鳴。在整個體驗過程中，每個年齡段的用戶都能帶入情景，在相應的畫面找到情感寄托（如圖2）。

4結語

從情感入手，挖掘H5廣告設計的視覺要素，分析能夠產生共鳴的故事情節，在用戶心中留下長久的回憶是未來設計師共同努力的方向。隨著移動互聯網新技術的持續涌現和受眾需求的不斷提升，以情動人的H5廣告設計從技術支持到體驗效果上都會充滿無限的可能。未來用戶的行為習慣將會更加精準地被獲取，受眾者的體驗導向也會被準確地定位，H5廣告設計會更多元化和全面地服務于人類。