公众号排版如何做出高级感？SVG实现局部点击换图效果教学
羡慕“局部气候调查组”的交互长图？本文手把手教你拆解案例，利用135编辑器SVG功能，实现局部点击换图的电影感效果，让排版立刻高级。点击立即学！
相信每一位新媒体人发问：“有什么优质公众号推荐”时，「局部气候调查组」一定位列其中。“局部气候调查组”以长图文叙事形式展示内容，将严谨的科学知识与艺术创意完美融合。他们擅长用"一镜到底"的视觉手法营造电影感体验，搭配荒诞幽默的对白与严谨科普形成独特反差萌。
SVG交互技术的巧妙运用，配合"或抽象或写实" 的插画，让复杂知识变得生动有趣。作品如同小说般引人入胜，金句频出，在科普传播领域独树一帜，为读者打开了认识世界的全新视角。
恰巧，近日有小伙伴浏览「局部气候调查组」时，看到一篇推文，甚是喜欢。想要学习如何制作，那么今天就让我们开启品牌排版学习之旅。
*思路分析
让我们简单分析下，本文核心是「点击」动作，每点击一次就会换一张图。
这时候有朋友说：“这不就是点击换图吗？不难呀”
没错，这是「点击换图」但又和日常的不同。平日点击换图多是整块区域整体换图，而「局部」换图是整体区域中部分内容换图，这就是它的巧思。
如何实现？
很简单：利用一行多列布局效果在不同的区域中插入点击换图效果，就能实现局部换图。
1、从135编辑器左侧找到「SVG编辑」，点击进入SVG「编辑器页面」
2、进入SVG编辑器页面后，在左侧选择「SVG效果」在搜索框中搜索：基础布局一行四列，组件ID：350
3、选择其中一个布局，点击页面右侧的「编辑基础布局」
4、进入后选择「点击换图」组件ID：6。如果该区域不需要换图，我们选择无缝图（组件ID：1）添加即可。
*注意：点击换图的前后图宽高需保持一致，无缝图高度需与点击换图一致。
1、三儿使用135插件下载了「局部」这篇文章的所有素材图给大家做案例展示，大家也可以利用插件提取公众号推文素材做练习使用。
注意：图片提取仅作教学练习使用，不可擅自商用！
「局部气候调查组」这篇原文有三百多张图，这里仅做部分效果展示。
1、我们回头看，「局部气候调查组」并没有用什么复杂的效果，而是将布局与点击换图完美配合，搭配他们精良的画面，有趣的文案，最终呈现这篇佳品。
框架展示
2、好的作品，从不是单一交互效果的堆砌。它像一座建筑——好的设计是出彩的外立面，扎实的内容是稳固的地基，SVG不是雪中送炭而是锦上添花。
3、在后续内容创作中，我们不妨试试利用布局搭配简单效果，如：滑动、轮播、点击换图、多次点击换图等。让效果为内容赋能，使用简单效果或许能让用户更专注内容本身。
4、使用SVG不是为了盲目炫技，而是让内容更有趣、更易于传播。
以上就是三儿分享的全部内容了
如果觉得还不错
记得点赞+在看
互动时间
「你在作品里用过最难忘的交互是什么？」
欢迎在评论区聊聊你的经验
祝你拥有美好的一天
