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

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

PS:文末有福利!

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

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

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

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

1. 什么是SVG?

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

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

image.png

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

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

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

不仅如此,类似的SVG排版样式还可以:

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

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

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

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

image.png

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

image.png

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

image.png

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

image.png

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

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

2. SVG样式排版工具

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

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

3. SVG排版范例讲解

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

样式一:四选项答题

第一个样式是SVG四选项答题,在135编辑器的编号是94908。

image.png

样式一说明教程.mp4 (8.44MB)

(四选项答题排版操作教程)

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

样式二:逐行显示

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

这个样式在135编辑器上的编号是90246和90189。编号90246样式是13行,适合篇幅长。编号90189样式是5行,适合篇幅短。

image.png

样式二说明教程.mp4 (10.16MB)

(逐行显示排版操作教程)

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

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

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

5. SVG样式排版小技巧

image.png

  1. 互动排版的文章不要直接用复制黏贴的到微信编辑器后台,容易造成会乱码,等于样式作废,一定要使用编辑器同步功能
  2. 不是所有的样式修改都要在代码编辑器里修改,一些基础内容可以在普通的编辑器页面修改就行,如字号、颜色、字体等。
  3. 互动样式记得要加互动提示,如案例文章中的提示「须戳选项前的圆圈作答」。因为目前svg的玩法出现还比较少的,大多数用户接触是不多的,如果留着让用户去猜测,反而会降低互动率,所以应该主动去提示。
  4. 样式需要和文章内容产生关联。像案例文章《2019年新媒体人全国统一卷(加密)》中选用样式都是答题样式,能融入高考这个氛围和内容中。但假如我们在这篇文章中加入一个红包样式,就很不符合场景,虽说样式好玩,但也要实际的内容搭配。
  5. 模板样式最好不要超过3个。样式过多会导致太乱,观感不好。
  6. 整篇文章大小不要超1G。由于微信限流,文章过大微信是发不了的,并且文章太大,用户打开也麻烦,容易导致加载慢或卡。
  7. 图片尺寸要统一、清晰。如果文章图片不统一,会使很多样式变形,整体看起来不整齐协调。

另外,想掌握排版技能,光看知识没啥用,最重要的还是动手实践,多去动手练习非常重要,我现在最多只是分享些技巧给你们,想要掌握的话,课后可以跟我一起动手操作哦。

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

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

2)135编辑器:每天都会教排版技巧,也有很多样式的操作流程;

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

6. 新媒体工具福利社

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

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

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

image.png