大开眼界：SVG轮播图创意组合设计

自定义组合设计

Do It Yourself

黑科技编辑器作为自由度极高的 SVG 模块化设计引擎，长期鼓励用户通过创想组合，设计别出心裁的轮播图布局。本期我们汇总了一系列典型的 DIY 效果，为你带来大开眼界的编辑器模版应用思路。

扑克式展开+对向轮播

以万宝龙公众号的《节日仪式感》为例，采用了 UGC 组件「扑克展开」内嵌套「滚动广告」的布局策略。「滚动广告」共三行，其中一行筛选了逆向效果，因此展开过程和展开后的动态表现都十分别致：

关于它的编辑器搭建思路，可以收看此前 Ceep 老师录制的专题讲解。

滚动广告叠加设计

在上一个实例中，我们通过方向的变化对最常见的 SVG「滚动广告」进行了创意布局组合。那么如果我们改变其位置，譬如互相叠加会产生什么其他效果吗？这里我们采用「零高容器」结合自定义参数的控制，实现双层差速轮播效果：

注意：1）自定义参数的数值可正可负，正代表延迟负代表提前；2）数值的绝对值不应过大，否则前后画面会失去对应关系；3）如应用正数值，不建议设置在图文开场第一屏，否则存在启动延迟切换的情况。

叠加条件下，如果再结合方向维度的变化，我们又可以实现一种交叉轮播的新效果：

以上 DEMO 让我们发现，这种组合方式在产品配色展示中有着得天独厚的优势，而它同样也是基于「零高容器」与「滚动广告」实现的。

所以即便是经典的网页滚动广告交互，我们依然可以通过设计思维的变化革新出前所未有的体验。

相册式轮播

在黑科技 SVG 编辑器中，已经有诸如「黑科技编辑器｜视差相册（横向8图）」和「黑科技编辑器 | 视差相册（纵向8图）」这样的手动浏览 SVG 图集。但有的用户不满足于此，通过轮播模版的组合产生了有趣的自动化相册式轮播效果。

以横向为例，结合「分栏」类组件和必要的视觉设计素材，可以形成如下 SVG 多图自动展示效果：

同理，基于编辑器可以在纵向上形成另一种相册式的 SVG 多图自动展示：

非等大轮播叠加

无论是方向、速度的差异组合，还是分栏化的宫格布局，我们都不难发现其图集素材的尺寸都是完全一致的。那如果我们采用尺寸与内容完全不同的素材进行叠加，可以形成别具一格的轮播设计吗？

在这个实例中，图片和文案均在运行轮播 SVG 效果，它们的位置和素材尺寸虽不相同，但巧妙形成了融洽的组合。以下提供布局参考图，注意「占位」组件的应用：

「占位」组件的意义是占据设计师规划的精确留白空间，以确保后续组件紧跟「占位」向下继续布局，它是高阶 SVG 排版中相当常用的高级组件。其具体特性说明可点击阅读《黑科技编辑器｜占位SVG教程》。

点击切换任意轮播

还有一种普遍存在的 SVG 设计需求是「点击画面后变化为轮播图集」，那么对于企业会员来说可以直接使用「点击切换任何轮播」组件，点击下方画面查看效果：

对专业会员来说可以通过「零高容器」的应用将任何轮播与任何「单图XX」组件进行拼装：

那么，发挥你的想象力，通过强大的黑科技 SVG 编辑器构建属于你自己的轮播创意组合设计吧！