从营销到内容

唐芸莉 谭坤 陈金梅

摘  要：近几年，由于微信移动社交平臺的崛起，微信访问量迅猛增长。这给H5的发展提供了条件，让基于微信平台的H5迅速成为最炙手可热的营销形式之一，有效帮助企业的活动进行快速借势营销和宣传。本文以基于微信平台的H5为研究对象，分析其在营销中的优势和劣势，并以此为切入点，研究在H5营销广告同质化泛滥的情况下，微信H5设计如何转变思路，以用户为主导，从传统的营销产品转向营销内容，提升用户黏度和传播力。

关键词：H5；营销；用户体验设计

基金项目：本文系北京电子科技职业学院校内社科类一般项目“基于微信端的H5界面视觉设计研究”（2021Z100-SXY）研究成果。

H5是随着移动互联网的发展和HTML5技术的广泛应用而产生的，曾被误认为是HTML5的简称。实际上，H5虽然涉及HTML5的规范，但并不等同于HTML5，而是一种运行在移动端的，基于HTML5技术的动态交互页面[1]。H5本质上就是移动端网页，它具有跨平台的特点，兼容安卓、IOS两大系统，完美适应智能手机等移动终端设备。可以说，H5技术的成熟，开辟了一种全新的营销方式[2]。

H5语言编写的界面与微信的兼容性较好。近几年来，微信异军突起，成为目前国内最为流行的社交媒体平台。由于微信用户群的庞大，越来越多的商家将微信营销作为最终的营销选择之一，这为基于微信平台的H5提供了广阔的发展舞台。目前的H5大多集中于微信端，所以，基于微信平台的H5就当仁不让成为H5的代言人。

一、基于微信平台的H5在营销中的优势

（一）操作简化灵活，适合移动媒体

现如今，手机的智能化程度越来越高，融合了交互、动画、图表、全景、应用等各种内容形式。与传统媒体介质相比，手机屏幕更小，尺寸更丰富；浏览灵活，可横屏也可竖屏，展示形式多样；而且能够随身携带，可随时随地进行浏览。

比起本地APP应用，基于微信平台的H5优势十分明显：免安装下载、启动时间短、不占存储空间。并且最重要的是，在微信内直接点开链接就可以快速浏览，操作流程十分简化快捷，有效提升了用户的浏览体验，简直是为手机这样小巧便携的移动媒体量身定做的。

（二）浏览随时随地，利用碎片时间

在当前这个快节奏的社会中，人们可以进行深入阅读的大块时间越来越少。智能手机功能强大又小巧便携，可以说是一部移动的微型电脑，用户可以随时随地进行信息阅读，从而产生了新的阅读形式——碎片化阅读。基于微信平台的H5内容浅、层级少、形式炫，点开就可以浏览。这种不以深度取胜的短平快的方式，很适合碎片化阅读，让排队、等餐等一些很难利用的闲暇时间具有了意义。

（三）交互顺畅深入，提升用户体验

H5是融媒体，内容形式丰富，图文并茂，支持视音频、动画等多种媒体形式，具有良好的感官体验。更重要的是，目前H5技术日趋成熟，作品视觉效果丰富炫酷，绘图、擦除、摇一摇、重力感应、3D虚拟现实等互动效果无需第三方插件的支持就可以轻松实现，而且需要消耗的流量很少，具有很好的交互性，用户参与性强，使用体验好。

（四）信息传播即时，降低宣传成本

微信是点对点式的传播，以社交关系为传播纽带，最终信息传播的数量会呈几何级数增长，是一种互动性更强、扩散性更快的传播方式。H5借助微信强大的分享功能达到快速传播的目的，一夜之间刷爆朋友圈的H5层出不穷。

比起传统媒体，基于微信平台的H5制作简便，传播过程是用户自主自发传播，信息传播即时性强，企业宣传成本大大降低，容易以低成本获取高曝光。同时，微信平台营销数据统计实时全面、方便快捷，企业可以及时有效获取客户的反馈，并根据信息反馈及时调整宣传计划。

二、基于微信平台的H5在营销中的劣势

基于微信平台的H5具有创作形式新、交互体验好、分享速度快、传播范围广、开发难度易、推广成本低等特点，对于企业的营销可以说是有着得天独厚的优势，但是受形式和平台限制，其也存在明显的不足。

（一）承载内容较少，营销不易深入

移动端屏幕比PC端屏幕尺寸小很多，尤其是手机，屏幕可显示的内容非常有限。如果没有进行良好的视觉设计，没有从用户的需求出发，那么就会严重影响用户浏览时的视觉体验。另一方面，H5属于轻应用，这种形式要适应用户快速浏览的需求，更关注信息传播的高效和用户使用的流畅度，这就使得H5的层级较少、内容单一。

（二）用户黏性较低，营销难以持续

