SVG技术是如何与受众进行互动达到内容主题输出的目的?

今天想要跟大家分享的是11月份微信公众号「红南京」发布的一篇题目为《6张图,戳破成年人的“隐藏真相”》的推文。

传送链接:

6张图,戳破成年人的“隐藏真相”

接下来给大家简单分析一下在这篇推送中用到的SVG技术是如何与受众进行互动,从而达到内容主题输出的目的。

可以看到,这篇推送点击进去是自动收缩展开的两个动画,这两个动画迅速吸引受众的眼球,接着「点击」两字做左右抖动效果,与受众进行第一次互动,自然而然地引导受众进行点击进入下一步「解读真相」的内容展示。而在这一个部分加入点击展开隐藏内容的交互效果,和主题「隐藏真相」巧妙进行呼应。最后使用逐段展开的效果展开一张长图,长图里面包含6个场景,在每个场景中加入点击切换图片的效果,从而揭示主题:成年人充满“隐藏真相”的场景事实,引起受众强烈的共鸣。在推文的高潮处嵌入陈老师绘声绘色的导读视频,使得在南京召开的生态大会主题这一基本信息有效植入受众的脑海里。

分析一下这其中运用到的比较巧妙的SVG小技术:「点击」两字的左右抖动效果其实是我司结合「拍一拍」热点对技术逻辑的迭代升级,在这一逻辑框架上结合品牌方推出连续点击、图文二级展开的效果。

案例传送链接:

能量觉醒,追番更带敢

二级展开效果其实和「拍一拍」逻辑相仿,都是通过多个高度拉伸模块叠加实现。可以在一级内容展开后,二级内容继续嵌入多组展开效果。

二级展开效果的应用场景有:

线性结构—内容分段展示:时间线(点击节点A—展开对应内容以及节点B;点击节点B······);

嵌套结构—内容递进展示:俄罗斯套娃、礼盒套礼盒

所以总的来说,有效利用SVG技术可以为品牌锦上添花,接下来也可以期待我司给品牌方交付更多有创意的交互图文。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容