ribbon image search rewind fast-forward speech-bubble pie-graph star

微信活动宣传页实践

最近大量时间参与到做一些宣传类的活动页,这里主要记录一些自己的心得。差不多一周会完成三个左右,还算比较紧凑。

选好模版

好的模板可以节省你非常多的时间,我理解的模版类似这样:

模版 = sass + es6 + webpack + server + html 

自己选用的 ykit 作为脚手架,可以很方便的进行前端工程化的配置;

其次还有比较重要的就是明确自己页面的功能类型,比如是动画效果为主,这需要选择合适的基础框架,由于自己是一页一页切换的,所以,自己选用了 swiper ,它可以很好将每个 slide 组合起来;

html 模板可以方便帮助你设置一些微信分享的 icon 和内容,这些你值需要根据自己的业务 填写响应字段或者数据就好;

微信分享

微信分享又两种链路,一种是基于 url 传递,还有一种是基于 图片的二维码形式,由于会存在被封的可能性,第二种的形式现在页比较多。很多时候大家都可以通过一个活动,计算初某种结果,然后生成一种图片,然后用户保存到自己手机。 当然第一种,也可以实现动态短链来防止被封的可能性。后面主要说第二种形式;

根据用户的动态生成的内容,比如选项或者输入,需要将 dom 结点转换成 base64 的图像,然后保存就好这里需要用到 html2canvas 的类库,它可以将某个 DOM 节点下的内容生成图像。这里有个小细节:

因为一般设计师的图像都是按照 750 * 1334 来的,这个时候,我们生成的时候最好按照 750 * 1334 输出,你可以设置 width 和 height 选项来实现,这样用户保存到手机的图像就不会出现拉升或者压缩的情况;

当然基于 cavnas 输出你就必须考虑跨域等一些问题,无论是转换成 base64 还是设置 CDN 服务器,这些都可以;

提前和设计师沟通特效

设计师在设计的时候大多都不会考虑页面重构的难易程度,因此设计出稿前的问题必须交流好,比如自己就遇见了为了一个文字特效需要到处外发光这样子 的问题,反而连设计都不好导出,我们需要衡量,这样的特效失去是否会影响整体效果。而且如果是一些需要经常变动的内容,学会 最小化 比如文字或者图像,相对而言如果你设计的文字效果特别复杂,这样只能通过切图来实现的话,我们如果直接文字是不是会更有利于开发和配置?

数据埋点

衡量一个活动是否成功?我们需要足够的数据支撑来体现,因此埋点是一件非常重要的事情,开发和产品都需要重视起来,整个活动的按钮设计,导向等,需要自己考虑是否引入埋点的链路。比如问题的每个选项,再依靠用户画像可以分析出一些规律。同意如果涉及友链的跳出,也需要进行辨别,这些数据都是需要后期复盘使用的。

You Can Speak "Hi" to Me in Those Ways