《财富》500强的品牌是如何制作交互图文的?

原创 收藏 评论
举报 2022-08-17

SVG交互图文到底都有什么效果?

SVG交互图文的设计可以是什么风格?

通过SVG交互图文又能实现怎样的创意?

……

看一看大公司的案例或许你能得到答案。

7月12日,《财富》杂志推出了2022年中国500强榜单(详情见文末「阅读原文」),其中超过100家与i排版有过SVG交互图文的合作。

这里给大家整理了其中15个大公司旗下品牌的SVG交互图文,有的交互比较新颖,有的设计非常突出,有的创意让人让人眼前一亮,看完总会有些收获。

简单的在本文就能直接查看,一些复杂的则需要跳转原文体验哦。

1

平安人寿

1.gif

▲GIF演示

点此查看原文

点击播放音频同时图文展开的交互,加上模仿直播间的设计,引导大家进入真实的直播间。用图片自转的效果发起福利活动,有效提高了互动率。

该效果需定制。

2

腾讯

1660635309735.gif

点此查看原文面对一个个死亡现场,腾讯医典用多个「点击切换图片」和「点击切换图片后展开」的交互效果,引导用户探索破解死亡原因,很是具有吸引力,同时为大家普及了相关医疗知识。

该交互对应编辑器模板:组合:点击切换图片+展开(有触发区) 编号:10057(组合)

3联想

2.gif

▲GIF演示点此查看原文

点击按钮,一根流动的细线向前延伸,细线经过之处画面浮现,引导用户观看,巧妙串联起20年的大事记。

该效果需定制。

4

美的

1660635369938.gif

点此查看原文

美的用趣味漫画搭配「点击弹窗」和「点击切换图片后展开」的交互对比了三种洗衣机清洗方法的利弊,有效宣传了自己的深度清洗服务。

该交互对应编辑器模板:

组件:点击-悬浮弹窗(无限次弹出,相同关闭位置) 编号:11114(组件)

5

小米

1660714588427.gif

▲GIF演示点此查看原文

本文使用了常见的「点击伸缩式展开」交互,点击展开后独特大气的画风很容易抓住用户的眼球,图文长但不枯燥,文案和画面让用户深深感动。

该交互对应编辑器模板:

组合:点击伸缩式展开(无抖动) 编号:11224(组合)

6

京东方BOE

1660714638401.gif

点此查看原文

打开图文加载完毕后,动画自动播放,停留至最后一帧画面图文展开。展开后的内容是此次招聘的详细介绍,包括宣传视频、事业群介绍等信息,部分文字和人物形象加入了动态效果,其中事业群的介绍使用了「点击展开,点击收回」的交互,避免内容显得太过冗长。

该效果需定制。

7

格力

1660635470122.gif

点此查看原文

把一年分为春、夏、秋、冬四季,每一个季节对应一个「点击切换图片后展开」的效果,阐述成就又不失温情。

该交互对应编辑器模板:

组合:点击切换图片+展开(有触发区)

编号:10057(组合)

8

滴滴

1660715555843.gif

点此查看原文

整体来看也是一个「点击伸缩式展开」的交互效果,但配合魔法棒的创意让这个效果更显合理,文章主题与交互效果结合得非常合适。

该效果需定制。

9

民生信用卡

640 (5).gif

点此查看原文

音频铺垫氛围,一幅长卷,十大名画,点击解锁名画主题信用卡同时出现办卡通道,既展示了信用卡设计之美,又传达了设计灵感来源,对用户具有更强的办卡吸引力。

该效果需定制。

10

长城汽车

640 (3).gif

点此查看原文

输入密码解锁图文,长城汽车用交互在520当天展示了自己的独特浪漫。

该交互对应编辑器模板:

组合:解锁展开(可设置点击动画&触发区域)

编号:10473(组合)

11

伊利

1660716655627.gif

点此查看原文

通过层层展开的交互一步步揭晓数字藏品,能引起用户好奇心,第一次展开同时播放音频具有渲染氛围的作用。

该效果需定制。

12

贝壳找房

640 (3).gif

点此查看原文

展开中嵌套3个点击播放音频同时展开的效果,音频具有更强的感染力,可以更好地吸引用户点击阅读故事全文。

该效果需定制。

13

云南白药

1660635878969.gif

点此查看原文

开头通过连续点击切换图片的效果一步步引导用户进入故事之中,接着图文展开“进入游戏”,并在“游戏”中植入自己的产品,很是有趣。像素风的设计也非常可爱。

该交互对应编辑器模板:

组合:连续点击切换图片+消失展开(有触发区)

编号:10469(组合)

14

蔚来

1660635902379.gif

点此查看原文

本文用一个情景式选择题开篇,错误选项使用了「点击展开,点击收回」的交互,正确选项使用了「层层展开」的交互,将知识点一点一点传达给用户,很是优雅。

该交互对应编辑器模板:

组件:点击展开,点击收回(无限循环)

编号:10237(组件)

组件:层层展开

编号:10410(组件)

15

长电科技

1660635922208.gif

点此查看原文

年度报告不再是长图文,长电科技将长图切分为多个短图,用「点击飘落切换图片」的方式让用户一页一页翻阅查看,科技感满满。

详细的2022年《财富》中国500强排行榜单大家可以点击文末「阅读原文」查看,如果你的公司也在榜单之中,可以备注「500强」添加下方微信,免费领取品牌时光机SVG案例库一年的会员哦。

微信截图_20220817141538.png

▲长按扫码识别

目前案例库总案例数已达60000+,其中7800+案例支持一键还原,制作同款效果非常方便。

制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:x.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可开始注册并使用。


本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)