她她她她她她她她她她她她她她

小黄人科技

发布于:2026-03-05

摘要:

妇女节创意排版很多,有一个效果很火。


左滑看下:


 





*素材来自康明斯中国又酷又飒!点赞巾帼力量

组件:双层滑动-前景左滑(自动对齐)

编号:10270(组件)

这个排版其实交互很简单,就是常见的双层前景左滑,它受欢迎的地方在于创意。

以汉字「她」为载体,在设计上让多个女性形象与字体的一半融合,左滑可一一切换查看。

原文排版效果素材,一张背景图和多张前景滑动图就可以:


但我们可以再把这个效果稍微进阶一下,再来左滑试试:


 




*素材来自康明斯中国又酷又飒!点赞巾帼力量

组件:三层滑动-左滑(自动对齐)

编号:10739(组件)

进阶效果变为了三层式的滑动,更显高级。


整个排版效果共分为3层,中间层图片只有一张固定不动,图片中有个「她」字右半部分的镂空设计,而前景层和背景层各有7张且一一对应滑动,其中前景层图片也要部分透明,以便露出中间层和背景层。


前景和背景图片一上一下与中间层镂空设计的图片叠加在一起,便呈现了有趣的交互效果。


切图素材如下:



在「小黄人科技」服务号后台回复关键词【】可直接领取以上素材:


图片


有了合适的素材,排版就简单很多了,下面一起看下进阶后的三层左滑教程吧。



详细教程:


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

组件:三层滑动-左滑(自动对齐)

号:10739(组件)


第1步:选择组件


登录i排版SVG编辑器后,点击编辑器左侧「组件」按钮,在「滑动」分类中找到三层滑动-左滑(自动对齐)组件,或者直接在搜索框中搜索组件编号10739,点击选择。



第2步:上传图片


点击右侧「换图」按钮上传中间层图片,点击两个「+」号分别批量上传前景图和背景图。前景图和背景图在顺序上注意一一对应。所有图片尺寸需保持一致。



如果发现图片顺序不对,可上下拖动调整。



第3步:导入公众号后台


内容编辑完毕后,点击最右侧「预览草稿」可随时扫码预览效果,效果满意后点击同步至微信后台同步到自己的公众号就可以了。



使用同步功能可以不用频繁在编辑器和微信后台切换,同步成功后可以立即扫码预览二维码查看。


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




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

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

图片

● SVG交互排版👇🏻

 





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

 


图片

图片

                            
图片