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