《财富》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
点此查看原文
打开图文加载完毕后,动画自动播放,停留至最后一帧画面图文展开。展开后的内容是此次招聘的详细介绍,包括宣传视频、事业群介绍等信息,部分文字和人物形象加入了动态效果,其中事业群的介绍使用了「点击展开,点击收回」的交互,避免内容显得太过冗长。
该效果需定制。
7
格力
点此查看原文
把一年分为春、夏、秋、冬四季,每一个季节对应一个「点击切换图片后展开」的效果,阐述成就又不失温情。
该交互对应编辑器模板:
组合:点击切换图片+展开(有触发区)
编号:10057(组合)
8
滴滴
点此查看原文
整体来看也是一个「点击伸缩式展开」的交互效果,但配合魔法棒的创意让这个效果更显合理,文章主题与交互效果结合得非常合适。
该效果需定制。
9
民生信用卡
点此查看原文
音频铺垫氛围,一幅长卷,十大名画,点击解锁名画主题信用卡同时出现办卡通道,既展示了信用卡设计之美,又传达了设计灵感来源,对用户具有更强的办卡吸引力。
该效果需定制。
10
长城汽车
点此查看原文
输入密码解锁图文,长城汽车用交互在520当天展示了自己的独特浪漫。
该交互对应编辑器模板:
组合:解锁展开(可设置点击动画&触发区域)
编号:10473(组合)
11
伊利
点此查看原文
通过层层展开的交互一步步揭晓数字藏品,能引起用户好奇心,第一次展开同时播放音频具有渲染氛围的作用。
该效果需定制。
12
贝壳找房
点此查看原文
展开中嵌套3个点击播放音频同时展开的效果,音频具有更强的感染力,可以更好地吸引用户点击阅读故事全文。
该效果需定制。
13
云南白药
点此查看原文
开头通过连续点击切换图片的效果一步步引导用户进入故事之中,接着图文展开“进入游戏”,并在“游戏”中植入自己的产品,很是有趣。像素风的设计也非常可爱。
该交互对应编辑器模板:
组合:连续点击切换图片+消失展开(有触发区)
编号:10469(组合)
14
蔚来
点此查看原文
本文用一个情景式选择题开篇,错误选项使用了「点击展开,点击收回」的交互,正确选项使用了「层层展开」的交互,将知识点一点一点传达给用户,很是优雅。
该交互对应编辑器模板:
组件:点击展开,点击收回(无限循环)
编号:10237(组件)
组件:层层展开
编号:10410(组件)
15
长电科技
点此查看原文
年度报告不再是长图文,长电科技将长图切分为多个短图,用「点击飘落切换图片」的方式让用户一页一页翻阅查看,科技感满满。
详细的2022年《财富》中国500强排行榜单大家可以点击文末「阅读原文」查看,如果你的公司也在榜单之中,可以备注「500强」添加下方微信,免费领取品牌时光机SVG案例库一年的会员哦。
▲长按扫码识别
目前案例库总案例数已达60000+,其中7800+案例支持一键还原,制作同款效果非常方便。
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:x.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可开始注册并使用。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本文禁止转载,侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。
评论
评论
推荐评论
暂无评论哦,快来评论一下吧!
全部评论(0条)