微信公众号长图排版怎么制作的呢，像下面这种推文，怎么实现的呢？

微信公众号长图排版怎么制作的呢，像下面这种推文，怎么实现的呢？

途家这个推文正好就是我们i排版（http://x.iPaiban.com）团队做的。

有许多不熟悉公众号平台的朋友认为这是H5，然后让工程师制作了相应的H5效果，在最后导入到公众号的时候，却发现交互完全失效了。

结果就是白忙活一场……

这种形式目前行业内称为公众号黑科技排版或Svg交互排版，它媲美H5视频，提高粉丝参与度，提升趣味性，但成本更低。

题主的案例属于线条式Svg轨迹移动，点击按钮，线条沿一定轨迹延长，同时慢慢显现背景画面。

这种形式可以很好地将内容串联在一起，同时引导用户视线阅读，体验非常棒。

从行为设计学的角度来说，线条是焦点元素，引导用户的阅读方向和阅读节奏，让用户按我们规划的时间节奏完成阅读，不错过任何重要信息。（常规的图文一览无余地展示所有内容，用户拥有全部的自由，但大多情况下并不会认真阅读完所有内容，完播率非常低）

大致原理是先让设计师通过Ai绘制矢量图形，然后转成Svg代码，工程师再技术控制让人物、物品动起来，沿着绘制的轨迹移动。

类似的相似和升级版案例还有：

华为终端：

「华为终端」这篇和途家的一样，是线条轨迹最基本的玩法，一条线一直延长，贯穿全文。

FOTILE方太：

「方太」这篇延伸过程中还会出现线的分支，难度高了一级。

好奇博士：

「好奇博士」这篇先是点击图文拉长，然后在拉长的图文中再次点击按钮，线条慢慢向前延伸，因为画面内容较丰富，所以画面跟在线条后面也是延伸出现，而不是像「方太」那样浮现。

帝斯曼中国：

维他奶Vitasoy互动平台：

「帝斯曼中国」和「维他奶」的案例不是单一的线条延长，而是一个元素跟随线条延长一起前进。线条前元素的设计可以让整个交互更易与文章主题贴近。

不同于传统HTML、CSS、Svg的是，微信平台有大量的限制，我们要通过不断测试找出哪些是微信图文里可运行的交互，并将之转化成动作、交互。

除了途家，这些都是我们合作过的品牌公众号：

现在大部分Svg交互效果用 iPaiban Pro 黑科技编辑器就可以实现了，比如点击变换图片、新年签、隐藏式音频、点击图文展开等。

iPaiban Pro 是第一款专注于公众号Svg交互排版的图文编辑器，让不懂代码的运营者也能轻松制作交互图文。网址：http://x.ipaiban.com

如果你想查看更多排版教程和运营知识，可以关注公众号【i排版】，为公众号排版运营助力。