基于用戶體驗角度的微信H5設計分析

葛秋麗，李湘媛

（北京林業大學 藝術設計學院，北京 100083）

基于用戶體驗角度的微信H5設計分析

葛秋麗，李湘媛

（北京林業大學 藝術設計學院，北京 100083）

用戶體驗的優良，對于一個互聯網產品來說起到關鍵性的作用。隨著互聯網對人們生活的影響不斷提升，用戶體驗將是互聯網產品制勝的核心力量之一。文章將從用戶體驗的角度入手，淺談H5頁面中的設計的原則，風格、色彩、版式，情感化及互動形式等對用戶產生的心理影響。

用戶體驗；視覺設計；情感化

Internet :www.artdesign.org.cn

從2014年起，一些小游戲和專題頁的H5在微信朋友圈嶄露頭角。“H5”，這個由HTML5簡化而來的詞匯，在微信這個社交舞臺之上逐漸大放光彩，走入人們的視野之中。面對未來互聯網行業的各種挑戰，怎樣從用戶體驗的角度考慮設計是微信H5的核心。

一、基于用戶體驗的H5設計原則

作為互聯網營銷的手段之一，不管什么形式的H5都是圍繞著用戶進行的，這就需要設計者敏銳地洞察用戶真正需要什么樣的交互體驗，體驗是形式，也是第一步基石，最終是為了引導用戶進行傳播，然后在功能上將品牌形象深入人心。

（一）目標與功能

各種H5活動的類型包括很多種，有游戲、邀請函、測試題、賀卡等形式，與以往的活動類型相比，H5更獨具傳播性和互動性。通過微信訂閱號推送文章、朋友圈分享與轉發，引導更多用戶參與。

要得到快速而大量的轉發分享，首先要抓準品牌的定位，H5不是簡單的快餐式傳播，它更傾向于品牌形象的定位與塑造，體現更多的是品牌的精神與態度，所以在視覺語言上應該更加貼切品牌的內在氣質，才能吸引住用戶的眼球，給用戶留下深刻的印象，從而達到品牌的傳播效應。

（二）形式與功能

在形式上，H5界面處理應避免繁瑣的設計元素，在巨大的互聯網信息流中，當用戶不能一眼得到核心內容時，很可能關閉并退出頁面，因此會導致用戶的流失。另外整體風格和基調也是需要根據品牌定位和受眾群體來決定的。

H5的表現形式有多種多樣，其中包括特效、聲音、視覺沖擊力等，通過一系列的交互方式給用戶帶來完美的互動體驗。然而這些只是抓住用戶好奇心的第一步，也就是通過形式抓住用戶，然后引導用戶參與，最終的目的還是要抓住用戶的認同心理，用功能打動用戶，當用戶達到心理上的認同后再進行分享轉發，這樣才能使品牌效應在互聯網范圍內大量的傳播，最終達到傳播品牌影響力的目的。例如天天P圖在《武媚娘傳奇》熱播的期間推出了“全民COS武媚娘”的H5互動體驗，操作簡單又具有娛樂性，在短時間內吸引大量的年輕用戶參與進來，迅速達到了品牌的傳播效應。（圖1）

二、基于用戶感官體驗的H5視覺設計

眾所周知，任何的交互創意都是從一個感官上的界面開始的。一個好的設計在界面的色彩、版式和文字使用上也具有舉足輕重的地位。頁面設計品質的高低直接影響著品牌的傳播效應，甚至還會影響到用戶對品牌形象的認知，所以頁面的視覺效果也是H5設計核心的一部分。

（一）界面色彩

移動端不像傳統的印刷設計受印刷載體的限制，因此色彩上為了達到視覺沖擊力，出現了一些顛覆性的色彩搭配，例如紅綠搭配、黑白搭配、撞色搭配等，這些以往在設計領域都被視為典型范例來理解的，如今也都成為了特立獨行的潮范，甚至被視若經典。傳統平面印刷大面積的漸變色也轉變到現在的純色，給人以簡單而又明確的感覺。頁面的整體色調也決定了頁面的風格，在確定主色調的基礎上，再決定其他輔助色和元素的搭配。另外頁面中也會有大面積的留白，給人以精致、冷靜、思考的感覺，當然這更考驗設計師對頁面元素的整體把控能力。

（二）界面版式

在版面上的設計上依然以傳統平面版式設計為基礎，但是主題更加明確，對用戶傳達的內容更加直接而又簡單，在信息流巨大的互聯網空間里，用戶不可能在一個頁面停留過多時間，所以必須在用戶第一眼看到頁面時，立刻就得到此頁的核心信息，用戶得到核心信息的時間越長，數量流失就越大。在構圖上，畫面更多以主題元素居中突出，設計內容都圍繞著主視覺效果，而不僅是為了豐富畫面而多加贅飾。

受移動端屏幕的限制，有限的空間對版面在使用上要求也就更高。在文字的排版上，信息應該是被濃縮、提煉后的版式。看似細微的幾個像素的差距，由于屏幕與內容比例的原因，任何細微的問題在移動端都可能被放大化。如何在有限的空間里傳達有效的信息，這就要求設計師既要照顧元素之間屬性的分組歸類，又要兼顧整體頁面的效果，這就考驗設計師專業基本功底了，正如方寸之間，自有天地。