用户在微信中打开H5之后在页面中的停留时间较短，浏览关闭之后很容易就会被微信铺天盖地的信息所淹没，因此用户留存率和二次点击率较低。如果没能够在第一时间留住用户并关注转发，就会失去传播力。

（三）平台限制较多，营销容易踩坑

基于微信平台的H5需要受微信审核规则的制约，而微信平台的规则会不断出台更新，很多H5一不小心就会被微信限制或屏蔽。如判定为诱导分享行为、过度营销行为等都可能会导致H5页面被封。因此，必须保证操作严格规范，这也导致基于微信平台的H5营销有着一定的局限性。

尽管微信审核规则越来越严格，但是良好的微信生态环境对于H5的发展也具有推动作用。逐渐从一味追求哗众取宠、诱导分享等捷径回归到创意和内容上，对于H5的高品质发展来说有益无害。

三、基于微信平台的H5设计转型

基于微信平台的H5火爆朋友圈，受到企业和商家的追捧，H5营销广告铺天盖地。但是绝大多数的H5盲目跟风，从形式到内容缺乏创意，导致作品同质化严重。这样营销过度的结果就是用户产生厌烦情绪，主动忽略或关闭H5广告的推送，导致作品无法得到关注，更不用说分享了。因此，针对营销企业而言，如何转变思路，在有限的时间和空间内快速吸引用户的注意，提高用户浏览效率、分享率，提升用户转化率是需要迫切解决的问题。

（一）打开叙事视角，内容故事化

针对H5的特点进行合理的内容设计，采用叙事的方式，把内容简短直接地故事化，摆脱说教、指导的形式，让用户能以第一人称的视角产生身临其境的感觉。H5互动电影在从营销向内容的转变上做了很多的探索，2016年H5《活口》的爆火，为影视作品做宣传打造的H5互动电影打开了一扇崭新的大门。观众与电影进行互动，用户可以参与结局，比起海报宣传和视频宣传，这种推广方式更为新颖，交互性极强。但值得注意的是，很多大制作、大投入的作品并没有成功霸占朋友圈，究其原因就是用户在浏览H5时往往是利用碎片时间，精力不集中，更多是为了打发消磨时间，不会像看电影一样集中精力去选择、去探索。因此，一些时间短、交互少、快节奏的H5互动电影作品往往因其轻松有趣、浅显易懂的内容更受用户欢迎。

《大时代的故事》是测试游戏类的H5作品，用户穿越回20世纪80年代，经历了1977年恢复高考、1979年成为“老三届”、毕业或工作解决各种问题等人生选择而不同的选择会解锁不同的职业和人生，如乡镇干部、农场技术员、外企员工等，最后输入名字生成自己穿越回八十年代的人生海报。作品整体采用版画风格的黑白色调插画，每一次的测试都如同在讲述一个故事，而故事是由用户做选择和做主导形成的（如图1）。

（二）巧用情感元素，获取认同感

人是感性的，亲情、爱情、友情是人生不可或缺的情感诉求。提取能够表现品牌或主题的核心价值，从情感方面找寻作品诉求对于用户的意义关联，在H5的内容中巧妙融入情感元素，以情动人，引起目标用户的共鸣而触发分享行为[3]。这样的H5，虽然本质上仍然是营销广告，但是用户本身并不易察觉，能在潜移默化间达到目的，可以说是不是营销的营销。

《家中40年老物件回忆猜》是纪念改革开放40年的优秀H5作品，采用有趣的猜谜游戏形式展现出了改革开放40年来中国发生的巨大改变。这个作品的创意亮点是以情动人，具有强烈时代感的老物件配合20世纪80年代画报的视觉画面以及精准煽情的文案，激起了70后、80后用户的集体回忆，产生情感共鸣，而没有相关生活经历的用户看到这些带有岁月痕迹的物件也会觉得新奇（如图2）。作品交互操作简洁，用户心中选取物件后采用问答形式猜谜，通过选择“是”或“不是”按钮，其最终总能猜中用户心中所想。用户在参与游戏的过程中往往会陷入回忆，由于情感上的共鸣使心理上产生认同感，用户往往乐此不疲地重复参与游戏并乐于分享。

同样是纪念改革开放40年的主题，H5作品《幸福长街40号》采用的则是长图拖放的形式。这个作品是人民日报客户端联合快手推出的，其创意来自于名画《清明上河图》。随着用户手指的滑动，凭票供应、女排三连冠、亚运会、香港澳门回归、奥运会等40年来最有代表性和记忆感的240多个历史事件或者场景，在一条长街上徐徐展现。作品的主要事件采用动效，配合具有当时典型时代特征的歌曲和音乐，呈现出中国社会40年来的变化历程（如图3）。画面中的情节和场景是大多数人的生活经历，从而让人很容易就能跟随画面产生联想，代入感极强。这一作品获得了用户的极大关注和好评，成为霸屏的好作品。

