SVG微信交互图文｜如何在推送中纵想丝滑般的阅读感

如何让用户保持持续注意力接纳内容信息，是微信图文里一直关注的问题。近期「小编备用」为微信派开发了一篇具有流畅阅读体验的推送交互图文《2021全球追光！一起来看新年的第一个日出》，现在为大家分享这篇推送技术逻辑。若想体验一下丝滑版的图文阅读体验，可以看看这篇推送。

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

在这篇图文推送中将前景与背景按照一定方式进行融合，利用的前景图悬浮、背景图纵向运动的技术逻辑，营造出界面里惊艳的视觉效果。在这里最关键在于前景与背景的融合关系，通常情况下，两个图层之间的组合运动都是100%遮罩效果，即两个并列section盒子里要执行某些交互触发下个盒子的信息，而最开始的盒子为了输出更多信息主动让位界面或者用户会被延展出的信息区域吸引进而忽略。但在该篇推文里中利用PNG图片的透明属性，设置前景悬浮效果，并融合背景图运动变化呈现不同以往的信息传递路径。同时信息呈现在一个界面里，不仅提供了高效的信息输出空间，而且帮助文章保持一致氛围和流畅的阅读体验。

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

无论技术还是形式，最终还是服务于内容。通过一图层悬浮另一图层纵向变化的组合，近期别克推送中也使用到了，以不一样的形式将该类技术逻辑展现出来。不妨再一起体验下。

别克《致永不停止的英雄跑者》

区别于上一篇图文形式，别克的推送里是保持背景图层的不变，通过前景PNG图片的向下展开的运动效果，引导用户的阅读注意力。在这里前景图层的元素形成了交互界面里与用户沟通的指示性符号，完美充当了「意符」的概念，用户无需明显提示跟随图文高度展开时自动跟随元素向下移动，进一步提高了整篇推送的阅读完整率，使整篇文章阅读体验非常流畅，顺其自然。