SVG互动创意:无限次点击展开回缩效果教程

掌握新媒体运营的创新利器!本文深入解析135编辑器的SVG无限次点击展开回缩功能,通过CC卡美珠宝的《许个愿吧》案例,展示如何通过互动式SVG效果提升用户参与度和推文留存率。学习如何操作这一动态效果,为你的内容营销注入活力。

大牌案例拆解


每天进步一点点


嗨喽,宝子们,好久不见,今天三儿将继续带着大家一起来学习今天的大牌案例拆解内容——无限次点击展开回缩。点击展开效果大家应该都不陌生了,但是在此基础上搭配无限次的点击查看机会,又会碰撞出怎样的火花呢?赶紧跟着三儿一起来看看吧!



1
写在前面




点击上方图片跳转阅读👆


本期为大家带来的优质案例是CC卡美珠宝品牌的推文内容《许个愿吧》,这篇文章是以新年愿望为主题,利用无限次点击展开点击回缩效果来介绍自己的珠宝产品。推文的首图是一张精心设计的珠宝产品展示图片。而具体的产品内容则隐匿在首图之下,需要用户通过点击之后才可了解,而每展开一个产品内容则对应一个新年愿望,比如醒狮的项链代表着一路发财,与推文主题相呼应。这样的设计在保证排版美观的同时又能与用户形成很好的互动,下面就具体展开讲解。





2
效果讲解




👆gif图效果展示


这篇文章中用到的效果为无限次点击展开点击回缩(变化首图)效果,ID:129。大家对点击展开的效果应该都不陌生,该文章中用到的svg,在点击展开的基础上添加了无限次展开回缩的效果,让用户能够与推文进行多次互动,提高推文的留存率。


此效果在节省排版空间的基础上,优化了排版布局。如果将单个珠宝产品信息海报图直观的展示在推文中,整体看上去就会比较平淡,且每个单独的产品海报衔接在一起,内容上显得很松散,不统一。但是将每个产品具体的信息隐匿在一张完整的海报之下,能够在不破坏整体推文美观度的情况下,尽可能展示更多的内容。比如在该篇文章中将每部分展开的珠宝产品内容对应一个新年愿望:笑看生活、一路发财等,且产品的寓意与新年愿望的文案是有关联的,整体设计巧妙。



此效果也增强了推文的互动性。点击展开的方式增加了产品内容的神秘感,激起用户的好奇心,让用户通过点击特定的按钮来查看具体内容,同时无限次点击展开回缩的效果,让用户可以多次点击,停留更多的时间和注意力进行阅读,一定程度上提高了文章的留存率。



3
操作步骤



01
打开svg编辑器


在编辑器首页的左侧菜单栏选择svg编辑器,进入到svg编辑器首页。



02
添加效果


在互动效果中输入ID号码:129,或者是关键词:“无限次点击展开”,将该效果放置在编辑页面中。



03
编辑效果


① 在这篇文章中看到的完整首屏海报图片其实是由多个无限次点击展开回缩效果拼接而成,通过将海报中的各个产品图片切割成几部分,再依次编辑每部分的内容而实现的。



② 这其中每一部分的无限次点击展开点击回缩(变化首图)又是由四个部分组成,展开前首图、点击变化后的图片、回缩图片、以及产品图片。



③ 添加好展开前首图、点击变化后的图片、回缩触发图后,再为首图添加控制的热区。



选中红色虚线区域进行拖拽即可为其添加控制热区的位置。


④ 编辑点击展开后的图片内容,需要在编辑区域选择【编辑展开内容】,进入页面之后选择无缝图组件。ID号为:136,添加在编辑页内。




需要注意的是在该效果中添加的所有图片的宽高需要保持一致


⑤ 在做好第一部分之后,依次在后面添加无限次点击展开回缩效果,将其组合在一起形成一张完整的海报。



⑥ 制做好之后,选择右上角的【导出】【同步】即可同步到微信后台。




4
三儿说


无限次点击展开回缩效果很适合放在展示内容较多且需要排版创意且精致的推文之中。当用惯了普通的点击展开效果,不妨可以考虑此款效果。像这篇案例文章一样在推文中放入多个无限次点击展开回缩效果,拼接成完整的推文内容,让推文整体呈现效果更饱满。除了用在产品介绍之中,像品牌活动展示、创意内容之中都可以使用该效果。


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

如果觉得还不错

记得点赞+在看

还有什么想看的内容

可以在下方评论区留言哦~




END




文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
分享到