用炫酷的黑科技策划一篇公众号图文，阅读量 10w+ 不是梦

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

当你打开一篇公众号图文，发现只有一句话或一张图片时，也许你会一脸疑惑：这么简单的图文也能推送，还阅读量 10 万+ ？

直到你可爱的小手指点击了不断暗示你「戳它」的动画，你仿佛发现了新大陆：原来图文还有这种形式存在。

? vivo OriginOS 《我想开了》效果展示

SVG 交互图文是什么

在了解 SVG 交互图文之前，我们先简单了解一下什么是 SVG 。
SVG 英文全称为 Scalable Vector Graphics，即为可缩放的矢量图形，是一种图像文件格式。其具有以下三个特点：

一种图片格式
矢量图，在放大或改变尺寸的情况下，其图形质量不会有所损失
交互和动画，可以实现多种互动效果

那什么是 SVG 交互图文？

SVG 交互图文是通过 SVG+HTML 代码实现的一种高级排版方式，通过在 SVG 文件中嵌入动画元素，从而实现具有多种互动效果的图文。SVG 交互图文的特点：创意、超清、交互、动态。

SVG 交互图文其实不算新鲜的技术，早在 2016 年就有相关的应用，只是随着一个个爆款案例的出现，各大品牌开始发现 SVG 交互图文的品牌营销价值，并纷纷尝试这种图文新玩法。

通过与品牌契合的创意内容、各式各样的互动效果、惊艳的视觉效果，以科技感的方式「讲故事」（介绍企业或产品和服务）或者「玩游戏」，将用户一步步带入到情境中，引起用户共鸣，提高用户对品牌和产品的认知度，从而为企业塑造一个深入人心的品牌形象。

SVG 交互图文的优劣势

优势

1）相较于传统图文，SVG 交互图文更具有互动性和趣味性，可以给读者带来不一样的阅读体验，既能减少读者因阅读疲劳而退出图文，也能加深读者对内容的印象。
2）相较于 H5，SVG 交互图文形态更轻，更适合应用在公众号图文中。
3）SVG 交互图文更注重创意与风格，可以融合企业的品牌形象、产品理念，并以直击人心的方式传递给用户，达到出乎意料的品牌营销效果。

劣势

1）制作一篇 SVG 交互图文需要策划、编辑、设计、开发人员协作完成，沟通成本和制作成本高，制作周期长。

SVG 交互图文的互动形式

SVG 交互图文可以分为竖版长图和横版长图，常见的互动形式有点击、长按、滑动。

01 点击

当读者点击某个区域或元素之后，画面中会发生相应的变化，比如切换图片、放大图片、拉伸长图等。「点击」是较为常见的交互形式，通常需要通过指引来让读者完成点击动作，但过多的文案又会影响视觉效果，因此可以尝试使用「符号」来替代文字指引。

?? 案例展示：《我，在 iPhone 里发现了一座黄色小房子...》

案例解析：

点击切换图片：读者点击闪烁的「符号」，即可查看下一个内容，一张张简洁的图片一步步带领读者走进情景中。
点击拉伸长图：当读者已经产生其兴趣后，点击拉伸长图，展开更多内容，这种内容呈现方式，更能避免枯燥感，也能激发读者更强烈的兴趣。

02 长按

当读者长按某个区域或元素之后，画面中会发生相应的变化，比如长按切换、长按实现图片 360° 旋转（类似于三维动画效果）和抽签等。千篇一律的「点击」交互容易缺乏特色，配合「长按」、「松手触发」交互形式，会让图文更有趣味性。

?? 案例展示：《腾讯小马哥的 QQ 号是多少？》

案例解析：

长按切换，松手回弹到最初状态：案例为问答类，通过长按出现答案提示，可以更好的引导读者进入下一步。

03 滑动

当读者左右上下滑动图片时，画面中的一些元素会跟随移动。常见的滑动样式有：

双层滑动：背景不动，顶层透明图片滑动
穿透滑动：前景不动，底层背景滑动
夹层滑动：前景背景都不动，中间内容滑动

滑动常用于故事情景图片替换或问答中的揭开答案等场景，让原有的内容更充满神秘感，滑动也经常应用在横版的故事推动中。

?? 案例展示：《你以为我们用「Apple 全家桶」是为了炫富吗？》

案例解析：

双层滑动：将产品与多个应用场景结合，通过滑动图片更换不同职业的用户的故事，有趣的展示了产品的价值。

实现一篇高质量 SVG 交互图文的关键因素

01 创意+风格+交互，缺一不可

策划一个与品牌契合度高的创意内容，是制作 SVG 交互图文的重中之重，但设计风格和流畅的交互也是缺一不可的。以抓住眼球的创意切入点，让所有交互动作都自然而然，让所有内容都有条理的呈现出来，才能够真正引起读者关注、产生共鸣。企业推送 SVG 交互图文时，不仅要重视内容，也要重视与读者相匹配的创意和体验感。

02 团队协作能力

SVG 交互图文是需要品牌、策划、编辑、设计、开发整个团队协作完成，有效的需求沟通，规范的工作流程，才能高效地完成一篇交互图文，达到预期的营销效果。

爱范儿、知晓云团队助力 Apple、OPPO、华为、广汽传祺、滴滴等品牌打造了多个定制化 SVG 交互图文，创造了多个惊艳的图文交互效果。这些是需要企业与策划开发团队投入时间和精力去完成。基础的 SVG 交互样式，如在传统图文中插入「点击换图、图片轮播、点击显示、点击跳转」等交互，也是可以通过 SVG 图文排版工具来实现。

如果您有疑问、想法，欢迎一起交流学习。

本文转自网络，版权归原作者所有，原文链接：https://segmentfault.com/a/1190000039856295