banner1

微信公众号SVG推文怎么做?


时间:2022.09.19

随着微信开发技术的发展,除了微信小程序、微信H5游戏以及短视频等推广形式之外,SVG推文也渐渐成为品牌营销的主流形式,以可交互的和动态的推文让用户在阅读上更有视觉冲击。下面,蓝橙互动就给大家聊聊微信公众号SVG推文该怎么做。

 

一、制作方式

 

1、编辑器生成

这是目前常用的一种生成方式,通过第三方SVG编辑器,选择已有模板,进行配置后,拼出一篇SVG公众号推文。这种实现方式,比较简单,能快速搞定一篇推文。缺点就是,可供选择的模板有限,部分比较新颖或者复杂的交互不能实现;另外还有一点,因为是使用平台的服务,一般都需要购买企业会员,然后部分效果也是需要收费的。

 

2、代码构建生成

 

使用HTML和SVG代码构建,首先是确认好内容和展现形式,然后设计师根据内容做好UI设计,最后由前端程序员进行代码构建。这种方式可以根据不同的需求来实现定制化开发,并且不受模板的约束,可拓展性和操作性很高。所以一般想做比较有特色的推文,都会选择代码构建的方式来实现。

 

二、案例参考

 

SVG推文


1、案例介绍

 

这是由汇丰人寿为汇丰微保险小程序推广而推出的SVG公众号推文,通过推文向用户介绍小程序功能、发布活动入口,以及品牌宣传介绍。

 

2、制作流程

 

这个案例是通过代码构建的方式来生成的。在确定好发布内容和交互形式后,由设计师做好UI设计后,将设计源文件给到前端程序,然后由程序编码后,再将文章放到公众号管理后台进行发布。

 

3、技术实现

 

推文顶部“本期内容 点击查看”是使用的html中对得P标签来呈现的;文字下方是一整个SVG标签,并且将高度设置为设计需要展示的高度,将背景图设置为没有“线”的图片;这里特别说明下,由于公众号后台上传的图片有最大高宽限制,所以会把背景裁剪为多张图放进去。

 

SVG里面使用多个矩形来将背景图盖住;上下移动的手势是使用SVG的path标签,然后配合animateTransform使其上下移动;path的数据是用设计师做的矢量图导出SVG后获取的。

 

手指下方有使用SVG的手指移动区域,使用SVG的rect做了一个透明的矩形,并且绑定了点击事件;绑定的事件为animate绘制“线”和逐步显示矩形框;最后调整各个animate的事件来配合整个页面的显示。

 

总的来说,SVG公众号推文的制作方式并不复杂,通过SVG模板编辑器就能简单制作一个SVG推文,但想要发挥出SVG推文的效果,还得通过定制代码构建生成,才能取得更好的宣传效果,有需求的商家可对点击咨询我们的客服,获取更多SVG推文案例进行体验参考。


相关阅读:H5游戏制作|答题测试H5|互动视频H5|跑酷H5游戏|赛车H5游戏