葛秋麗，李湘媛

（北京林業(yè)大學(xué) 藝術(shù)設(shè)計學(xué)院，北京 100083）

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

葛秋麗，李湘媛

（北京林業(yè)大學(xué) 藝術(shù)設(shè)計學(xué)院，北京 100083）

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

用戶體驗；視覺設(shè)計；情感化

Internet :www.artdesign.org.cn

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

一、基于用戶體驗的H5設(shè)計原則

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

（一）目標(biāo)與功能

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

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

（二）形式與功能

在形式上，H5界面處理應(yīng)避免繁瑣的設(shè)計元素，在巨大的互聯(lián)網(wǎng)信息流中，當(dāng)用戶不能一眼得到核心內(nèi)容時，很可能關(guān)閉并退出頁面，因此會導(dǎo)致用戶的流失。另外整體風(fēng)格和基調(diào)也是需要根據(jù)品牌定位和受眾群體來決定的。

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

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

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

（一）界面色彩

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

（二）界面版式

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

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

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

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

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

（一）強(qiáng)調(diào)人性體驗

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

（二）注重技術(shù)性手段體驗

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

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

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

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

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

四、結(jié)語

總之，隨著技術(shù)升級和互聯(lián)網(wǎng)提供的大好平臺，H5廣告優(yōu)勢越來越強(qiáng)，未來品牌戰(zhàn)略的發(fā)展趨勢也更偏向于互聯(lián)網(wǎng)方向。在這樣的大好形勢之下需要設(shè)計師們從用戶體驗角度投入更多的思考，用人性化的用戶體驗吸引用戶來圍觀，用情感化體驗去留住用戶，這樣才能更有效的實(shí)現(xiàn)產(chǎn)品和服務(wù)的最大化品牌價值傳播，從而解決品牌所帶來的問題。未來借助微信H5渠道提升品牌價值的途徑也會成為主流，相信在這一領(lǐng)域的設(shè)計會給用戶帶來更多的驚喜?！?/p>

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

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

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

[4] 唐國峻.情感理念在視覺設(shè)計中的表現(xiàn)分析[J].美術(shù)教育研究，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