基于用戶體驗的H5互動廣告設計研究

張欣雨

摘要：目的：新媒體時代，廣告的設計形式發生了很多變化，H5互動廣告便是其中之一，該廣告形式體量小、易傳播，有很高的應用價值，且產品服務于人，一個好的產品必須具備良好的用戶體驗，文章探究什么是好的用戶體驗、用戶體驗在H5互動廣告中的應用價值以及H5互動廣告發展面臨的挑戰與機遇，為未來新媒體H5互動廣告發展提供參考。方法：文章首先歸納概括用戶體驗和H5互動廣告的概念；其次，結合市場上現有的H5互動廣告設計案例分析探討H5需要的全方位用戶體驗，包括視聽體驗、交互體驗、情感體驗，在此過程中，關鍵要精準定位目標用戶，以便有針對性地進行廣告推廣，充分發揮廣告價值；再次，分析研究用戶體驗在H5互動廣告里的應用價值，包括滿足個人情感價值、提供企業商業價值、傳播社會責任價值；最后，探討未來H5互動廣告的發展趨勢。結果：一個H5廣告要想獲得成功，受眾是其“內核”，廣告制作方只有抓住受眾的興趣偏好，才能制作出符合用戶體驗需求的互動廣告。結論：H5互動廣告若只是簡單堆砌圖片、文字、背景音樂等，用戶在瀏覽過程中難免會覺得枯燥、無趣，只能起到簡單的信息傳播作用，用戶無法深入了解廣告的內涵及其想要傳達的信息，這就要求在設計H5互動廣告時充分考慮用戶體驗。

關鍵詞：新媒體；用戶體驗；H5互動廣告；廣告設計

中圖分類號：F713.8；F274 文獻標識碼：A 文章編號：1004-9436（2023）21-0-03

0 引言

新媒體時代，各種移動端產品應運而生，H5互動廣告作為一種移動端產品，憑借自身的傳播優勢在新媒體廣告行業中占有一席之地。在生活中不難發現H5互動廣告的身影，如邀請函、招聘信息、APP年末總結等，這些都是廣告商向用戶推廣和傳遞自身品牌活動、內涵、價值觀的途徑，廣告商在傳播品牌的過程中，還會引導用戶傳播，以達到宣傳產品的目的。此外，H5互動廣告的制作不能僅圍繞產品或期望傳遞內容本身，還需要著重考慮用戶體驗，即讓受眾更好地查看、互動和傳播，從而實現廣告價值最大化。

1 用戶體驗概念

用戶體驗，顧名思義就是用戶對某一產品的使用體驗，包含用戶體驗過程中的所有想法、感知和交互行為，良好的用戶體驗是產品體驗中每個細節的集合，能讓用戶從中獲得有用信息。“用戶體驗”一詞由用戶體驗設計師唐納德·諾曼提出并推廣，在20世紀90年代中期被廣泛認知。用戶體驗在產品設計中極其重要，產品要服務于人，高質量的產品設計必須能讓用戶獲得良好的使用體驗。

2 移動端H5互動廣告概念

H5由HTML5簡化而來。廣義上的H5指HTML5，即第五代超文本標記語言，通常在網頁中使用HTML代碼。狹義上的H5指移動端上的具有多種互動形式的數字交互產品。H5廣告有成本低、傳播廣、互動性強等優點，同時也存在一定的缺點，如時效性差、傳播渠道受限等，用戶往往只打開一次，這就需要H5互動廣告能夠快速引起用戶注意。H5互動廣告主要有以下幾個類別：展示類、全景/VR類、視頻類、動畫類、數據應用類、游戲類等。隨著視覺創意表現和互聯網技術水平的提高，H5互動廣告的形式和類別會越來越豐富。

3 H5互動廣告設計的全方位用戶體驗

用戶體驗的核心是用戶需求［1］，在H5廣告策劃制作前期，要準確定位廣告受眾，即目標用戶，然后針對目標用戶進行視聽語言設計、交互體驗設計、情感體驗設計，全方位考慮用戶體驗。

3.1 用戶的視聽體驗

好的H5互動廣告能讓人獲得良好的視聽體驗，視聽要素包括圖片、文字、動畫、視頻、音效、動效等。H5頁面的視覺呈現需要符合移動端頁面設計原則，減少用戶的認知負荷，圖片和文字的排布要清晰和易識別，便于用戶讀取可用信息［2］。文字主要包括廣告文案、操作提示、操作反饋等，廣告文案要讓用戶清晰地了解產品的“重點”，如展現產品的鮮明特點，策劃具有創意的廣告文案，通過文字操作提示和操作反饋引導用戶進行下一步操作，需要圍繞整個H5廣告的設計風格進行文字樣式和排版設計［3］。動畫包括加載動畫、動效元素、動畫片段等內容，趣味性強的加載動畫可以避免用戶在等待過程中感到枯燥，頁面元素動效起到引導和強調作用，引導用戶查看主要信息，強調產品賣點。視頻的呈現方式不同，帶給受眾的感受也不同，有的以展示為主，有的則以豎版視頻讓觀眾以第一人稱視角獲取相應信息，提升作品內容呈現的真實感。如騰訊公益H5《跟著阿貓去流浪》，以貓咪的視角完成拍攝，讓用戶沉浸式了解流浪貓在外覓食的不易，呼吁大家對流浪貓伸出援手。音樂和音效貫穿用戶體驗產品的整個流程，選擇的背景音樂要契合產品調性，有趣的音效可以加深用戶對產品的印象。視聽設計往往是H5互動廣告的“門面”，視聽設計需要結合產品特點進行創意設計，這樣才能在激烈的市場競爭中脫穎而出，給用戶留下深刻的印象。

