模拟陌生人社交软件交互，这个排版效果超适合七夕！

原创赞收藏评论

举报 2023-08-11

扫描,分享朋友圈

一张图片，点击左侧按钮向左飞出，点击右侧向右飞出。

这是很多陌生人社交软件上常见的一个交互效果，点击一侧是感兴趣，点击另一侧则是不感兴趣，以此来建立自己的社交圈。
没用过？不知道说的什么？没关系，点击下方图片体验下你就明白了。

*素材来自GRAFF格拉夫《妳的选择是……》

组合：连续点击-左右飞出切换图片+点击展开(带封面)

编号：11623（组合）

这就是今天给大家推荐的一个排版效果，超适合用作即将到来的七夕主题图文创意。

点击封面图片消失后，接着连续选择点击图片左半边或右半边，图片便会朝左侧或右侧飞出切换，直至点击最后一张图片后，图文展开出现更丰富的内容。

该效果对应 iPaiban Pro 黑科技编辑器的「连续点击-左右飞出切换图片+点击展开(带封面)」组合（编号11623）.

该展开组合除了可调整展开的速度，还支持调整图片飞出切换的速度。同样的效果，来试一下快速飞出的感觉：

*素材来自小米之家《免费抽机票盲盒！》

组合：连续点击-左右飞出切换图片+点击展开(带封面)

编号：11623（组合）

在创意方面，它当然不局限于七夕、情人节这样主题，像前面的选择礼物、定制假期都可以。
虽然最后展开的内容是固定的，但前面的选择切换交互大大提升了用户的参与感。更多玩法就由大家来创作啦！

以第1个案例为例，一起看下制作教程吧。

详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com

组合：连续点击-左右飞出切换图片+点击展开(带封面)

编号：11623（组合）

第1步：选择组合

第2步：进入组合编辑模式

点击「编辑组合」，进入组合编辑模式。

在组合编辑模式中，分为展开前和展开后两块设置区域。展开前上传左右飞出切换的图片素材，展开后可以任意嵌套各种效果。

第3步：设置「展开前」内容

①点击「展开前」区域，在右侧分别上传封面图、底图和飞出切换图。这三部分所有图片尺寸需保持一致。

②双击编辑区，调整点击展开的区触发区域。

点击封面图消失，以及点击图片左右飞出的触发区不支持调整，前者触发区为整张图片，后者每张图片的触发区都是左右两边（点击左半边向左飞出，点击右半边向右飞出）。

第4步：设置「展开后」内容

「展开后」的内容支持嵌套各种组件，需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。
添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作：

第5步：设置参数

点击右侧红色小三角，可以设置图片左右飞出的动画时长和展开时长。

另外如果预览效果发现内容没有完全展开或者展开过长，可以通过「加减展开高度（px）」进行调整，输入负数为减小展开高度。

第6步：导入公众号后台

内容编辑完毕后，点击左上角「保存并退出」逐步退出组合编辑模式回到编辑器主页面。

继续点击最右侧「预览草稿」，效果满意后接着点击「同步至微信后台」就可以了。

使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
如需局部导入可参考：《iPaiban Pro小助手安装和使用教程》

制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可注册，编辑器1500+组件/组合现已全部支持免费试用了。

新用户在「新手礼包」可领取3天企业标准版会员免费商用，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。