基于用户体验的微信H5界面设计研究

蔡丽杰

摘 要：移动互联的悄然袭来改变着我们的生活方式，同时给用户带来了一场盛大的视觉体验之旅。在资讯移动化的趋势下，HTML5技术的移动Web页面（以下简称H5页面）成为当下最受关注的页面视觉形态。文章以提高用户体验为主线，以视觉传达设计为切入点，从设计思维、用户体验可视化及内容排版等方面，分析了设计师在追求完美界面设计的同时如何给用户带来一场令人难忘的视觉体验。

关键词：用户体验；H5页面；界面设计；视觉传达

检 索：www.artdesign.org.cn

中图分类号：TB482 文献标志码：A 文章编号：1008-2832（2016）07-0054-03

A Research on H5 Interface Designs of Wechat

CAI Li-jie（ Tianjin Polytechnic University，Tianjin 300387，China ）

Abstract ：Our life is unconsciously influenced by mobile internet， which brings about a journey tremendous visual experiences toward its audiences. Under the tendency of information mobility， the mobile web interface baced on HTML5 technology （hereafter referred to as a H5） has turned into the visual modality which attains the most extensive attentions of the time. This article focuses on how to improve UE with a pointcut of visual communication design. It analysizes how designers deliver an impressive teast of eyes to their users while pursuing an impeccable interface design in respects of design thinking， the vivalization of UE the layout of content and so on.

Key words ：user experience； H5 page； interfacial design； visual communication

Internet ：www.artdesign.org.cn

我相信，现在“扁平化设计”对于大家并不陌生，而随着人们审美的提高，越来越多的人却陷入了一个误区，在做设计时，你是否不自觉的将自己的目光集中到那些具有强大视觉冲击力的图片上，你是否还在为一个页面的排版而大费周章，当然，这些一定是一个设计师要做的内容，可你是否想过，“刻意的这样做”真正给用户传达了什么呢？这种页面形式能真正被他们理解吗？答案是否定的！好设计应该是易于消化的，用户需要的是通过体验页面快速的得到他们想要的信息。而作为设计师的我们就是要抓住用户的心理，将其转化为潜在用户。

“H5”，这个由HTML5简化而来的词汇，在微信这个移动社交平台，快速走进了更多人的视野。H5界面与过往简单的广告图片不同，如今的宣传页面需要更强的互动、更好的质量、花费低的设计来促成用户分享传播。好的产品依托H5让用户发现并体验，H5交互页面凭借着精美的设计风格、新鲜的交互体验使用户产生极强的分享驱动力，在移动社交环境中得到传播。

一、H5界面中的视觉传达

H5广告要求在有限的手机屏上使传播效益达到最大化，这得益于页面的表现。传统平面设计上更多的是为品牌形象、产品格调服务，而在H5广告的设计则尽量保持视觉主体的单纯性。传统印刷通常使用CMYK模式的色板，但基于互联网传播的色板模式逐渐演变成HSB模式，它具有更加纯净明亮的特性。

二、互联網时代，设计思维的转变

设计思维是一种思维方式，不是凭空而来的。设计思维强调设身处地地去体验客户需求，想其所想，及其所及，换种方式说它是一种设计态度、思维和与人沟通的方法。对于现阶段铺天盖地的H5而言，整个页面都充满了互动性，它需要用户不断的进行人机交互，互相响应，这样的设计需要多维度发散性思维的设计师来完成。

三、适合品牌调性的页面风格——“充满个性”

不同品牌调性可根据产品定位选择最为恰当的页面风格，同时也要注重整体感和产品个性的表达。以冈本品牌为例，看它如何通过页面展示对自己的产品进行塑造和表现的，如图所示，该品牌结合时事节点创造好内容，有趣创造有效，时效创造实效，页面选择契合主题的颜色烘托场景氛围，营造出一种传统的新年氛围、喜庆、热闹，界面视觉表达的形式统一，gif动图提升画面亮点。毫不夸张的说，冈本把避孕套上升到了一个新的高度，广告内容诙谐但不低俗，情趣但不恶趣，露骨但不露点。

四、给用户一个“主动打开、分享”的理由

H5传播途径很多，常见的是微信文章推送、朋友圈转发和H5广告投放，据统计，每个用户的微信服务号及订阅号的个数基本不低于50个，有的高达100个，那么每天推送一条消息，主动打开的几率很小，这也会直接影响到分享朋友圈的几率，而往往H5就“隐藏”在这些微信文章里，所以微信文章标题、主图、内容的质量也制约着H5传播。从广告的投放产出比上来说，H5通常是效益比较低的设计产物。如何在有限的手持移动端屏幕上吸引更多的用户自发传播，这需要较高的设计表现水准。H5本身首先创意新颖，具有品牌感，抓住用户的心理，要懂得与用户在短短几页的H5里面进行交流，利用文字、图片、按钮、色彩等元素吸引用户参与其中。简言之，要具有参与感、吸引力、炫耀感。

五、H5界面的设计法则

（一）视觉页面的完美平衡

在设计中突出重点是第一要务，把多余的、拖沓的、无用的元素删除掉，保持视觉画面的单纯性，寻求加与减、形与意之间的完美平衡。

由减而简，添之以饰；自内而外，显之以形。“简”为减法，“饰”为加法；“形”为外在，“意”为内涵。通过对设计的形做减法，对设计的理念做加法，来达到设计的平衡。而这一过程，往往是相互制约、相辅相成的关系。

