基于用户体验角度的微信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