在这个数字化时代,微信图文中加SVG交互已经成了常态。而其中的点击播放GIF后展开效果,更是我们日常浏览中经常遇到的。
以往,我们看到的点击播放GIF后展开效果,首屏显示的图片往往必须与GIF播放内容比例一致,而且首屏几乎没有其他交互的可能性,排版效果就很受限。但你是否注意到,奥迪这篇图文中最新应用的这种效果——「点击切换GIF+消失展开」,让展开更灵活多变。
现在,首屏显示的图片可以与GIF的比例不一致,甚至还可以添加其他的交互效果。这种变化让排版更加灵活,不再受到比例的束缚。当然,这种变化也带来了一些新的挑战。比如,如何平衡首屏图片与GIF内容的关联性,如何让两者在视觉上更加和谐统一,这些都是设计师需要思考的问题。但正是这些挑战,也激发了设计师们不断探索和创新的动力。让我们以奥迪的图文为例,来学习一下这种「点击切换GIF+消失展开」交互图文的排版过程。
第1步:选择组合
登录 iPaiban Pro 编辑器后,点击编辑器右侧「组合」按钮,在「花样展开」-「切换图片+展开」分类中找到「点击切换GIF+消失展开」组合,或者直接在搜索框中搜索组合编号11775,点击选择。
第2步:进入组合编辑模式
点击「编辑组合」,进入组合编辑模式。
第3步:设置「展开前」内容
点击「展开前」区域,接着点击右侧两个「换图」按钮,分别上传单击前和单击后的图片。
注意单击前&后图的尺寸要求:每张静态图(PNG|JPEG)尺寸保持一致;动态图(GIF)比例与静态图保持一致。
第4步:设置「展开后」内容
「展开后」的内容支持嵌套各种组件,需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中,然后上传需要的素材即可。 添加组件位-拖动组件到组件位中-上传图片,每需要一个样式就按照这3步操作:
第5步:设置动画参数
点击右侧红色小三角符号,分别设置GIF动图播放时长、播放后消失动画时长、展开时长。 展开高度一般无需调整,但当大家在手机上预览时,如果发现展开后有多余的空白或者没有展现出全部内容,这时候可以通过「加减展开高度」使其恰好展开。
第6步:导入公众号后台
内容编辑完毕后,点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。
效果满意后点击「同步至微信后台」就可以了。
使用同步功能无需频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码查看。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
总的来说,点击切换GIF+消失展开效果是技术进步和设计创新的产物,它让我们看到了更多可能性,也让我们的视觉体验变得更加丰富多彩,推荐运营的小伙伴使用。
免责声明:市场有风险,选择需谨慎!此文仅供参考,不作买卖依据。
责任编辑:kj005
文章投诉热线:182 3641 3660 投诉邮箱:7983347 16@qq.com