设计界面的第一步，就是要“简形”。首先，建立信息框架，始终把重点要素放在第一位置，时刻提醒自己任何其他的辅助信息不要超越主要内容，以避免喧宾夺主；其次，主要内容本身更是要精简，多余的元素不要！说白了就是一句话能说明白的不要用三句话来说。另外就是“饰意”，巧妙的点缀，使得页面产生节奏感和视线引导上的变化，小元素影响整体的氛围，达到画龙点睛的效果。

（二）文案设计具有足够吸引力

文案写作也是设计内容的一部分，因为它影响着用户阅读，一个好文案既要有品质，又容易被理解。构思一款H5，除了好的画面以外，另外一点就是H5文案了。这里的文案除了H5本身的内容之外，还有很重要很重要的：标题、描述。你和一款传播百万的H5的距离，可能只差一个标题。当我们第一次见到一个新鲜的H5时，能吸引我们打开的一个可能就是，标题足够吸引。

（三）版式设计的突破性及原则

移动端最简单的版式设计大家都知道是“主题元素居中突出”，重点表达核心思想才是最重要的。用正三角形、圆形、方形等稳定的几何图形，配以倾斜、不规则图形等不稳定图形进行构图，能够给人以活跃、动感的视觉感受。也可以尝试特殊的边缘化构图，使设计更加“吸睛”。丰富多样的设计构图可能会让你的H5与众不同，但同时也要注意画面勿乱，版式设计的原则还是要遵守的，因為这直接关系着用户的体验。

在版式上，首先来说一下信息的排布，其实根据文字内容，掌握方法就可以让用户直观感受到重要信息了。人的阅读视线规律通常是从左上方向右下方移动，因此决定了设计界面中文字的排版一般采用左对齐或居中对齐。如果界面中有表单元素，一般采用右对齐的方式。这里的文字排版切忌两大问题：一是切忌不要不规律的去排布多重复杂文本，这会使文字的可读性大大降低；二是切忌不要丢失重点，主次突出才能让用户更容易找到设计想要传达的意图。在信息的排布中，可以多采用相近信息分类、归组、成队的方式，使复杂信息“组团”。用这样的设计方法，可以使复杂信息在视觉上简单化。

可读性是设计师必须考虑的一个重要因素，良好的可读性会使用户减轻阅读负担。图形化是使文字变得易读的有效方式之一。采用鲜明的、趣味的、简约的图形来表达文字，会使用户更容易接收信息。当今互联网带给我们的是“读图时代”，可视化的图形语言远远比冗长复杂的文字更容易被接纳的多。

信息排布上的另一法则是留白。所有的白都是“有目的的留白”，它是构成页面排版必不可少的因素，并带有明确的目的来控制页面的空间构成。留白并不是白色填充，它来源于中国画，也传达的是国画意境。它指的是在平面上营造出的广阔空间感，这样的平面设计会呼吸、能透气。

通过留白来减轻页面带给用户的负担。画面中过多的内容无疑会使观者产生厌烦感、压迫感。从视觉上说，主要是画面太狭窄所导致的。适当的留白给观者的视觉以休息放松的空间，在形式美感的构成上，也增加了节奏感和韵律感。

（四）色彩搭配

在H5移动端页面中，色彩往往非常丰富，不同的颜色可以带给用户不同的感觉，不同的色系代表着不同的传达情感。H5作品中想表达的气氛，或喜或感或动或静，都离不开对色彩的依赖。

色彩往往是感性的，但在理性基础之上的感性才是最棒的。关于色彩的规律要牢记色彩的黄金法则6：3：1，一个合格的设计需要有60%的主色，30%的辅助色，加上10%的点缀色，所谓画龙点睛，这10%就是激活画面，提升设计层次的。色调也是另一重要因素，统一的色调强调的是品牌调性，能够强化品牌辨识度和归属感，例如腾讯的蓝色调、网易的红色调等。

（五）没有设计的设计

什么是最美的设计？原研哉说：“虚无”。这种虚无的境界，在界面设计中同样适用。如何去设计化、如何让用户感受不到刻意的设计，是业内设计师都在追寻的答案。界面中的每个元素都是基于设计法则、用户习惯等设计的，刻意的装饰毫无意义。因为界面设计师要传达的是内容主体，而非视觉感受。形式只是辅助内容传播的工具，它不能超越内容本身的重要性。

无论H5是基于企业宣传、生活娱乐还是游戏互动，无论它以任何形式传播，都要落到用户身上，所以，品牌如果想要和自己的潜在用户一起玩耍，就必须注重用户体验。做好H5界面，需要以人为本，以用户为本。好的设计师应该是能让用户更准确、更高效、更便捷的获得传达的内容，用户的情感、习惯、价值等都是设计师要参考的设计因素。设计师的追求应该是使设计在功能完备的前提下实现艺术价值和商业价值。

参考文献：

[1] 任婕，傅小贞，张颖鋆. 腾讯网UED体验设计之旅[M]. 北京：电子工业出版社，2015.4.

[2] justinlam. 移动端界面中的版式设计原理（上） [EB/OL].[2015-10-19]. http：//zhuanlan.zhihu.com/p/20282820？refer=justinlam

[3] 任倩慧，王坤茜. 基于用户体验的产品界面设计研究[J]. 陕西科技大学学报（自然科学版），2011，29（4）：129-132.