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

◇李昱娇

“H5”是由HTML5简化而来的词汇，借助微信这一移动社交平台，更快地进入大众视线。相较于过去简单的广告图片界面而言，H5界面的先进性显然更高，在互动性、品质性还有成本耗费方面都更具优越性，使用者分享和传播的效果也更为优越。以H5为根基，一大批好的产品被使用者挖掘并体验，H5交互界面之所以让使用者拥有更为强大的分享欲望，更有效地推动其在移动互联大环境中的传播，原因就在于其精巧的设计风格和崭新的交互体验。

一、基于使用者感官体验的H5视觉设计

H5是互联网营销的一种全新手段，不论何种存在形式，核心聚焦点都在于使用者，如此一来，就需要设计人员对使用者真正需要的交互体验进行更深层次的挖掘和探究，打好基础，最终实现使用者传播效率的提升，使品牌功能性形象深入人心。

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

就设计而言，一定要格外注重关键点的突出化处理，将一些无用的、拖拉的、冗杂的要素适当删除，尽可能维持页面的纯净度，找寻形和意、加和减这二者彼此间的完美平衡。“简”即做减法，“饰”即做加法；“形”是外在，“意”是内在。借助对设计的形“简”，对设计的理念“饰”，来寻求设计的最大化平衡。但上述过程，通常是彼此限制但又彼此扶持的一种联系。

页面设计的初始步骤就在于“简形”。第一步要创建信息框架，将关键要素一直维持在最重要的位置，每时每刻都要警醒自己，辅助数据的地位一定不能越过核心内容，尽可能避免反客为主。核心内容更要尽可能简洁化，冗杂内容该删就删，一句话能讲清楚的，就不要用三句话。此外，借助“饰意”能让界面具有一些视线引领和节奏感层面的小变动，对全局氛围能起到一定的提升作用，不可小视。

（二）文案设计具有强大吸引力

作为设计内容的一个组成部分，文案写作对于使用者阅读而言，存在一定影响力，一个优良的文案品质要高，但也要通俗易懂。设计一款H5，不但要有优良的画质，还要注重文案的品质。此处的文案不但涵盖H5自身的内容，最关键的还在于另外两点：一是描述，二是标题。你研发的H5和百万传播量的H5之间或许只存在一个标题的距离。对于首次遇到的一个全新的H5而言，足够吸引眼球的，或许只是一个吸睛的标题而已。

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

为大众所熟知的移动端最基础的版式设计即“主题元素居中突出”，最关键的点在于核心思想的着重阐释。在构图层面，运用一些稳定程度很高的几何图形，如方形、圆形还有正三角形等，辅以一些稳定程度略低的图形，如不规则图形、倾斜图形等进行构图设计，往往会给人一种动态的、活跃的视觉体验。也可以设计一些特别的边缘化构图，提升设计的“吸睛”程度。种类多元的设计构图往往会让你的H5独树一帜，但同时也要关注页面的整洁度，不能乱，版式设计规范要严格遵循，毕竟这事关使用者的体验。

就版式而言，首先要关注数据的排布，若想让使用者直观地感知到重点信息，只需从文字内容出发，注重相应的方式方法即可。常规而言，人在阅读时往往会将视线先行汇聚到左上方，随后缓慢挪移到右下方，所以设计页面中文字的排版也往往是左对齐亦或居中对齐的样式。倘若页面中存在表单要素，那么往往选取右对齐的样式。对于设计人员而言，可读性是其一定要着重思考的一个问题，优良的可读性会让使用者的阅读负担大大减少。若想有效提升文字的可读性，手段之一在于让文字图形化。在文字表达方面，选取一些简约的、有趣的且鲜明的图形，会大大提升使用者对于信息的接纳度。现阶段互联网带领大众进入“读图时代”，相较于繁杂冗长的文字而言，可视化图形的接受度显然更高。

留白则是信息排布的另一种方法。全部的白均为“有目的的留白”，其是页面排版中一个不可缺少的要素，目的性明确，且能对界面空间构成起到一定的管控作用。留白并非白色填充，而是起源于中国画，传达的也是国画意境。即基于平面塑造出一种广袤的空间感，这样的平面设计是会呼吸、可透气的设计。

借助留白来降低界面给使用者造成的负担。界面中要素过多，难免会让使用者产生一种压迫感和烦躁感。就视觉层面而言，核心原因在于画面太过狭窄。适度的留白能给使用者带来一定的喘息空间，就形式美感的构成而言，也会增添一定的韵律感和节奏感。

（四）色彩搭配

