创意排版｜微信交互图文｜微信公众号招聘类图文如何利用SVG技术做到别具一格？

 今天给大家分享的是11月18号在「VMware招聘」官方微信公众号发布的一篇沉浸式交互图文，题目为《你的职场你做主，你的生活你掌控，VMware助你双丰收！》

传送链接：你的职场你做主，你的生活你掌控，VMware助你双丰收！

类似于这样的沉浸式交互图文推送使用到的效果是SVG高级代码动画长卷类中的编组嵌套动画，顾名思义，沉浸式交互是复杂性与多样性的统一体，能够给公众号的内容增添生动性，尤其是在大量文字的情况下，利用交互增添品牌内容的趣味性，使用户快速接收到品牌输出的信息。

我司交付给品牌方沉浸式类的交互效果有：引导用户通过点击、控制人物或某个元素前进、前进过程中与长图中的某些NPC或其他元素产生互动，比如中间穿插人物对话、答题、点击弹出弹窗等一系列内容，这样的交互效果通常会用在流程介绍、企业文化介绍等推送中。

接下来让我们一起来看看我司交付给「VMware招聘」的这篇推送，品牌方是如何利用交互效果使得长篇图文栩栩如生的呢？

文章内容的开头以VWware的HR人物作为引导读者深入企业信息的元素。可以看到开篇中「Go」用SVG做闪烁效果的互动小动画指示读者操作，点击触发按钮后HR人物元素执行前行动作，利用逐帧动画，绘制出3-5帧图片素材达到运动视觉，再运用位移动画控制人物前行。人物前进的过程中，以自动播放发形式关联出现对话、按钮等其他内容。其次，以答题形式再次引导读者进行互动，与读者产生更深入互动也加深对企业信息认知。另外在企业信息展示中，添加透明度动画效果，引导读者点击弹窗后弹出详细信息。除此之外，在企业信息内容的技术适配之上，我们也在画面细节中进行技术处理，设置一些循环播放的动画元素以实现svg动态图，例如摇摆的花朵、职场员工摆动的手脚这些游动小元素，具体来说是运用了旋转动画技术，实现元素的动态动作，丰富画面细节，优化读者阅读观感。最后企业招聘具体信息的链接在文章末尾处，巧妙的图层顺序处理，将HR人物元素移至背景，突出展示信息重点。

在这篇招聘类的文章中，涉及企业简介、企业业务、人员架构、公司福利、企业文化等内容都通过长卷类编组嵌套动画的交互体验一一呈现，最后在文章末尾嵌入企业招聘宣传片，读者进行一系列的交互操作后再以视频阅读的方式深化VWware企业信息。

简单总结，一篇长卷类交互图文中，我们使用逐帧动画+位移动画+编组嵌套动画+透明度动画+循环动画的技术组成沉浸式交互效果，引导用户通过点击，控制人物或某个元素前进，前进过程中与长图中的某些NPC或其他元素产生互动，这类沉浸式交互效果通常会在流程介绍、企业文化介绍等推送中使用。

类似于这样优秀的沉浸式交互图文还有如下案例参考：

横屏阅读：

对面的女生看过来，这里的故事很精彩

《屈原职场历险记》正在恒洁精彩上演！

青春集结，TOTAL与你一起塑造未来能源！

竖屏阅读：

We care you | 福伊特探秘“职”旅，一触即发！

英特尔中国2021校园招聘全面启动

简单总结一下，一篇长卷类交互图文，通常由以下几部分动画构成

1、逐帧动画：人物行走的肢体动作，需要绘制出3-5帧，甚至更多帧数量素材

2、位移动画：控制人物前进

3、编组嵌套动画：人物前进的过程中，关联出现对话、按钮等其他内容

4、透明度动画：画面中加入弹窗提示，引导用户点击弹窗后弹出详细信息

5、循环动画：设置一些循环播放的动画元素，比如汽车前进、飞机升空、白云飘动、气球飘动、这些循环播放的动画效果可以使画面更加丰富

最后，「VMware招聘」文章中我们可以看到，作为招聘类的图文，介绍企业基本情况以及招聘要求是存在大量文字的，那么如何引导受众有步骤地接收企业输出的信息就必然需要设计信息输出路径。