
一代人有一代人的十字绣,当代染上拼豆的年轻人,用一粒粒小豆子,拼出像素世界,好像进入了复古游戏。
今天给大家整理了8篇拼豆、像素风、拼图类SVG交互图文,分别来自i排版编辑器、CROCS 卡骆驰、CASETiFY、戴可思母婴、福特中国、网信海淀、黛珂、阿维塔公众号,一起来看看这些交互图文案例是如何「拼」出心动玩法的。
在i排版交互图文案例库(网址:iPaiban.com/idea)搜索「拼豆」等关键词还可查看更多相关案例。
*近期拼豆熨烫环节频发事故,大家玩拼豆一定认准正规产品,时刻注意安全。
01
i排版编辑器
《🦊 疯 狂 动 物 城.svg》
▲GIF演示
点此查看原文
「自动上移图片」模拟进入动物城,「连续点击」模拟控制主角奔跑加速追捕蛇,如果追捕失败还可以再次刷新图文进行游戏,巧借有趣的互动提高传播。
该交互需定制
定制联系二师兄微信(ID: playhudong004)。
02
CROCS 卡骆驰
《Crocs x 乐高® | 这次真的「拼」了》
▲GIF演示
点此查看原文
通过「滑动拼图切换后展开」的交互模拟拖动积木小人滑动展开,宣传CROCS和乐高联名的方形洞洞鞋造型的积木产品,同时宣传线下活动,插入「视频号」视频介绍巨型乐高积木洞洞鞋装置的形成故事,引导大家购买。
交互对应iPaiban Pro编辑器(SVG.iPaiban.com)组件/组合
组合:滑动拼图切换+展开
编号:11915(组合)
03
CASETiFY
《你醒啦,现在是2005年...》
▲GIF演示
点此查看原文
「嵌套展开」展示CASETiFY的手机壳、挂件等单品,「滑动」展示细节和玩法搭配,借此宣传产品个性化的特点。
交互对应iPaiban Pro编辑器(SVG.iPaiban.com)组件/组合
组合:点击展开(可嵌套展开,固宽)
编号:10875(组合)
组件:双层滑动-前景左滑(自动对齐)
编号:10270(组件)
组件:自动-轮播Banner(超链接)
编号:10209(组件)
04
戴可思母婴
《像素家族,喊你一起来拼豆》
▲GIF演示
点此查看原文
多个平级「点击展开」查看以拼豆图纸形式展示的戴可思好物,然后「滑动」展示产品特点和功效,借此宣传产品。
交互对应iPaiban Pro编辑器(SVG.iPaiban.com)组件/组合
组合:点击展开(宽屏)
编号:10307(组合)
组件:双层滑动-前景左滑
编号:10018(组件)
05
福特中国
《拼出你的心动玩法》
▲GIF演示
点此查看原文
「无限选择切换图片」通过选择不同的拼图碎片,切换展示福特智趣烈马的可适配的场景和功能,宣传福特汽车的功能多样性,吸引大家购入。
交互对应iPaiban Pro编辑器(SVG.iPaiban.com)组件/组合
组件:点击-无限选择切换图片(带返回)
编号:11161(组件)
06
网信海淀
《走进孩子们的像素世界,一起打“谣”怪~》
▲GIF演示
点此查看原文
「三层上滑」模拟小孩子的卡通形象走过不同的场景,其中穿插着「点击切换」的交互模拟对谣言进行粉碎解释,借此科普儿童健康知识。
交互对应iPaiban Pro编辑器(SVG.iPaiban.com)组件/组合
组合:三层上滑组合
编号:11761(组合)
组件:点击-悬浮弹窗(无限次弹出,相同关闭位置)
编号:11114(组件)
07
黛珂
《2026春夏潮流🧩护肤版拼豆来啦》
▲GIF演示
点此查看原文
黛珂用拼豆风的产品图片局部作为起始图,「点击图片后缩小」展示完整的产品图片,借此宣传黛珂产品。
交互对应iPaiban Pro编辑器(SVG.iPaiban.com)组件/组合
组件:点击-图片缩小(任意设置初始放大区域)
编号:11360(组件)
08
阿维塔
《「拼」个车搭子,出发!》
▲GIF演示
点此查看原文
「右划」模拟拼图拼出可爱的车搭子,介绍汽车声道环绕、座位按摩、超大空间的特点,宣传阿维塔汽车。
交互对应iPaiban Pro编辑器(SVG.iPaiban.com)组件/组合
组件:滑动-拼图切换
编号:11918(组件)
在i排版交互图文案例库(网址:iPaiban.com/idea)搜索「拼豆」等关键词还可查看更多相关案例。
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可注册,编辑器组件/组合现已全部支持免费试用了。
广盛网提示:文章来自网络,不代表本站观点。