葛秋麗，李湘媛

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

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

葛秋麗，李湘媛

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

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

用戶體驗(yàn)；視覺(jué)設(shè)計(jì)；情感化

Internet :www.artdesign.org.cn

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

一、基于用戶體驗(yàn)的H5設(shè)計(jì)原則

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

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

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

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

（二）形式與功能

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

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

二、基于用戶感官體驗(yàn)的H5視覺(jué)設(shè)計(jì)

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

（一）界面色彩

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

（二）界面版式

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

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

> 圖1 天天P圖《全民cos武媚娘》活動(dòng)

> 圖2 H5活動(dòng)《小時(shí)候我這樣看他》

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

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

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

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

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

（三）增加互動(dòng)性參與體驗(yàn)

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

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

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

四、結(jié)語(yǔ)

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

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

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

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

[4] 唐國(guó)峻.情感理念在視覺(jué)設(shè)計(jì)中的表現(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