就像在看3D弧面屏,Levis这种超具空间感的排版怎么做?

品牌时光机

发布于:2026-09-03

摘要:

来看来自Levis官方账号推文中的一个图片轮播效果:


 



*素材来自Levis官方账号丹宁蓝 + _____ = 夏日多巴胺

组合:组件效果叠加(两个)

编号:11737(组件)

组件:自动-轮播Banner

编号:10207(组件)

组件:自动-轮播Banner(小程序)

编号:10210(组件)

图片从右向左轮播,却在轮播过程中呈现出弧形轨迹,人物部分甚至破屏而出,制造出类似3D弧面屏的视觉冲击。轮播过程中,画面仿佛具有了纵深,让人忍不住来回翻看。


这种「弧形空间」效果是怎么实现的?难道用了什么复杂的SVG动效?


其实并没有。拆解后你会发现,它的实现方式比想象中简单得多——核心不是技术多复杂,而是设计分层与交互的巧妙组合。


图片


排版总共分为三层,顶层和底层图片同时对应轮播,中间图片静止不动。


在设计上,底层图片如下所示,完整的背景画面,包含人物、场景等全部视觉元素,作为轮播的主体:


图片


顶层图片如下所示,将底层图片的人物抠出,其余部分做了镂空,叠加后人物跳出画面,形成破屏效果:


图片


中间层图片如下所示,上下边缘带有弧形设计,中间部分镂空,叠加后制造出空间弧度感:


图片


这种设计+交互的思路,不仅视觉上足够吸睛,制作门槛也远比想象中低,非常值得收藏学习。


下面就带大家手把手复刻李维斯同款「弧形空间轮播」效果。


详细教程:


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

组合:组件效果叠加(两个)

编号:11737(组合)

组件:自动-轮播Banner

编号:10207(组件)

组件:自动-轮播Banner(小程序)

编号10210(组件)


第1步:选择组合


登录i排版SVG编辑器后,点击编辑器左侧「组合」按钮,在「特殊」分类中找到「组件效果叠加(两个)」组合,或者直接在搜索框中搜索组合编号11737,点击选择。


图片


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

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

图片

在组合编辑模式中,分为左右两个组件位,每个组件位中可以嵌套一个组件需要什么效果就在「组件」分类中找到相应的组件拖动到组件位中,然后上传需要的素材即可。如下所示:

图片

第3步:设置上方效果内容

左右两个组件位,左侧组件位用来设置下方效果,右侧组件位用来设置上方效果。注意不要弄反。

示例中的上方效果为可跳转小程序的图片轮播,所以我们在「组件」中找到「自动-轮播Banner(小程序)」组件(编号:10210),然后拖动组件到右侧组件位中。

图片

接着上传组件需要的图片素材,并填写小程序参数和调整动画。

图片

第4步:设置下方效果内容

示例中的下方效果为点击图片跳转视频号,所以我们在「组件」中找到「自动-轮播Banner」组件(编号:10207),然后拖动组件到左侧组件位中。

图片

接着上传组件需要的图片素材。该组件上传前景图和轮播图,这里的前景图就是整个效果的中间层图片。所有图片尺寸和上方效果的图片尺寸保持一致,动画参数也与上方效果一致。

图片

第5步:导入公众号后台

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

图片

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


图片


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


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




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