在第14期《半撇私塾班级研讨会》直播课中，我们邀请了学员中的 SVG 高手大白同学，给大家分享一下如何使用黑科技SVG排版技术，为你的公众号文章提高互动性和观感。

 

本文 2690 字，阅读时间 9 分钟。

PS：文末有福利！

嗨喽，大家好啊。我是大白，一名在运营圈里混了3年多的打杂运营。

随着微信公众号红利的不断消失，无论是获取流量，还是保住阅读量是越来越难的了，10W+这个目标，已经让大多数小编感觉越来越遥远。

内容为王的时代，除了内容好，没有一些好玩有趣的运营技巧，真的很难伺候粉丝了。当下除了粉丝们看腻了的常规图文外，还有如网易经常搞刷屏的插画长图文，一些营销H5小程序植入，被微信关停的动图封面。

无论玩法怎么变，终归就是要在好的内容基础下，提高用户的视觉体验和好奇心，从而来增加与用户的互动、阅读数的增长、增加用户的黏性等各种目的。而今天，我将和大家分享一个近期比较火热的SVG样式。

1. 什么是SVG？

SVG简单来说就是一种图像文件格式，是可交互的和动态的。我们可以直接使用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。（来源：百度百科解说）

上个月的最大热点事件中，非「高考」的话题莫属了，这一篇公众号文章，就是在高考的那天发布的。

这是一篇属于新媒体人的高考考卷，你都能答对了没？是不是和常规的图文有点不一样？这就是一篇用了3个SVG样式的互动文。

像这种答题测试类型的文章，早期更多的是可以做成如麦客表单那样的，但到最后才能给出所有答案，没法像这篇有着这么强的互动性，有及时答案反馈。

而这篇文章可以增强与用户的互动性，一定程度增加用户好奇心，促使用户更认真地参与互动并读完，甚至会因为觉得好玩而转发来增加传播性。

不仅如此，类似的SVG排版样式还可以：

• 让用户在阅读上更有视觉冲击，增加用户好奇心；
• 让用户更好的带入文章内容，感受内容所在的场景；
• 帮助我们和用户产生更多的互动，而不是只是一种阅读与被阅读的关系；
• 提高文章点赞、留言、分享等。

除此之外，SVG可应用的场景和玩法也很多：

1）节日营销。如去年国庆节时有个升国旗、元宵节有猜灯谜的玩法；

2）彩蛋营销。如拆红包、拆礼盒，这个很适合吃喝玩乐和一些电商号做活动；

3）推广营销。如游戏小程序的推广，这块的svg更多需要和第三方编辑器进行策划定制，像吃鸡游戏就做过这种定制；

4）创意营销。如蓝屏、横屏霸屏的滚动字幕、阅后即焚等创意玩法。

5）内容营销。如逐行显示、消失，公众号「胡辛束」就很会玩这个，有兴趣的话可以去看下，还有如答题样式。

所以在今天，我将和大家分享类似上述案例的svg排版样式。这类SVG属于入门级别，是基于微信文章的交互图文设计的黑科技排版技术，目前可以在第三方编辑器135上已有的样式进行修改。

更高级的样式，是需要品牌定制或着会写样式代码的技术团队打造，相对来说比较复杂，所以就不在我们今天所讲的范围内。

2. SVG样式排版工具

俗话说，工欲善其事必先利其器，一款好的编辑器，对于我们的工作是有很大的帮助的。在编辑器的选择上，我比较建议使用135编辑器，其他也可以使用秀米、i排版、壹伴插件、365编辑器等。

普通的SVG样式目前只有135编辑器的样式比较多，样式更新也比较快，技术能力算是比较好，而且135在排版教学这块做得很好，会在他们的公众号上对单个样式或单个主题的样式进行详细的讲解。

3. SVG排版范例讲解

今天我会通过两个案例的操作示范，教大家如何去做这个svg样式的排版。

样式一：四选项答题

（点击图片观看四选项答题排版操作教程）

这个样式除了高考，一些有点答题性的活动都可以用，像元宵猜灯谜也可以用这个样式。

样式二：逐行显示

接下来我给大家讲解一个逐行显示的样式，这个样式可以很好的让用户代入内容中。

这个样式在135编辑器上的编号是90246和90189。编号90246样式是13行，适合篇幅长。编号90189样式是5行，适合篇幅短。样式使用流程可观看下方视频。

（点击图片观看逐行显示排版操作教程）

4. 如何快速搜索svg样式？

除了上面举例的两个样式，如果你还想找到更多适合自己排版的svg样式，你可以：

• 在编辑器的搜索框搜svg，会出现大部分的互动样式；
• 搜索想要的样式名称关键词，如红包、显示、答题等；
• 关注135编辑器的公众号，了解新样式的发布信息。

5. SVG样式排版小技巧

1）互动排版的文章不要直接用复制黏贴的到微信编辑器后台，容易造成会乱码，等于样式作废，一定要使用编辑器同步功能。

2）不是所有的样式修改都要在代码编辑器里修改，一些基础内容可以在普通的编辑器页面修改就行，如字号、颜色、字体等。

3）互动样式记得要加互动提示，如案例文章中的提示「须戳选项前的圆圈作答」。因为目前svg的玩法出现还比较少的，大多数用户接触是不多的，如果留着让用户去猜测，反而会降低互动率，所以应该主动去提示。

4）样式需要和文章内容产生关联。像案例文章《2019年新媒体人全国统一卷（加密）》中选用样式都是答题样式，能融入高考这个氛围和内容中。但假如我们在这篇文章中加入一个红包样式，就很不符合场景，虽说样式好玩，但也要实际的内容搭配。

5）模板样式最好不要超过3个。样式过多会导致太乱，观感不好。

6）整篇文章大小不要超1G。由于微信限流，文章过大微信是发不了的，并且文章太大，用户打开也麻烦，容易导致加载慢或卡。

7）图片尺寸要统一、清晰。如果文章图片不统一，会使很多样式变形，整体看起来不整齐协调。

另外，想掌握排版技能，光看知识没啥用，最重要的还是动手实践，多去动手练习非常重要，想要掌握的话，课后可以跟我一起动手操作哦。

最后，给大家推荐几个学习排版的公众号：

1） JZ多媒体解决团队（公众号JZCreative），我们今天所讲的svg就是JZ与微信团队联合定制的一种微信图文交互排版；

2）135编辑器：每天都会教排版技巧，也有很多样式的操作流程；

3）蝌蚪运营、石学姐：这两个公众号也会发布一些好玩有趣的排版知识，可以关注了解下。

彩蛋：新媒体工具福利社

实操工具哪里有？推荐大家领取价值 1299 元「新媒体工具福利社」！

8 月 16 日（周五）前， 5 人拼团， 0.01 元即可领取「新媒体工具福利社」全部工具福利！

内涵 135 编辑器的 30 天VIP会员，以及多个“神器”的VIP会员！立即扫码领福利！