3.2 用戶的交互體驗

用戶體驗設計是以人為本的設計，在設計H5廣告的過程中，交互體驗設計至關重要。首先，由于H5廣告的體量和能傳達給用戶的信息量小，因此H5廣告設計的交互方式要多考慮用戶的操作習慣，做到簡潔明了，否則用戶將沒有耐心去瀏覽和操作。在用戶翻閱查看H5互動廣告時，要適當插入交互提示，即操作反饋。恰到好處的操作反饋能豐富用戶的產品使用體驗，給用戶帶來驚喜。例如，操作完成后屏幕中間彈出小字，頁面發生變化，或以特定音效和動效提示用戶，為用戶查看操作提供便利。

其次，H5廣告設計中常用的交互方式有點擊、長按、滑動。點擊這種交互方式得到了廣泛應用，要讓簡單的交互方式變得生動有趣，還需要結合H5本身想傳遞的內容；長按這種交互方式要求H5有較強的故事性與情節性，能給用戶帶來較好的視覺體驗；滑動這種交互方式常用來翻頁，往不同方向滑動往往有不同的交互效果，普通的交互方式結合廣告中的創意性內容，會煥發生機，讓用戶眼前一亮。在H5《是誰在彈古琴》中，左右滑動時會出現人在水上行走的畫面，上下滑動時可以尋找線索，任意滑動可以撥開畫卷。結合畫面與音效，營造飄逸悠揚的氛圍，讓用戶感受到高山流水和琴音結合的獨特意境。

最后，應將新的科技手段運用到H5廣告中，如VR、AR、AI繪畫，在H5《AI畫筆連接愛》中，通過AI技術，分隔兩岸的《富春山居圖》山水合璧，用戶只需在手機上操作即可實現山水相連，體會到山水畫的古韻。良好的交互設計能讓H5互動廣告的視聽體驗錦上添花，在增強廣告可讀性的基礎上，讓互動方式更加新穎、有趣。

3.3 用戶的情感體驗

H5互動廣告感染力的強弱的判斷標準在于，能否給用戶帶來美好與獨特的情感體驗，即用戶能否與品牌或宣傳的內容產生情感共鳴，獲得獨特的心得體會，或者受到積極影響［4］。唐納德·諾曼在《情感化設計》一書中提到，人類情感系統包括本能層、行為層、反思層三個層次［5］。

本能層即用戶對產品的直觀感受，如顏色和形式等視覺內容。在受眾見到H5廣告的第一眼，產品的顏色基調就可能影響用戶的情感體驗。在這一層次，H5廣告制作者應關注用戶對產品的初印象，創建充滿新意或與總體宣傳基調相吻合的H5廣告，避免用戶流失，增強用戶黏性。

行為層即用戶和產品之間的交互關系，如用戶怎樣觸發開始瀏覽H5、瀏覽形式、交互方式；整個交互和流程是否符合邏輯，不合理之處可能影響用戶整體使用感受，如卡頓、交互手勢復雜、反饋不及時等。在這個層次，H5互動廣告的設計者應注重用戶使用產品的邏輯，保證用戶順暢使用產品。

反思層即用戶在了解產品后的思考與共鳴，在這一層次，好的H5廣告能給用戶留下“獨家記憶”，如公益救助類、弘揚傳統文化類、科普類廣告，會在用戶心中埋下一顆種子，引發用戶思考。H5的情感體驗主要來自其自身的立意，有了好的立意，才能融入視聽和交互元素，形成完整的H5互動廣告產品。視聽體驗和交互體驗最終都會影響用戶的情感體驗。

4 H5互動廣告用戶體驗的應用價值

4.1 個人情感價值

