层层递进的排版怎么做?连续放大消失加展开很解压!

品牌时光机

发布于:2026-07-31

摘要:

品牌联合、产品发布、倒计时预热……遇到这层层递进的叙事需求,排版往往陷入两难——内容太多怕冗长,内容太少怕单薄。


试试这个效果吧——连续点击-放大消失+展开,让用户一步一步跟着你的节奏走。


我们先来体验一下:


 

图片


*素材来自鲜丽知2025美妆趋势发布

组合:连续点击-放大消失+展开

编号:12160(组合)

用户每点击一次,当前图片逐渐放大并淡出消失,同时切换至下一张视觉图。连续点击多次后,最后自动展开完整内容。整个过程如同一场指尖上的揭幕仪式,用户每一次点击都是一次解锁。


每张图片点击后放大的位置不一定是在图片正中央,支持在任意位置设置。


比如沪上阿姨这个排版示例,第一张图片放大位置偏下,第二张图片放大位置偏上:


 

图片                                
                                
                                



*素材来自沪上阿姨沪上阿姨×人鱼陷落丨联名第一弹开启

组合:连续点击-放大消失+展开

编号:12160(组合)

现在,我们就用沪上阿姨的示例来给大家看下详细排版教程。



详细教程:


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

组合:连续点击-放大消失+展开

编号:12160(组合)


第1步:选择组合


登录i排版SVG辑器后,点击编辑器左侧「组合」按钮,直接在搜索框中搜索组合编号12160,点击选择。


图片


第2步:进入组合编辑模式


点击「编辑组合」,进入组合编辑模式。


图片


在组合编辑模式中,分为展开前展开后两块设置区域。


图片

第3步:设置「展开前」内容


①上传图片:点击「展开前」区域,在右侧上传放大图片。所有图片尺寸需保持一致。

图片


②调整放大的中心位置:双击「展开前」区域上传的图片,调出触发区域调整窗口,拖动红框调整触发区到合适位置。依次点击「下一张」调整每张图片的触发区。

图片

注意这里的触发区中心点为放大的中心位,并非点击触发区域,无论将红框调整在什么位置,点击整张图片都会触发。

③调整参数:根据需求调整图片的放大时长、放大倍数和图片背景消失时长。

图片


第4步:设置「展开后」内容


「展开后」的内容支持嵌套各种组件,需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中,然后上传需要的素材即可。


添加组件位-拖动组件到组件位中-上传图片,每需要一个样式就按照这3步操作:


图片


接着上传组件需要的图片素材。

第5步:设置展开时长

点击页面空白处,在最右侧调整「展开时长」。


如果预览效果发现内容没有完全展开或者展开过长,可以通过「加减展开高度」进行调整,输入负数减小展开高度。


图片


第6步:导入公众号后台


内容编辑完毕后,点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。


图片


继续点击最右侧「预览草稿」,效果满意后接着点击同步至微信后台就可以了。


图片


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


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




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

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