就H5移动端界面而言，色调是十分多元的，多元的色调能为使用者带来多元的感觉，色调的差异性代表着情感传递的差异性。H5作品中需要传达的氛围，亦动亦静，亦喜亦悲，统统离不开色调的辅助。色调常常是感性的，感性若想发挥实效，则要立足于理性。谈及色调规律，一定要基准色调的黄金法则，即6∶3∶1，一个完美的设计中，主色要占到六成，辅助色要占到三成，点缀色要占到一成，点缀色即锦上添花的存在，能够起到激活画面且提升设计层次的作用。色调作为另一种关键要素，一致的色调需要着重突出品牌调性，可以提升品牌辨识度和归属度，像网易的红色调还有腾讯的蓝色调等。

二、基于使用者情感化体验的H5设计剖析

（一）注重人性体验

一个优良的H5荷载的信息一定是掺杂了情感、足够生动且趣味性十足的。互动性的H5会让使用者更愿意主动分享，H5的精髓在于一个对使用者而言魅力十足的好故事，借助故事，使用者会对该H5的印象十分深刻，将品牌理念、价值与故事深度融合，借机实现品牌效用的传达；具备一定温度的H5会将多元化的使用者群体作为切入点，紧抓用户痛点，进行汇总精炼，随后借助品牌力量给予使用者一定的温暖和关怀，让使用者感知品牌力量，进而提升使用者对品牌的归属度和信任度；对情怀格外关注的H5要紧抓使用者内心最脆弱的部分，借助情怀打动使用者，使二者之间产生一种共鸣。

（二）关注技术性手段体验

现阶段H5已然超越了最初的屏幕浏览限制，多元化的技术手段也随之产生，涵盖但不限于3D交互、重力感应、摇一摇、屏幕擦除还有图像绘制等。借助上述技术手段，使用者能够从很多方面进行一定的感知，如触觉、心理还有感官等，进而和H5产生更加直观的交融感，这样的操作往往会给使用者留下较为深刻的印象。但就新鲜技术所呈现的效果而言，多数使用者第一印象关注的往往是酷炫的交互技术，第二印象才是界面自身的内容，所以对于形式的过度追捧，对于交互手段的过分关注，会导致一种舍本逐末的状况出现，使内容的吸引力弱于形式，品牌的传播效果也会大打折扣。因此H5在设计的时候，一定要科学地应用技术手段，给使用者提供一些流畅度十足且温情满满的H5。

（三）强化互动性参与体验

H5种类多元，涵盖但不限于贺卡、邀请函、小测试还有小游戏等，上述H5最大的优越性在于紧抓使用者对多元事物的多元心理。最原始的H5涵盖了电子请柬、礼品还有贺卡等，部分企业紧抓使用者喜欢小礼物的心理，研发了一系列形式多样的电子请柬、礼品还有电子贺卡等，借此实现对使用者心理层面的俘获，以此提升使用者对品牌的忠实程度。还有一些评分测试类型的H5，紧抓使用者的好奇心和攀比心，引导使用者逐步翻阅到最终测试结果，像朋友圈排名就是利用使用者攀比心理的绝佳例子。但上述手段对于品牌形象提升的影响力并不是很高，使用者大多数的专注力在于测试题还有朋友圈排名。很多小游戏类型的H5，借助挑战记录的分享，促进使用者满足感的达成。借助趣味十足的游戏参与环节，可强化品牌联想力，生成品牌情感认同。小游戏类H5的竞技性强，操作简单，所以大多会在短时间内火爆整个朋友圈。但鉴于创新层面的欠缺，游戏环节过分简洁，使用者对其热情度难以得到长时间的维系。设计人员的创意大多用于提升使用者对产品的接纳度。一旦游戏情节和品牌情怀达到一致的高度，游戏型H5便能借机实现使用者对品牌自主评价的目的。所以，纵使H5的类型十分多元化，但最关键的还是将使用者的需求作为切入点，多考量能够俘获使用者眼球的页面设计要素，紧抓使用者的趋同心理，进而实现品牌传播效用的提升和品牌形象的创建。

三、结语

借助互联网平台还有不断升级的技术水平，H5广告的优越性日益明显，日后品牌战略的发展趋向无疑是互联网方向。基于现阶段一切向好的发展趋势，设计人员要基于使用者切入点进行更多考量，从人性化的角度出发，切实提升使用者吸引力，从情怀角度提升使用者体验，留住使用者的心，如此一来，方能达成产品传播的最强有效性和品牌服务的最大价值性，进而破解品牌传播中产生的一系列问题。日后借助微信H5渠道实现品牌价值的提升，也会变成一种主流方式，笔者坚信，这一行业日后定会给使用者带来更加多元化的惊喜。