SVG微信交互图文｜2021这些炫酷排版值得一看

又是一周汇总时刻，让我们一起看看2021年初，「小编备用」准备了哪些值得一看的交互图文呢？

1.模拟账单生成效果-点击加入购物车，生成相同账单

你的2021预言账单来了-梅赛德斯奔驰

梅赛德斯奔驰这篇推文是场景模拟账单效果的优化运用，同样设计别出心栽模拟网购的消费场景，画面色彩绚丽，看到时有眼前一亮的感觉，文中利用点击切换效果模拟网购下单加入购物车环节。推文末尾与「小编备用」账单生成不同的是，在交互上没用嵌套复杂的求和效果而是使用了高度展开模拟出票效果，主要是在主题上扣紧图文内容，人们在结账付款的压力被巧妙化解，宣传「0首付」梦想账单的主题。简单的交互效果，集合优秀的拟态消费场景设计，实现让用户更沉浸的阅读体验。

2. svg跑马灯动画

2021型走江湖指南-梅赛德斯奔驰

这篇推送看似简单，但是细节满分。在设计的细节上，滑动图片外围运用了全代码生成的一个跑马灯动画视效。原理是运用animate平移动画实现的文字循环播放效果，同时将文字精确定点外围使其悬浮在图片上，结合循环播放的平移动画就构成了一个细节满分的炫酷跑马灯啦。

3.多级展开

元旦刚过，就开始想着过年了-东风标致

多级展开效果在元旦汇总的文章中，也为大家介绍了不少有趣的案例。然而依旧乐此不疲列举展开的案例，为大家介绍多级展开更多高级有意思的玩法。比如说东风标致这篇图文里，利用与背景相同白底的GIF构成更贴近现实的设计感，以场景为主线人物故事贯穿全文，技术配合多级展开结合图文内容的延续，将人一个个主人公的故事内容变得更充实饱满，推动了故事发展也带出文章主旨，同时增加阅读趣味性。

4.高度展开+点击切换视频

在吗？听听立邦和马赛克乐队的新歌-立邦中国

同样是展开效果显示隐藏内容，立邦中国的推文里复杂的嵌套了其他交互组件，再次展示了交互设计的魅力。在展开内容后，嵌套了滑动切换的图层将信息尽可能缩减在同一空间，便利用户阅读。除此之外，视频封面遮罩的组件运用将图文设计和交互效果完美融合，给图文阅读又带来一分惊喜。

5.高级循环banner

请查收，与鹏友一起奔跑的2020！-小鹏汽车

在小鹏汽车推送里，结合里很多细节满分的交互效果，但最值得一提的还是文末的高级循环banner设计。在文末处集合2020年小鹏汽车成长高光时刻内容，构成2020小鹏汽车的里程碑banner设计。这样的设计实现由用户自主控制的，不限方向的轮播切换，且可以点击方向图标处或者底下小圆点都可以调转到对应链接，满足了展示多层内容的需求同时也提高了信息传播的效率。

6.连续点击切换位图

最后一个舱位，快！-一加科技

最后一个舱位，快！-一加科技

一加科技的图文里，主要使用的是连续点击切换效果，实现翻页式的阅读体验，减少排版设置的空间也为了用户更沉浸式的阅读体验。除此之外，在图文细枝末节处，都是运用了SVG代码控制的动画特效，比如切换图片出现的渐变放大、相机闪烁效果、座椅升起的渐变效果，看似GIF的动态实则运用了SVG代码技术实现的，有效带动了阅读的趣味性。

更多精彩内容敬请关注「小编备用」吧！