Apple最新图文的参数对比排版，教程来啦！
在文章《想要对比展示？8种对比类排版效果来了！》中，给大家盘点整理过8个适合用作对比的创意排版效果。
在Apple的最新文章《1314，不如现在就 17 吧。》中，有个用来进行产品参数对比的效果也很是巧妙。
我们滑动下方内容的右半侧试一下：
*素材来自Apple《1314，不如现在就 17 吧。》
这种一半不动一半滑动的效果，非常适合一个对比多个的情况。
那么如何实现这种效果呢？
iPaiban Pro 编辑器强大的嵌套功能可以搞定。
前几天刚给大家在文章《“波司登的这种相册式轮播，怎么做啊？”》中讲了「多列布局」组合的巧妙玩法，这次还是要用到「多列布局」组合。
我们将内容平均分为左右两半，左侧为单独的一张无缝图，右侧为一个左右滑动效果。那么使用一个「二列布局」组合，左右两侧分别嵌套对应的组件，然后上传素材就可以了。
下面一起看下详细的制作教程吧。
详细教程：
工具：iPaiban Pro黑科技编辑器，网址：SVG.iPaiban.com
组合：二列布局
编号：10144（组合）
组件：单层滑动-左滑(自动对齐)
编号：10236（组件）
第1步：选择组合
登录 iPaiban Pro 黑科技编辑器后，点击编辑器左侧「组合」按钮，在「多列布局」分类中找到「二列布局」组合，或者在组合中直接搜索编号10144，点击选择。
第2步：嵌套组件
点击「编辑组合」，进入「二列布局」组合编辑模式。
接着在左侧「组件」中找到「全能无缝图」组件（编号10207），拖拽到二列布局的左侧组件位中。
在左侧「组件」中找到「单层滑动-左滑(自动对齐)」组件（编号10236），拖拽到二列布局的右侧组件位中。
第3步：上传图片素材
点击「全能无缝图」组件，上传左侧图片素材。点击「单层滑动-左滑(自动对齐)」组件，上传右侧图片素材。3张图片尺寸保持一致。
第4步：上传组合背景
为了防止二列布局中间拼接处出现缝隙，以及在苹果手机上左右滑动露出白底，我们需要给组合上传一张背景图。
点击页面空白处会看到上传「背景图」的位置，点击「换图」按钮上传一张完整的背景图。图片尺寸是2个组件位图片的尺寸之和。
第5步：导入公众号后台
内容编辑完毕后，点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。
点击主页面最右侧「预览草稿」可预览效果，效果满意后接着点击「同步至微信后台」就可以了。
使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
以上就是完整的排版教程了。
有细心的小伙伴发现。Apple原文中，右侧滑动的提示还有个闪烁效果，这个怎么弄？
多层嵌套一下就可以。给大家提示一下，还是「二列布局」组合，我们在右侧组件位中嵌套一个「长屏左滑组合(自动对齐)」，然后在「长屏左滑组合(自动对齐)」的每屏滑动中分别嵌套一个「全能无缝图」组件和「闪烁遮罩」组件。
在「二列布局」组合最外面再加一个中间镂空的圆角遮罩图片，就能实现完全一样的排版。
看看效果：
更多Apple同款效果：
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）