基于情感體驗(yàn)的HTML5廣告設(shè)計(jì)研究

劉春雷 高研

關(guān)鍵詞：情感體驗(yàn);HTML5廣告設(shè)計(jì);互動(dòng);方法

1情感體驗(yàn)論述

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

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

2 HTML5廣告設(shè)計(jì)概念及表現(xiàn)形式

2.1 HTML5廣告設(shè)計(jì)概念

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

2.2 HTML5廣告設(shè)計(jì)表現(xiàn)形式

H5廣告普及于各行各業(yè)，成為大眾必不可少的信息源，針對(duì)不同的目標(biāo)人群和應(yīng)用目的，表現(xiàn)形式呈現(xiàn)多元化和分眾化。通過大量的H5廣告設(shè)計(jì)案例分析，從表現(xiàn)形式上可總結(jié)為以下幾種類型：

2.2.1圖文介紹

圖文結(jié)合是H5廣告設(shè)計(jì)中最為基礎(chǔ)和常見的表現(xiàn)形式。“圖”的運(yùn)用和展現(xiàn)不僅僅局限于靜態(tài)的圖片，動(dòng)畫和視頻的介入更容易引發(fā)視覺沖擊。豐富多態(tài)的圖片展示搭配相關(guān)文案說明就可清楚明了地傳遞廣告內(nèi)容。這一表現(xiàn)形式的H5廣告設(shè)計(jì)通常通過點(diǎn)擊、滑動(dòng)等行為來進(jìn)行頁面切換，操作簡(jiǎn)單，實(shí)用性強(qiáng)。

2.2.2情境故事

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

2.2.3互動(dòng)游戲

互動(dòng)游戲H5廣告設(shè)計(jì)形式是大眾樂于接受的表現(xiàn)形式。將H5廣告變身成小游戲，通過設(shè)置關(guān)卡和測(cè)試來進(jìn)行間關(guān)，游戲成功后獲得相應(yīng)的獎(jiǎng)勵(lì)，可以激發(fā)用戶參與和互動(dòng)的積極性，從而享受游戲的樂趣。這種廣告表現(xiàn)形式通常深受銷售商家的喜愛，游戲的介入使廣告由硬式填壓變?yōu)槿の稘B透，用戶的態(tài)度也由抗拒抵觸轉(zhuǎn)變?yōu)榉e極參與?；?dòng)游戲形式的H5廣告設(shè)計(jì)將整個(gè)營(yíng)銷過程轉(zhuǎn)變?yōu)橛螒蝮w驗(yàn)的過程，商家通常將相關(guān)產(chǎn)品的優(yōu)惠券或代金券等作為游戲的獎(jiǎng)勵(lì)，無形中激發(fā)用戶消費(fèi)，實(shí)現(xiàn)利益的最大化。

3基于情感體驗(yàn)的HTML5廣告設(shè)計(jì)方法

3.1本能層次的生動(dòng)視覺設(shè)計(jì)

人們?cè)谶M(jìn)入全新的空間時(shí)，會(huì)通過自身的感官系統(tǒng)有效感知空間的色彩、材質(zhì)以及整體的布局，這種通過感官獲取印象是情感體驗(yàn)的第一步。人類的視、聽、嗅、味、觸覺感官在接觸到新鮮事物時(shí)會(huì)通過形態(tài)、聲音、氣味等元素產(chǎn)生情感上的變化。在H5廣告設(shè)計(jì)中，視覺元素對(duì)用戶的體驗(yàn)質(zhì)量影響最大，聽覺和觸覺作為次要元素配合視覺營(yíng)造感知氛圍，嗅覺和味覺也只能通過可視化形態(tài)的變化產(chǎn)生聯(lián)覺和通感效應(yīng)。

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

3.2行為層次的趣味互動(dòng)設(shè)計(jì)

豐富且趣味性的操作能夠引發(fā)聯(lián)想，生動(dòng)地引導(dǎo)用戶解讀品牌信息，激發(fā)受眾者參與的熱情。趣味性的手勢(shì)操作將H5廣告延伸為互動(dòng)小游戲，操作設(shè)計(jì)必須要以受眾的需求為中心。

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

3.3反思層次的帶入情境設(shè)計(jì)

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

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

4結(jié)語

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