一个1.3亿UV的H5运营活动背后的细节揭秘

然后具体绘制，首先是这基础地图，布局好基本的模块，便于后面添加或减少。

接着就是元素的组件化。这是这个方案的核心，通过把元素组建后，就能够把它们如同积木一样按照上面提到的模块拼装到地图上。

上面就是基本组件组装后的效果了，中间留出了放置企业和明星的主要路线。

放置明星和企业以后，为了突出主要路线并结合元旦跨年晚上的感觉，因此把主要路线以外的区域都压暗下来，营造氛围感并使得用户更集中到路线（时间线）上，那些对应的时间点，也都做成组件，突出之余并方便替换。通过“积木拼装”的方法，这样哪怕有调整，都能够通过组件的添加和删减或者位置的变换来完成，大大减少因为招商以及决策因素频繁返工所带来的工作量。当然，前期绘制组件和地图也是个不小的工作量…但，毕竟自己提的，而且设计师总要有追求嘛…

分享

为了让更多的用户看到并了解这个h5，除了通过各个渠道去进行曝光之余，另一方面方法就是刺激用户分享到如QQ空间、朋友圈等平台，通过各种关系链达到曝光和营造口碑等目的。能够刺激用户分享的h5内容我总结了下一般是：排行榜、测试结果、新闻热点、收益、个人数据这几类，但是它们都有个共同点，那就是都是和用户自己相关的内容信息，因此我们结合红包的相关数据，并对其进行包装，让用户在心理上更具有参与感（微信平台拉取不了信息，另作显示）。

细节

文案

文案是特别重要的，在很多的设计文章中都有提到，运营也是一样。这次的运营中，除了传达上诉的明星与企业信息、时间点，最最重要的就是告知用户“12.31晚上7点，来QQ刷一刷抢红包”这一信息点，因此可以看到这个信息几乎都是在每一页显眼的位置，通过反复强调来加固用户的印象。

loading与分享蒙板

虽然loading是很快就跳过的部分，但是在网络较差或者信号在4G以下的时候，还是需要一些等待的时间，这次元旦的h5就通过一个跳动的小红包这个细节来增加趣味性，减少倦怠感。而微信由于系统的关系，点击分享后会跳出分享蒙版提示，这个地方我们也做了个小动画摆脱以往单调的文案指示。

动画

除了loading和分享蒙板之外，整个H5中，我们也用一些动效来代替了单调的过度。通过这些动效来让整个H5更为灵动有惊喜，迎合欢乐的主题并用户心理的感受上更为流畅和自然。

呼～以上就是整个元旦红包H5的设计部分啦，整个h5最终的体验顺畅，虽然中间踩到不少的坑，但后面解决问题做出来后还是蛮有成就感的～辛苦策划还有技术童鞋……呃，感觉似乎还有什么事情要发生的样子？

“对了对了，后面还有个除夕的红包，你继续做吧～”“呃，好的…”果然，没那么快完。

继续奋斗

除夕红包运营H5大致总体上和元旦差不多，流程操作上比较一致，能形成系列，保持红包两期活动的品牌性一致。但是除夕要求比元旦要高，所以画面的处理比之前要更细致，体验要比之前的流畅。与元旦不同，除夕是中国传统节日，是和家人团圆迎新的日子，这种回到家团聚的新年氛围感是我们想传达的，讨论之后，决定把这次主题关键词定为：温馨。

由于篇幅有限，加上有刚做完元旦H5的经验，解决了很多问题，所以接下来除了与元旦H5不同的设计点，其它就直接上图图图啦～下面是除夕的整个方案：

除夕地图的设计过程：

之前元旦的地图由于有放大缩小的动画所以需要动用整个地图，导致资源过大，而且元旦地图的左右切换还是让用户对时间走向有些费解，吸取教训后，这一次用长条状形式，只取主要路线的部分，减少了资源大小，而且移动顺序从下至上，这样让用户更容易理解时间线走向。

相关的组件：

定制化组件：

和元旦h5不一样的地方主要就是这次需要对明星、企业相关的组件进行定制，突出它们对应的属性以及气质，对其品牌进行一定的宣传，提高辨识度。

分享内容：

在元旦H5分里拉取红包后台数据的时候出现了不稳定，而且QQ和微信看到的内容不一致也的确体验上并不是很好，因此这次除夕H5结合一些梗，把“刷红包手势”作为刺激用户分享的内容，一方面强化用户对“刷一刷”的认知，另一方面由于不需要拉数据，减少了发布后的风险并保证了各平台的体验一致。

动画：

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!