SVG微信交互图文｜一周案例汇总｜盘点圣诞节期间精彩的创意交互推文

上一周新媒体人可谓是忙得不可开交，不仅是年关将至，有关圣诞节热点的话题也接连不断。在此期间，我们看到了各大品牌方关于热点内容的精彩推送，今天，给大家整理出了上一周「小编备用」为各大品牌方提供的交互技术实现了哪些让人眼前一亮的交互推文。

一、技术求和效果

年末将至，各大app的用户年度数据开始刷屏社交媒体，尤其是支付年度账单每年都可以吸引很多网友转发。有趣的是，今年「小编备用」也提出了账单主题，不同以往这次构建有关2021年年度预支账单。在内容上围绕的是消费支付场景，针对明年预售或者最新的上市商品，为用户罗列出明年有可能出现的预支消费清单，最后求和商品总价，生成消费用户群体类别，下面不妨来看看推送效果。

小编备用《2021要赚够______元》

从推送里我们可以看出，设计上别出心栽模拟网购的消费场景，让用户从惯性行为习得交互，自主点击按钮将商品加入购物车内。推文末尾处的交互设置最让人眼前一亮，将所有商品价格求和，根据求和账单总额将消费群体标签化，视觉效果上生成纸质电子票据。这是由「小编备用」研制开发的技术，首次实现推送中数值累计求和效果。此类效果十分适合在账单类和答题积分的推送内，让用户的每次交互行为都有明显数据上的反馈，增加交互趣味性。

二、前景图悬浮效果

关于年末辞旧迎新话题也层出不穷，但是好看的当属「小编备用」微信派开发的推送这篇图文《2021全球追光！一起来看新年的第一个日出》。这篇推送技术逻辑，利用的前景图悬浮、背景图纵向运动，图文营造出界面里惊艳的视觉效果，实际上是运用PNG图片的透明属性，设置前景悬浮效果，并融合背景图运动变化呈现不同以往的信息传递路径。

微信派《2021全球追光！一起来看新年的第一个日出》

除此之外，与图文内容的巧妙结合，发挥了此技术逻辑的最大效能。背景呈现从星空到日出的变化过程，营造出星空流动以及人在追逐时天空相对运动的过程，完美契合文章的“追光”主旨，带给人视觉感官体验，并不断深化用户对于主题的认知。

三、逐级展开效果

一加科技《5，4，3，2，1》

展开效果在推文中十分常见，但是同样的技术逻辑在不同的内容里创造性使用中也会带来惊喜的效果。例如一加科技这篇推送里，配合对话的内容形式，「小编备用」创造性的运用高度展开装置设置出逐级向下展开的效果，模拟了弹窗里对话逐级出现的视觉。另外，图文里多次加入点击切换配合交互显示隐藏内容。文末加入穿透滑动，保证图文高效的信息输出，使得排版整洁节省更多空间。

四、高度展开

在上周的圣诞热点推文里，「小编备用」交付各大品牌方的技术中，最多的还是基于高度展开效果的案例。虽然此类效果早已司空见惯，但是配合内容依然有很多惊喜的表现。在以下几篇有趣推送中，演示的亮点不仅在高度展开里，开发者在文中联动运用多种交互组件，再次展示了交互图文不凡的魅力，演绎出更有趣味性的节日交互图文。

分期乐《[速领]你的圣诞礼包额度已升级》

一加科技《圣诞老人的手机怎么在这里？》

戴尔《我就直说了，我有圣诞礼物想送你》

奥迪中国招聘《叮！点击领取你的圣诞祝福！》

五、沉浸式互动

神州网信招聘《谁说圣诞老人的坐骑只有驯鹿》

该篇推送效果是SVG高级代码动画长卷类编组嵌套动画设计实现的沉浸式图文互动，使用逐帧动画+位移动画+编组嵌套动画+透明度动画+循环动画的技术逻辑。通过引导用户通过点击，控制个元素前进，前进过程中与长图中的其他元素产生互动触发嵌套层级的交互，这类沉浸式交互效大大提高图文的趣味性和阅读性。

六、音频交互

在推送中如果使用到音频播放器，需要通过点击播放的才能实现音乐播放，通常内容上需要设置高亮的视觉图标，引导用户进而实现交互效果。

为了实现音频与交互效果的联动，运用代码，在SVG画布中嵌套音频播放器，可以有效实现音频的触发按钮与其他交互效果同时被触发。如东风标致的推送中中，在触发音乐播放器的同时，实现唱片的滚动效果，将阅读与背景音乐相融合。同理在CINDYCHAO艺术珠宝推文中，触发了音乐播放器同时实现点击切换效果，营造了更浓重的节日氛围和流畅的交互体验。

东风标致《圣诞老人从不缺席》

CINDYCHAO艺术珠宝《美好圣诞进行时》

本周分享的精彩交互案例就到这儿啦，下周继续为大家分享前沿排版技术和交互创意精彩案例。