> 圖1 天天P圖《全民cos武媚娘》活動

> 圖2 H5活動《小時候我這樣看他》

三、基于用戶情感化體驗的H5設計分析

（一）強調人性體驗

一個好的H5承載的信息應該更生動有趣，更加情感化。互動性的H5會讓用戶樂于參與分享，H5的靈魂在于有一個十分吸引用戶的好故事，通過故事給用戶留下深刻的印象，把品牌的理念和價值融入到故事中，來傳達品牌效應；有溫度的H5則是從不同用戶群體的角度出發，抓住用戶的痛點進行提煉，最后用品牌的力量帶來的溫情關懷，讓用戶感到品牌所傳達的態度，從而建立起用戶對品牌的歸屬感，在心底對品牌產生一種信任；重情懷則應該抓住用戶心中最柔軟的點，用情懷打動用戶，在情感上產生共鳴。例如：長虹電視H5《小時候我這樣看他》H5廣告（圖2），把“情感交互”作為引爆點，通過父愛喚起年輕群體，從而達到了非常好的引導效果。向受眾發起情感攻勢，才能最大程度留住目標用戶的關注，與他們進行深度溝通。

（二）注重技術性手段體驗

如今H5早已突破簡單的屏幕瀏覽界限，各種技術手段也應運而生，圖像繪制、屏幕擦除、搖一搖、重力感應、3D交互等出現在各類H5中。這些技術手段產出的效果，用戶通過感官、心理活動、觸覺等進行感知，能更加直觀的融入到H5本身，一般都會在用戶心中留下一個較深刻的印象。然而對于新鮮技術手段表現出的效果，大多數用戶群體第一印象更多是炫酷的交互手法，第二印象才是頁面本身的內容，因此過分追求形式，過于重視交互手段會本末倒置，形式大于內容，反而會弱化品牌的傳播效應。所以H5在設計的中更應該合理運用技術手段，為用戶提供流暢而又具有溫情創意的H5。

（三）增加互動性參與體驗

眾多H5中不乏很多小游戲、小測試、邀請函以及賀卡等形式，這些最大的優勢在于抓住用戶對事物不同的心理表現。賀卡、禮品、電子請柬則是最早的H5形式，很多品牌則抓住用戶對小禮物的喜愛心理，推出各種形式的電子賀卡、禮品、電子請柬等收買住用戶，以此來提升用戶對品牌的忠誠度。評分測試等形式的H5，則是抓住用戶探索的好奇心，以及攀比心理，促使用戶一步步翻閱看到最終的測試結果，通過攀比看朋友圈的排名。但是這種方式相比其他形式對于品牌形象提升的影響力較為弱，用戶更多的注意力都集中在測試題以及朋友圈的排名上。

多數小游戲類的H5中，通過挑戰記錄的分享，以滿足用戶的成就感。通過有趣游戲參與環節，可增強品牌聯想，形成對品牌的情感認知。這類小游戲操作簡單，競技性強，因此在朋友圈中大為風靡。但由于缺乏創意，游戲環節簡單，用戶逐漸對此感到厭倦。設計者的創意在于用游戲和廣告的方式讓用戶在玩樂中接受產品信息。當游戲情感與品牌高度吻合時,游戲型的H5才能有效提升消費者對品牌的評價。

因此，雖然H5的表現形式多種多樣，但最核心的還是要多從用戶的角度出發，多考慮怎樣的頁面才能吸引用戶的眼球，抓住用戶的認同心理，從而達到品牌的傳播效應與形象的建立。

四、結語

總之，隨著技術升級和互聯網提供的大好平臺，H5廣告優勢越來越強，未來品牌戰略的發展趨勢也更偏向于互聯網方向。在這樣的大好形勢之下需要設計師們從用戶體驗角度投入更多的思考，用人性化的用戶體驗吸引用戶來圍觀，用情感化體驗去留住用戶，這樣才能更有效的實現產品和服務的最大化品牌價值傳播，從而解決品牌所帶來的問題。未來借助微信H5渠道提升品牌價值的途徑也會成為主流，相信在這一領域的設計會給用戶帶來更多的驚喜。■

[1]（美）唐納德·A·諾曼.情感化設計[M].付秋芳，程進三，譯.北京：電子工業出版社，2005.5.

[2] 李青.互動廣告新形勢——H5廣告研究[J].新聞研究導刊，2016（09）.

[3] 曾靜.界面設計的視覺傳達與用戶心理——以QQ聊天工具的優劣為例分析軟件界面設計[J].藝術與設計（理論），2011（09）.

[4] 唐國峻.情感理念在視覺設計中的表現分析[J].美術教育研究，2016（08）.

An Analysis on the Design of H5 in WeChat in the Perspective of User Experience

GE Qiu-li, LI Xiang-yuan
（Beijing Forestry University，Beijing 100083，China）

Whether user experience is good or not plays a vital role for an Internet product. With the continuous improvement of Internet’s advantages, user experience would be one of the core strengths that determine the victory of Internet products. This paper briefly discussed the influence of principles, styles, colors, formats, emotion and interactive forms in H5 page design on users’ psychology from the perspective of user experience.

user experience; visual design; emotion

TP311.1

A

1008-2832(2017)07-0106-02

檢 索:www.artdesign.org.cn