把100家门店装进一屏！这个排版简直是门店展示的阅读压力救星

如何用一个简单的排版，来展示成百上千家门店名称？

沪上阿姨的这个双层前景上滑的效果，就将100家的主题店用前景上滑的方式，在视觉上大幅度压缩了阅读的压力，又简单明了地告知了大家这100家主要分布在哪些城市、有几家店。

更为重要的是，相比于其他的双层滑动，这个效果还可以设置滑动图在背景图的任意一块区域进行上滑，能做更多创意的设计。

我们先来看看效果：

 

 

                                

                                

                                

 

*素材来自沪上阿姨沪上阿姨×莫奈｜印象春日 解锁全新周边

组件：双层滑动-前景上滑（可调整大小及位置）

编号：10165（组件）

这种双层前景上滑，不仅在门店展示上很有效，还能将略显枯燥的活动条款进一步包装，让用户在一点点滑动的过程中，减少阅读的压力，从而有效提高用户的触达率。

现在，我们就用沪上阿姨的案例来给大家看下排版教程。

详细教程：

工具：i排版SVG编辑器，网址：SVG.iPaiban.com

组件：双层滑动-前景上滑（可调整大小及位置）

编号：10165（组件）

第1步：选择组件

登录i排版SVG辑器后，点击编辑器左侧「组件」按钮，在「滑动」分类中找到「双层前景」，或者在「组件」中直接搜索编号10165 ，点击选择。

第2步：上传底图和滑动图片

点击「换图」按钮上传底图，点击「+」号上传滑动图，滑动图只需宽度一致。

双击图片设置滑动区域，调整红色区域框选至滑动内容区域。注意红色区域不要完全贴住图片边缘。

第3步：导入公众号后台

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

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

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

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

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

● SVG交互排版👇🏻

 

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