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

途家这个推文正好就是我们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排版】，为公众号排版运营助力。

嗨喽，热心的三儿上线啦~三儿来回答你的问题

题主所展示的推文的效果是由黑科技SVG效果制作出来的，属于点击展开效果，视觉方面，是由设计师专门绘制，“纸飞机”、“线条”等元素则是由设计师绘制好后写好代码制作而成的。

像这类效果一般是专门定制的呢~咱们135编辑器旗下的公众号【135平台】也发过类似的文章，主题是六一儿童节的查看链接即可查阅。

https://mp.weixin.qq.com/s/5tDhlru0acXgSP_Gr0K-Nw

除此之外，在我们135编辑器下面的SVG编辑器里有多种点击展开效果，大家可以进行选择~

找到ID为130的SVG效果，添加到编辑页面，上传图片即可，图片要求如下：

以上就是三儿分享的全部内容啦~

如何使用微信公众号编辑器制作svg图文排版？看这一篇就够了！

该文效仿宝马中国制作而成，所以视觉设计、交互效果上和宝马相比相对粗糙，可以先欣赏由 @意符文化 操刀的宝马原作，该作于2019年5月31日发布：

随后，就产生了这篇 8 月的效仿文章。当然毫无疑问，这类效果当时也是基于手工模仿而成的，代码核心主要是基于：

• 透明度动画
• 描边动画

并且在一些必要情况下，使用 SVG 双层触发原理制作。

首先，从初始位置触发，使用手指符作为提示，引导用户点击，避免用户误认为页面空置：

这一点题主所引用的仿制图文也照做了，当然设计上粗糙了不少：

之后是根据剧情需要，将轨迹描摹动画 <dashoffset> 和透明度动画 <opacity> 进行套娃式的代码编组，展开剧情。这一类作品后期出现过大量高级迭代，但无外乎都首先基于宝马这篇图文的设计逻辑。例如：

除此以外，越来越多的 SVG 交互式作品正在不断问世，且往往登录行业顶端大品牌。目前，有很多运营编辑开始选择自行学习或者使用价廉物美的第三方编辑器实现相关的开发。

如果你考虑自学，那么首先推荐的课程是：

其中就包含了题主所说案例的本质结构解析。同时也可以阅读图书《硬核运营：新媒体技术流养成》来学习：

或者选择价廉物美的第三方编辑器，也可以实现多种多样的 SVG 互动排版。

e2.cool 黑科技交互编辑器，背靠 1000+ 行业案例开发经验，通过技术下沉提供大量免费与付费公众号交互排版模版，诸如常见的「点击出现」、「点击展开」等互动都是可以在我们 E2 编辑器直接免费使用的。专业会员和企业会员也仅需每年 ¥404 和 ¥2999，使用 400+ 各色 SVG 交互模版。

任何公众号运营中的疑难杂症，都欢迎邀请我们回答哦。

这里是 E2 编辑器（ e2.cool），会的比别人多一点。

1、案例分析

首先，给大家看一些反面案例。这些例子主要有以下三个缺点：背景杂乱，整体颜色太多，排版没有章法。

那么一张好的公众号长图应该是什么样的？

从这两张图中可以看出来，优秀的长图设计应该是风格调性与品牌相匹配的。

包括字体以及相关元素选择搭配，这样才能达到更好的视觉效果。

通过这些案例，我们分别总结出长图设计制作的四个要素。

• 主题风格
• 配色方案
• 字体选择
• 版式层次感

2、长图设计四要素

1、风格配色

我们在做一个微信长图的时候，首先要考虑的是我们文章内容的调性。长图的设计风格应该要与内容相匹配，这样才能吸引更多用户。

首先给大家梳理一下常见的一些设计风格，都适合什么行业，传达的理念是什么。

其次，色彩也是风格的一个重要体现，大家在选择颜色时要注意尽量符合大众审美，这样用户的接受度才会高。

例如第一个例子，整体设计选用紫色，显得神秘又浪漫是吧！搭配精致细描边的插画元素，很符合美妆内容应该有的调性。

第二个例子，从整体风格来看，就可以看出与科技、会议相关。

图上医疗风格的长图也采用了冷色系，加上一些小范围的互补色，还有简约的人物插画，使得内容看起来很舒服，也符合我们大部分人对医疗行业的认知。

所以，大家在选择模板的时候，也应该注意要与内容品牌调性相一致。

2、素材选择

虽然大部分插画素材对整体长图只是起装饰作用，但是不同的素材类型也传达了不一样的视觉效果。

a.素材风格与主题相配

大家可以看到这两个例子使用的插画类型都是绿植，但却营造出了不同的氛围。

