《财富》500强的品牌是如何制作交互图文的？
SVG交互图文到底都有什么效果？
SVG交互图文的设计可以是什么风格？
通过SVG交互图文又能实现怎样的创意？
……
看一看大公司的案例或许你能得到答案。
7月12日，《财富》杂志推出了2022年中国500强榜单（详情见文末「阅读原文」），其中超过100家与i排版有过SVG交互图文的合作。
这里给大家整理了其中15个大公司旗下品牌的SVG交互图文，有的交互比较新颖，有的设计非常突出，有的创意让人让人眼前一亮，看完总会有些收获。
简单的在本文就能直接查看，一些复杂的则需要跳转原文体验哦。
1
平安人寿
▲GIF演示
点此查看原文
点击播放音频同时图文展开的交互，加上模仿直播间的设计，引导大家进入真实的直播间。用图片自转的效果发起福利活动，有效提高了互动率。
该效果需定制。
2
腾讯
点此查看原文
面对一个个死亡现场，腾讯医典用多个「点击切换图片」和「点击切换图片后展开」的交互效果，引导用户探索破解死亡原因，很是具有吸引力，同时为大家普及了相关医疗知识。
该交互对应编辑器模板：
组合：点击切换图片+展开(有触发区)
编号：10057（组合）
3
联想
▲GIF演示点此查看原文
点击按钮，一根流动的细线向前延伸，细线经过之处画面浮现，引导用户观看，巧妙串联起20年的大事记。
该效果需定制。
4
美的
点此查看原文
美的用趣味漫画搭配「点击弹窗」和「点击切换图片后展开」的交互对比了三种洗衣机清洗方法的利弊，有效宣传了自己的深度清洗服务。
该交互对应编辑器模板：
组件：点击-悬浮弹窗(无限次弹出,相同关闭位置)
编号：11114（组件）
5
小米
▲GIF演示点此查看原文
本文使用了常见的「点击伸缩式展开」交互，点击展开后独特大气的画风很容易抓住用户的眼球，图文长但不枯燥，文案和画面让用户深深感动。
该交互对应编辑器模板：
组合：点击伸缩式展开(无抖动)
编号：11224（组合）
6
京东方BOE
▲GIF演示点此查看原文
打开图文加载完毕后，动画自动播放，停留至最后一帧画面图文展开。展开后的内容是此次招聘的详细介绍，包括宣传视频、事业群介绍等信息，部分文字和人物形象加入了动态效果，其中事业群的介绍使用了「点击展开，点击收回」的交互，避免内容显得太过冗长。
该效果需定制。
7
格力
点此查看原文
把一年分为春、夏、秋、冬四季，每一个季节对应一个「点击切换图片后展开」的效果，阐述成就又不失温情。
该交互对应编辑器模板：
组合：点击切换图片+展开(有触发区)
编号：10057（组合）
8
滴滴
▲GIF演示点此查看原文
整体来看也是一个「点击伸缩式展开」的交互效果，但配合魔法棒的创意让这个效果更显合理，文章主题与交互效果结合得非常合适。
该效果需定制。
9
民生信用卡
▲GIF演示点此查看原文
音频铺垫氛围，一幅长卷，十大名画，点击解锁名画主题信用卡同时出现办卡通道，既展示了信用卡设计之美，又传达了设计灵感来源，对用户具有更强的办卡吸引力。
该效果需定制。
10
长城汽车
▲GIF演示
点此查看原文
输入密码解锁图文，长城汽车用交互在520当天展示了自己的独特浪漫。
该交互对应编辑器模板：
组合：解锁展开(可设置点击动画&触发区域)
编号：10473（组合）
11
伊利
▲GIF演示
点此查看原文
通过层层展开的交互一步步揭晓数字藏品，能引起用户好奇心，第一次展开同时播放音频具有渲染氛围的作用。
该效果需定制。
12
贝壳找房
▲GIF演示点此查看原文
展开中嵌套3个点击播放音频同时展开的效果，音频具有更强的感染力，可以更好地吸引用户点击阅读故事全文。
该效果需定制。
13
云南白药
▲GIF演示点此查看原文
开头通过连续点击切换图片的效果一步步引导用户进入故事之中，接着图文展开“进入游戏”，并在“游戏”中植入自己的产品，很是有趣。像素风的设计也非常可爱。
该交互对应编辑器模板：
组合：连续点击切换图片+消失展开(有触发区)
编号：10469（组合）
14
蔚来
点此查看原文
本文用一个情景式选择题开篇，错误选项使用了「点击展开，点击收回」的交互，正确选项使用了「层层展开」的交互，将知识点一点一点传达给用户，很是优雅。
该交互对应编辑器模板：
组件：点击展开,点击收回(无限循环)
编号：10237（组件）
组件：层层展开
编号：10410（组件）
15
长电科技
点此查看原文
年度报告不再是长图文，长电科技将长图切分为多个短图，用「点击飘落切换图片」的方式让用户一页一页翻阅查看，科技感满满。
详细的2022年《财富》中国500强排行榜单大家可以点击文末「阅读原文」查看，如果你的公司也在榜单之中，可以备注「500强」添加下方微信，免费领取品牌时光机SVG案例库一年的会员哦。
▲长按扫码识别
目前案例库总案例数已达60000+，其中7800+案例支持一键还原，制作同款效果非常方便。
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：http://x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。