GIF图展示↑

点击跳转原文阅读

上面两篇推文都用到了模拟手机APP消息的SVG创意，两篇主题内容和设计风格不同，但最终呈现效果都非常不错。我们可以看到这两篇文章是由多个SVG交互效果构成。比如第一个案例中有音频海报、双层滑动等效果，第二个案例中用到了多次点击、图片弹窗等SVG。这些组件的使用，实现了1+1>2的叠加效果，不仅让内容展示形式更丰富，而且将内容呈现的更全面。

这种模拟手机消息推送的SVG形式可以说是百搭天花板，各行各业都可以采用这种创意来做推文，只要有一个主题，那么就可以结合各大APP的展示形式，利用SVG效果，通过放入音频、图片、视频，多角度来呈现内容。这样无论是在视觉效果还是在创意上都可以给用户眼前一亮的感觉。在用户注意力稀缺的当下，采用这种创意来提高推文与用户之间的互动性真的再合适不过了。

这两篇推文中用到的主要效果都是点击直接展开SVG，ID：57，它是控制APP消息展开的关键所在，在此基础上还分别嵌套了其他组件，这样才能构成一篇效果丰富的推文，关于推文中具体用到了哪些组件，三儿就来具体展开说说。

案例一中使用到的组件分别是无缝图，ID：1；点击直接展开，ID：57；音频海报-防误触，ID：43；双层左滑-前景不动背景滑动，ID：142；图片弹窗-自定义单个触发区，ID：54。

案例二中用到的组件分别是点击直接展开，ID：57；无缝图，ID：1；多次点击换图，ID：10；图片弹窗，ID：53；图片弹窗自定义多个触发区，ID：55。

从上述案例中三儿总结了针对一些APP消息展示形式，我们可以用到的SVG效果组件。

小红书消息：双层滑动、图片弹窗

微信消息：音频海报、多次点击换图、图片弹窗

抖音消息：普通上下滑动

咱们要做这款展示形式，需要用到多张图片。整体是由下面图中标注的六大部分组成。

第一部分和第六部分其实是一张图片，可以用到我们的无缝图组件，ID：1；第二、三、五部分使用到了点击直接展开自定义触发组件，ID：57，第四部分用到了图片弹窗组件，ID：54。如下图所示👇

在使用到点击直接展开的SVG组件中，我们还可以嵌套其他SVG组件进去，比如双层滑动、图片弹窗-自定义多个触发区、多次点击换图等。

在搭好的SVG组件框架下，我们就只需按照要求来上传图片，调整细节即可。