左边这个是绿植是精致写实风格的，搭配了卡其色带褶皱纸纹的背景和ins风的小卡片设计，营造出时尚、休闲的氛围。

而右边例子的绿植是概括插画，再搭配了这种简约的线条和浅色调的背景，所传递出来的氛围就是比较素雅、安静、文艺的。

b.围绕内容相关元素选择素材

例如：第一个中秋节的长图，则可以选用具有中国风的元素插画，比如灯笼、月兔、月饼等素材。再搭配纸张纹理的浅色背景，就很符合中秋月下猜灯谜的意境。

第二个圣诞节的长图，则选择节日代表色墨绿色为主要字体颜色，搭配节日主题相关的姜饼人、圣诞帽、铃铛、圣诞树等插画素材，这样整体就吻合圣诞的节日氛围了。

3、字体选择

字体选择其实也很简单。有些字体很直观，一眼看上去就适合做标题，比如点字倔强黑，点字美玲体等。而有些字体比较常规，那就适合做正文，比如思源黑体，点字点黑体等。常规字体用作正文内容，也更加有利于我们阅读。

字体的选择上同样需要参考文案内容选择相同性格的字体。例如武侠类的电影海报字体一般都是书法体，而科技类的大多是特别硬朗粗黑体。

因此，一个设计中不同文本位置的字体在搭配时也需相互照应，这样更好地体现设计的一致性。

同样为了让大家在字体选择上更加方便，在工具栏“风格”选项下有“字体”选项，

里面包含了多个预设好的字体组合。选中一个文本，点击任意的字体组合，就可以直接应用到模板中，实现全文字体的替换。

当然也可以选中文案，在字体选项中自由选择，一键帮你解决字体搭配的苦恼。

4、版式层次感

总结为两个原则：对齐、对比

首先是对比原则，我们可以感受到通过字号大小可以看到数字符号和文字标题的对比；标题和正文的对比，有了这些对比才有层级的概念。

那如果没有层级的设计会是怎样？

由于没有层级，这些图就看着很平淡，无法很好地引起读者的注意力。

其次是对齐原则，标题和正文用到的对齐方式主要是两种，分别是左对齐、居中对齐，因为这两种对齐方式，在视觉观感上也是最舒服的。

在文字内容多的版式中，一般是不会出现右对齐的方式，因为我们知道，人的阅读习惯是从左往右，所以，大家记住上面两种即可。

5、配色组合

颜色是非常富有感染力的，颜色用得好，能为你的设计加分不少。通过每一次颜色的选择，确定新媒体的整体视觉风格

以红色为例，红色代表着温暖、炙热、爱情、热血、食欲、力量、警告、心跳、喜庆、诱惑等等，它的这些性格决定了它被广泛地应用在餐饮、购物、女性、母婴等场景中。

下面是一张颜色、情绪和行业属性的对应表。大家可以根据这张表找到适合自己品牌内容的颜色。

此外，同一色系中颜色的深浅不同传递的情感氛围也不同。比如说，下面这几张设计都是以红色为基调的，它给人的视觉感受也截然不同。

那么在设计过程中，又如何去进一步确定一个色系中的某一色号呢？

这是一张色彩的四象限表，在这个四象限里面的告诉我们的意思是，饱和度越高的红色，它是越倾向于动的，倾向于喧闹的，饱和度越低的颜色就是越偏灰的颜色，它是越倾向于安静的。

颜色越浅的红色，明度越高的颜色，它给人的感觉是柔软的，轻快的；那颜色越重的颜色，给人的感觉是坚硬的。

不过，如果你不懂那些专业的配色理论，也可以直接用人人秀推荐的配色组合。

在人人秀工具栏中的颜色调色盘，选中一个模板之后，点击调色板，模板的整体配色就会改变，多个调色板都可随意选择。

微信公众号的长图排版制作还是挺简单的，我一直使用的是速排小蚂蚁编辑器，他的背景图设置超级简单，而且长度都是自适应的，无论你文章编辑多长，只要添加过背景图都可以适应。咱们一起来看看是怎么操作的吧。

1. 点击打开编辑器，点击背景图

2.背景图分为纯色背景图和图片背景图。

3.选择图片背景图可以选择不同的颜色，选择的颜色会直接展示在右侧预览看效果。

4.选择图片背景图可以选择是系统推荐的，本地上传的和编辑器里边我的图片的。这个就看大家的需求了。

方法一：有的编辑器就可以直接生成长图，还有的第三方软件可以用H5长图制作。

方法二：用PS制作一个长图

2023年父亲节专属公众号模板素材派送中……

本周日就是父亲节了，大家记得给父亲打通电话，常回家看看也是好的。

好了，今天就给大家分享一下父亲节公众号该怎么排版吧！

