被夸「排版一百分」,Apple这种竖向叠加展开怎么做?

i排版编辑器

发布于:2026-06-01

摘要:

Apple公众号的排版,从不为了炫技而炫技。


它的排版首先服务于主题与内容。


在这篇《这几张交通卡的新卡面,地球都💚了。》环保主题的文章中,Apple用了一种竖向叠加展开的效果,用户在留言区直夸「排版一百分」。



点击试试:


 



*素材来自Apple这几张交通卡的新卡面,地球都💚了。

组件:点击-竖向叠加展开

编号:12157(组件)

也可以点击展开时不回弹:


 

                                        不弹                                        
                                        不弹                                        
                                        不弹                                        
                                        不弹                                        
                                        不弹                                        


*素材来自Apple这几张交通卡的新卡面,地球都💚了。

组件:点击-竖向叠加展开

编号:12157(组件)

推荐大家在即将到来的世界环境日推文中用起来。另外像平级内容比较多的场景都可以用,比如招聘、多个商品介绍等。


简单来看,这不就是多个点击展开效果平铺在一起嘛。其实不止,这平铺的多个展开之间,还有一定的叠加。


类似的效果之前给大家出过排版教程:重叠叠叠叠叠叠叠叠叠叠叠展开


如果和苹果一样,展开的内容都是纯图片,今天教大家一种更为简单的排版实现方式。


详细教程:


工具:i排版SVG编辑器,网址:SVG.iPaiban.com

组件:点击-竖向叠加展开

编号:12157(组件)


第1步:选择组件


登录i排版SVG辑器后,点击编辑器右侧「组件」按钮,在「点击」分类中找到「点击-竖向叠加展开」组件,或者直接搜索组件编号12157,点击选择。



第2步:上传图片素材


点击右侧两个「+」号,分别上传点击消失图和展开图。所有图片宽度保持一致,消失图和展开图的数量相同。


其中点击消失图的高度用来确定展开前的高度。展开图为完整的展开画面。



Apple的效果展开前没有任何点击提示,直接上传的纯透明图。


第3步:调整动画效果


选择是否回弹,设置回弹程度,调整展开时间与点击消失时间。



第4步:设置全局背景(可不设置)


如果展开图背景透明,为了保证点击展开后不露出文章的白底,可在文章开头设置一个全局背景,上传需要的背景图片。



第5步:导入公众号后台


点击页面最右侧「预览草稿」可随时预览效果,效果满意后点击同步至微信后台同步到自己的公众号就可以了。


使用同步功能不用频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码预览在公众号的效果。


如需局部导入可参《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。




制作SVG交互图文认准i排版SVG编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端谷歌浏览器打开,即可注册,编辑器所有组件/组合现已全部支持免费试用了。

新用户在「新手礼包」可领取3天企业标准版会员免费商用,以及22个常用必备组件的大礼包(1年)。随礼包附赠千元优惠券,每单最高立降500元。 

图片

● SVG交互排版👇🏻

 





iPaiban 团队可提供运营服务、视频制作、创意策划、多种风格设计、SVG交互开发等服务,如需定制,请添加玉兔微信(ID:playhudong15)沟通咨询。

 


图片

图片

                            
图片