公众号沉浸式阅读排版怎么做?

这样的效果利用SVG组件也能复刻,它主要利用了多次点击换图展开SVG+点击换图SVG相结合完成了这一篇的交互效果。虽然都是我们常见的SVG,但这篇文章的创意却是值得我们好好学习的地方。


公众号沉浸式阅读效果展示(svg效果)





gif图展示

《2030雀巢有个大大大计划》

点击绿色文字跳转阅读


01
创意分析

本篇文章围绕再生农业计划展开,分别讲解了雀巢在再生农业方面的实施情况,从农林业、土地恢复、绿色边缘等角度具体叙述。整体设计以扁平画风格为主,通过横屏排版的方式来展示文章的主要内容,让原本看似枯燥的内容以这种动画的形式展示,增强了文章的可读性,让用户能保持耐心继续阅读。


02
SVG分析


在这篇文章的排版设计上看,文章整体设计精致,可能很多人会觉得只有靠定制才能实现,其实这篇文章利用SVG组件也能复刻,它主要利用了多次点击换图展开SVG+点击换图SVG相结合完成了这一篇的交互效果。虽然都是我们常见的SVG,但这篇文章的创意却是值得我们好好学习的地方。


大家通常在文章中对于点击换图SVG的使用都是比较分散的,只是作为文章的一个版块,与其他内容的衔接性不强,而这篇文章中,却将简单的点击换图SVG融入到横版的长图设计中,并与多次点击换图展开SVG结合,形成完整的推文效果,带着用户沉浸式的浏览阅读。所以我们在以后的创意中也要养成整体思维。


03
使用讲解


在135编辑器首页,选择左侧菜单栏【SVG编辑器】进入。



进入网页后,选择【互动效果】—素材中找到多次点击换图展开SVG,ID:112,点击换图SVG,ID:4,详细制作教程如下:


多次点击换图展开教程:点击查看


点击换图SVG使用教程:点击查看






文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
分享到