良好的用戶體驗可以提高品牌價值和用戶忠誠度。年末各大APP多以H5互動廣告的形式讓用戶查看年度報告，雖然設計風格和交互形式各不相同，但都是圍繞用戶進行年度總結。將用戶使用APP的軌跡數字化和可視化，給用戶貼上一些有趣的標簽，讓用戶感受到自身的獨特性。報告內容截圖會被用戶分享至社交平臺，這不僅為用戶提供了展示自己的機會，也擴大了品牌傳播范圍。有的品牌在制作H5互動廣告時會針對特定用戶進行宣傳，喚起他們的特殊情感。例如，騰訊聯合QQ瀏覽器和上美影廠推出H5互動廣告《百年夢想家》，對標“80后”和“90后”用戶，他們既是上美影廠動畫片的忠實觀眾，又是QQ瀏覽器的主要用戶。上美影廠挑出的25個動畫，喚醒了這些用戶對兒時所看動畫片的回憶，在H5交互長卷模式下，用戶能夠體驗和感受不同動畫片的魅力和它們背后的故事；其中還融入了QQ瀏覽器的數字搜索功能，在滿足用戶情感需求的同時，加深用戶對品牌的印象。在制作這一類互動廣告時，需要更多地關注廣告內容對個體的影響，讓個體也能獲得創意性表達，這樣才能更好地滿足用戶的情感體驗。

4.2 企業商業價值

具有良好用戶體驗的H5互動廣告，能給企業和品牌提供更多的商業價值，讓用戶了解企業活動信息或品牌宣傳理念，引導用戶去發現它、探索它，從而了解它。在2022年《天貓雙十一狂歡城》H5廣告中，狂歡城由5個模塊組成，每個部分都實現了信息的高效展示，用戶能清晰地了解天貓“雙十一”的活動日期和功能信息，交互方式簡單又不失趣味性，整體建模動畫清晰流暢，有很強的科技感，讓用戶耳目一新。“雙十一”的活動比較多，用戶難以在短時間內厘清所有信息，這個H5廣告在帶給用戶良好體驗的同時，也為活動增益良多。H5互動廣告設計可以結合流量作品，如天眼查和電視劇《甄嬛傳》聯合推出的《終究是錯付了》，將現代商業社會中人與人之間的關系與劇中人物關系對應，讓人們直觀地了解天眼查的核心作用。在思考什么樣的互動廣告能帶來更大的商業價值時，需要清楚用戶到底想要關注什么、想獲取什么信息，或者借勢已獲得人們大量關注的內容去設計H5互動廣告，獲得關注度和討論度。

4.3 社會責任價值

具備良好用戶體驗的H5互動廣告，可以發揮社會責任價值。H5互動廣告體量小、易傳播，如果能在短時間內引起用戶關注，使大量用戶轉發分享，就能發揮較為顯著的社會責任價值，引起大眾對社會問題和現象的思考。2022年6月11日是“文化和自然遺產日”，多家企事業單位聯合推出了H5《甲骨書信》。該廣告雖然互動方式比較簡單，但趣味性很強，H5通過9道猜字題帶領用戶了解甲骨文的含義，感受甲骨文的魅力。答題結束后，用戶還可以領取一個還未破解的甲骨文自行研究，吸引用戶參與關于甲骨文的思考和討論。這有利于弘揚傳統文化，增強文化自信。一些H5能讓用戶獲得沉浸式體驗，傳播正確的價值觀。例如億眾互動推出的H5《兇手》，通過長按的交互方式帶用戶走進一段情節，女孩因網絡暴力“逃生”失敗，且通過畫面和音樂渲染了比較恐怖的氛圍，讓人不寒而栗，最后H5發出“拒絕網絡暴力，共建網絡文明”的呼吁。在設計制作H5互動廣告時，應該多關注問題和現象本身，深入思考受眾喜歡哪些設計方式和互動方式，以提高H5互動廣告的關注度，更好地承擔社會責任，引導受眾樹立正確的價值觀。

5 結語

隨著互聯網技術的高速發展和相應技術手段的迭代升級，H5未來擁有廣闊的發展前景，后續可以將更新穎、更有趣的技術融入H5互動廣告設計過程。歸根結底，H5的設計要以人為本，考慮用戶體驗，這樣才能實現廣告制作方和用戶的雙贏。在大數據時代，海量的網絡信息真假難辨，這就要求H5制作方考慮信息安全問題。很多H5廣告需要用戶授權信息，部分H5廣告還需要用戶上傳照片進行換臉，制作方要提供技術保障，避免在用戶瀏覽H5的過程中跳出不明鏈接，導致用戶上當受騙。當下，互聯網廣告商推出的H5互動廣告質量參差不齊，廣告制作方還需要考慮這些問題：用戶為什么要打開這個H5？他們能從中得到什么？只有廣告制作方把用戶放在首位，制作出新穎、有趣、審美價值高且能夠傳遞正能量的廣告，才能把用戶轉化為推廣者，讓他們自發轉發宣傳，從而擴大品牌影響力，達到良好的宣傳效果。

參考文獻：

［1］ 盧克·米勒.用戶體驗方法論［M］.北京：中信出版社，2016：3.

［2］ 董建民.人機交互［M］.北京：清華大學出版社，2021：219.

［3］ 鄧嘉琳. H5頁面創意設計［M］.北京：人民郵電出版社，2021：76.

［4］ 網易傳媒設計中心. H5匠人手冊［M］.北京：清華大學出版社，2018：126.

［5］ 唐納德·諾曼.情感化設計［M］.北京：電子工業出版社，2005：5-6.