本篇文章主要分成两个部分，一个是父亲节的全文模板，一个是父亲节的单样式，大家可以根据自己的需求进行选择使用哦！

以下是四款全文模板：

整体的颜色搭配非常的和谐有爱，简洁却不简单，适合绝大数行业的需求

模板ID分别是：4975 4968 4965 4995（在编辑器上直接输入ID就能准确无误的找到该模板）

父亲节单个样式分享：

单个排版样式，可以随意更改样式的组合搭配，点击左侧父亲节专题栏即可

单样式种类分别包括：图片样式、内容样式、标题样式、分割样式、引导样式、等等

有需要的小伙伴就可直接到编辑器内自行查看使用哦！

用PS就行，再结合秀米(手机版就能发布)上传到微信公众号平台，按照王木南设计频道写的这个步骤做，就会很简单。

只用一张长图文，就能轻松搞定一篇公众号文章?

写在前面:

微信长图文是一个比较流行的展示形象。我们做设计要先了解该品牌的背景。

首先浏览该公众号之前文章的风格。然后在编写公众号时，要让自己的风格和公众号之前上传的图文风格一致。注意，若拿到需求后直接开始，就容易忽略公司的喜好，品牌的调性。无论版式怎么变，配色，字体一定要与公司调性一致。

其次，当处理大量文字信息时，可以先定版式，再填充素材。这是高效排长段文字的方法。一张长图文包括的要素不止是最基本的图片和文字，还有背景点线面的应用。在定稿前注意版心和留边距。

具体步骤:

1.新建:像微信这种线上的是以像素为标准；宽750像素，长度不限(通常长6000像素，多余的尺寸最后可以用裁

切工具剪掉)；72分辨率；RGB模式。

2.颜色:把logo素材中的颜色直接提取，存到PS色板中，这个方法可以保持住全文调性。

3.文字:

a.大标题用粗体Bold，副标题用常规体Regular，内容文字用细体Light；

b.微信内容文字的大小建议在26～30磅。

c.阅读全部文案，把关键信息进行加粗,改色等处理(改成logo中有的颜色)

d.设置第一段的段落格式(调间距等)做好第一段格式后，直接复制该段作为第二段，然后把第二段文字替换到这一段中，以此类推，就能让全文的段落格式统一，而不是每一段都重新设置。

4.添加背景，用点线面丰富和衔接版式。调整版面结构(段与段的距离，图与文的距离等)(注意，一段文字可以当做一个块面，每段文字都可单独设计自己的背景!如图所示)

5.存储格式:微信的长图文，一定要用PS的“导出”-存储成web格式-GIF(其余参数不用调)，因为GIF灵活，动态内存小，注意PS源文件也要好好保存，方便作为此公众号下一张的模板哦！

要点总结:

1.一定和之前公众号风格一致!

2.一定把每一段形成块面!

3.一定留足安全间距!(段落与段落的距离>行与行的距离)

我也是全平台同名，王木南设计频道，每天都会分享设计类有关的马克笔手绘，设计方法，艺术考研和找工作。更多内容搜搜微信同名的公众号，会有更多详细教程内容哦！

这是基于svg图的基础上，配合公众号编辑器的动画设置一起做出来的效果，相对复杂，如果不是必要就不要用这种方式了，不然一篇图文会用掉你很多时间的。

强烈安利你用镝数图表上的长图模板直接套用，免费使用，而且很简单哒~~~

点进网站，选一个你喜欢的模板，再点击【编辑】，修改下内容，一张精美的长图就搞定啦。快速又方便！

模板的种类很多：

制作公众号长图，美观是很重要的，这也是我选择镝数图表的原因之一。款式、配色都太深得我心了，比如我最喜欢的这几个：

看上去超高级有木有！而且画布主题、颜色、字体等通通都是可以修改的，你可以完全按照自己的审美来~

如果你不想用模板，喜欢自己制作长图的话，镝数图表也可以满足你哒！

进入网站后，选择左侧【数据图文】，点击【空白模板】新建一个空白画布，接着你就可以大显身手了！

做好之后，点击右上角的【下载】，可以导出jpg/png格式到本地。一键导出非常便捷，而且没有水印，不要求付费！

另外公众号首图也可以在镝数图表制作，免费便捷款式多！一个镝数图表就能轻松帮你把公众号配图都搞定，省下的时间用来写公众号不香么~

不用另外下载软件，进入网站后直接在线制作，希望我的回答对你有帮助~

谢邀

你好，这个长图应该是H5，有好多第三方平台工具可以做出来，具体详情你可以去参考学习一下。

用PS做成长图的形式，然后切图-保存 保存完成后放在秀米里，两张图片之间的空格要删掉 就这样了 其中长图中的动图，用ps也是可以做出来的