2021年Top20品牌SVG交互排版图文案例盘点
从2017年i排版（http://x.iPaiban.com）在全国首次推出公众号图文的商业化SVG交互排版服务，已经累计服务超过800个头部品牌，4年多来SVG交互图文已经成为品牌大事件、重要节日必备形式，SVG交互文章的阅读量、互动量、转化率均有明显的提升，头部品牌公众号最近几年的SVG交互数量均有300%-500%的高速年增长。
每年年初，我们都会盘点一部分上一年的优秀案例出来。
刚过去的一年，又有哪些优秀的定制作品出现呢？
2021年SVG交互排版图文案例Top20盘点来了！
*按推送时间排序
*长按扫码查看相应案例
*「i排版」查看更多案例和教程，定制请咨询玉兔微信（ID：playhudong15）
1.平安人寿
交互效果：点击展开同时播放音频+图片自转
难度等级：★★★★☆
图片、声音和交互结合，模拟直播间场景，点击展开后继续引导用户进入真实直播间。同时利用图片自转效果发起互动活动，参与度非常高。
拓展案例：模拟手机操作+点击展开
2.度小满
交互效果：长按动画
难度等级：★★★★☆
元宵节通过引导用户长按图片“制作”元宵让用户感受到浓浓的节日氛围，最后送上品牌节日祝福。长按蓄力的玩法还适用于踩油门、放烟花等场景，配合一定的互动活动效果更佳。
3.雷克萨斯中国
交互效果：音频答题玩法
难度等级：★★★★☆
链接：《声控福利！ES 300h车内的这些声音你听到过吗？》
让用户听声音来答题，新鲜有趣。打开音频前还有一个点击关灯页面变暗的效果，能让用户更专心聆听音频内容，造足氛围。
拓展案例：
4.星巴克中国
交互效果：连续点击切换图片后伸缩展开
难度等级：★★★★☆
通过连续点击切换图片一步步向用户展示新店产品，最后一次点击图文伸缩展开，进行全面介绍，图文末放置新店超链接图片，点击无需确认即可跳转。
5.i排版
交互效果：贪吃蛇
难度等级：★★★★★
图文内就能玩贪吃蛇游戏，可选难度，方向键真实反馈，自动计算分数。将贪吃蛇或小球换成任意商品非常适合宣传新品，曾风靡一时。（目前平台已经禁止）
拓展案例：
6.高瓴时间
交互效果：点击展开+图片自动显现
难度等级：★★★★☆
打开该图文的第一时间就通过画面的逐步自动显现吸引用户视线跟随阅读。在整个过程中，用户需要进行两次交互，开头点击展开和结尾点击显现，给予了一定的参与感。
7.BOE招聘
交互效果：图文自动展开+点击展开+图片浮动
难度等级：★★★★☆
链接：《Hi YOU | 京东方2022全球校园招聘正式启动》
打开图文，开头华丽顺畅的动画第一时间就抓住用户眼球，让用户对展开后的内容充满兴趣。展开后还有展开以及部分浮动元素，信息很多却不显冗长。
8.QQ星
交互效果：点击选择移动元素
难度等级：★★★★☆
点击不同的移动元素，出现对应题目让用户作答，作答成功出现对应产品。简单的互动让人对产品印象深刻，甚至有了购买冲动。
9.SandroParis
交互效果：娃娃机
难度等级：★★★★☆
经典的娃娃机玩法，游戏结果具有一定的随机性，给用户很强的参与感。还能配合做福利活动，增加图文互动率。
10.MichaelKors
交互效果：游戏挑战+密码展开
难度等级：★★★★★
链接：《绝对机密》
想要查看“机密文件”，需要挑战4个小游戏获取密码，趣味十足，具有很强的参与性。
11.360安全卫士服务号
交互效果：复杂轨迹移动
难度等级：★★★★★
多关卡游戏通过复杂轨迹移动串联在一起，游戏过程既让用户了解了程序员生活又植入品牌产品，最后送上祝福，一举多得。
12.腾讯医典
交互效果：平级展开
难度等级：★★★★☆
科普不一定就是枯燥的。这篇图文中写实的场景画面配合多个展开和点击显现效果，让科普有力又有趣。
13.小米公司
交互效果：多点弹窗
难度等级：★★★★☆
可以重复点击的弹窗效果，并在其中埋有彩蛋。最后一次点击引出主要信息，达到宣传的目的。
14.雀巢咖啡中国
交互效果：可收回点击展开+可返回点击切换图片
难度等级：★★★★★
可收回点击展开+可返回点击切换图片，展开前是一幅完整画面，一屏便隐藏了9个故事。
15..MAJE官方
交互效果：点击随机播GIF
难度等级：★★★★☆
链接：《M bag五周年福利大放送 | Ready？GO！》
俄罗斯方块的游戏过程是GIF，但不同用户点击同一位置会随机看到不同的GIF，GIF结束出现对应的不同产品，引导用户购买。
16.爱范儿
交互效果：点击弹出图片+图文展开
难度等级：★★★★★
链接：《放松，换个角度试试》
图文开头动感的画面第一时间抓住用户眼球，然后通过多个点击弹出图片展示用户痛点，多层嵌套展开展现产品优势，让人轻松get。
17.央视新闻
交互效果：点击展开+自动轮播banner
难度等级：★★★★☆
新闻日历也可以动态展现。长长的日历隐藏在展开之中，不给用户阅读压力。每一个重要节日都通过自动轮播的效果展示对应画面，让节日更具象。
18. 民生信用卡
交互效果：SVG轨迹移动
难度等级：★★★★☆
本文通过轨迹移动串联起各种优惠活动，同时画面与新年主题结合紧密，简单干脆又不失趣味。
19.GE中国
交互效果：点击打印同时图文展开+点击弹窗
难度等级：★★★★☆
点击打印一张图片，图文展开后点击不同胶片显现对应事件弹窗，互动中透露着情怀。
20.李宁
交互效果：放映机
难度等级：★★★★☆
链接：《携带所有美好，出发！》
放映机效果在本文文末，看着一个个温情故事像放电影一样慢慢在眼前滑过，很有仪式感。放映结束后出现互动话题，效果拉满。
附：
SVG交互排版认准 iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。
「i排版」查看更多案例和教程，定制请咨询玉兔微信（ID：playhudong15）。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）