（三）用户主导参与，交互多元化

2014年H5刚面世时是以静态信息展示工具的面貌出现的，其形态类似于幻灯片，交互通常就是点击浏览、点击翻页等简单形式，更多的是在界面的视觉美化上做文章。后来随着微信用户的大量关注，对内容和交互的要求也越来越高，用户不再满足于被动的浏览，H5的交互形式也就呈现出多元化的趋势，用户的参与度越来越高，浏览体验得到大幅提升。

《伯乐找马，马到成功》是新年时进行床垫新品宣传的H5作品，采用绘制精美的古风画卷的形式，构思源自于《战国策》中伯乐和千里马的故事。作品设置游戏和抽奖吸引用户参与，在浏览过程中随着引导，用户不由自主地化身“伯乐”，从画卷中寻找到六匹骏马并解锁一系列丰富有趣的游戏及抽奖环节（如图4）。作品并没有明显地宣传品牌和产品，但是画卷中店铺的招牌、幌子上的品牌名字在用户寻找线索和参与游戏的过程中潜移默化地印入用户的脑海，骏马线索及游戏中的床垫元素也含蓄表明了产品。

H5作品《向野之型》是秋冬线上虚拟时装秀，采用虚拟现实的技术打造线上秀台，充满几何元素的炫酷的3D秀场，营造出眩晕和破碎感。用户点击“切换镜头”按钮可以从最佳视角观看模特动态的走台，也可以滑动屏幕从不同角度进行观看，还可以预约直播和领取不同新款的数字虚拟海报（如图5）。比起实地现场观看，线上形式的场景更炫酷，且不受开放时间和地域的限制，不受嘈杂人群的干扰，用户可以随时随地全方位地细细欣赏。随着虚拟现实技术的进步，线上秀场、线上展厅、线上博物馆的体验感必然更真实，这种足不出户的沉浸式观展必将成为现场观展的重要补充形式。

（四）动效元素丰富，视觉个性化

由于微信端H5展示空间的限制，很多内容和场景无法全面显示，以动效的形式对内容进行组织和优化，在有限的空间内表现出内容的时空变化，拓展屏幕空间，增强页面表现力。H5中最常用、最基本的动效是转场过渡效果，相对于静态的图片和文字，动态的元素对用户的视觉吸引力更强。随着技术的进步，动效的形式越来越丰富。通过巧妙地将交互与动效相结合，配合用户手势，不仅可以吸引用户关注重点，提升内容的视觉效果，还可以引导用户按顺序浏览，将信息快速有效地传达给用户。

《2020我的微博播报》是新浪微博年终个人总结的H5作品，目标用户是新浪微博用户，在回忆用户一年的微博历程之后，最终生成年度关键词海报。作品采用卡通化的场景和人物形象，最大的亮点在于动效的制作应用是目前比较流行的SVG技术实现，浏览丝滑顺畅（如图6）。SVG是一种基于XML技术的矢量图形格式，不受屏幕分辨率的影响，可以自由缩放不失真，且文件小巧，支持交互和动态，用户体验良好，目前应用越来越广泛。

需要注意的是，动效可以引导用户浏览、活跃页面气氛、增加浏览趣味，但使用要适度。过多的动效，尤其是缺乏规律性的动效，反而会分散用户注意力，阻碍信息传递，破坏作品的浏览体验感。

四、结语

H5是为了传播而生，是为了推广宣传内容、活动或品牌而制作的，目的是尽可能最大化地引导用户分享和回流[4]。好的内容是H5设计的根本，再炫的形式和交互都是为了营销内容的传播。在目前营销过度的情形下，H5的设计转变思路，从内容入手摆脱硬性的營销广告，以情动人来获得用户的认同感并让其主动参与，使品牌形象在潜移默化间得到提升。随着移动终端硬件的升级、H5技术的不断发展以及微信平台的更新完善，基于微信平台的H5将会在营销中显现出更大的优势。

参考文献：

[1]网易哒哒.H5营销策划一本通[M].北京：电子工业出版社，2020：2.

[2]刘松异.H5移动营销广告设计全攻略[M].北京：人民邮电出版社，2019：10.

[3]赵雅琳，李龙锐.新媒体视域下H5产品传播策略研究——以网易H5产品为例[J].记者观察，2022（20）：154-156.

[4]网易传媒设计中心.H5匠人手册——霸屏H5实战解密[M].北京：清华大学出版社，2018：8.

作者简介：

唐芸莉，硕士，北京电子科技职业学院副教授。研究方向：数字媒体艺术设计。

谭坤，硕士，北京电子科技职业学院副教授。研究方向：数字媒体艺术设计。

陈金梅，硕士，北京电子科技职业学院副教授。研究方向：数字媒体艺术设计。