自定义组合设计
Do It Yourself
黑科技编辑器作为自由度极高的 SVG 模块化设计引擎,长期鼓励用户通过创想组合,设计别出心裁的轮播图布局。本期我们汇总了一系列典型的 DIY 效果,为你带来大开眼界的编辑器模版应用思路。
扑克式展开+对向轮播
以万宝龙公众号的《节日仪式感》为例,采用了 UGC 组件「扑克展开」内嵌套「滚动广告」的布局策略。「滚动广告」共三行,其中一行筛选了逆向效果,因此展开过程和展开后的动态表现都十分别致:
关于它的编辑器搭建思路,可以收看此前 Ceep 老师录制的专题讲解。
滚动广告叠加设计
在上一个实例中,我们通过方向的变化对最常见的 SVG「滚动广告」进行了创意布局组合。那么如果我们改变其位置,譬如互相叠加会产生什么其他效果吗?这里我们采用「零高容器」结合自定义参数的控制,实现双层差速轮播效果:
注意:1)自定义参数的数值可正可负,正代表延迟负代表提前;2)数值的绝对值不应过大,否则前后画面会失去对应关系;3)如应用正数值,不建议设置在图文开场第一屏,否则存在启动延迟切换的情况。
叠加条件下,如果再结合方向维度的变化,我们又可以实现一种交叉轮播的新效果:
以上 DEMO 让我们发现,这种组合方式在产品配色展示中有着得天独厚的优势,而它同样也是基于「零高容器」与「滚动广告」实现的。
所以即便是经典的网页滚动广告交互,我们依然可以通过设计思维的变化革新出前所未有的体验。
相册式轮播
在黑科技 SVG 编辑器中,已经有诸如「黑科技编辑器|视差相册(横向8图)」和「黑科技编辑器 | 视差相册(纵向8图)」这样的手动浏览 SVG 图集。但有的用户不满足于此,通过轮播模版的组合产生了有趣的自动化相册式轮播效果。
以横向为例,结合「分栏」类组件和必要的视觉设计素材,可以形成如下 SVG 多图自动展示效果:
同理,基于编辑器可以在纵向上形成另一种相册式的 SVG 多图自动展示:
非等大轮播叠加
无论是方向、速度的差异组合,还是分栏化的宫格布局,我们都不难发现其图集素材的尺寸都是完全一致的。那如果我们采用尺寸与内容完全不同的素材进行叠加,可以形成别具一格的轮播设计吗?
在这个实例中,图片和文案均在运行轮播 SVG 效果,它们的位置和素材尺寸虽不相同,但巧妙形成了融洽的组合。以下提供布局参考图,注意「占位」组件的应用:
「占位」组件的意义是占据设计师规划的精确留白空间,以确保后续组件紧跟「占位」向下继续布局,它是高阶 SVG 排版中相当常用的高级组件。其具体特性说明可点击阅读《黑科技编辑器|占位SVG教程》。
点击切换任意轮播
还有一种普遍存在的 SVG 设计需求是「点击画面后变化为轮播图集」,那么对于企业会员来说可以直接使用「点击切换任何轮播」组件,点击下方画面查看效果:
对专业会员来说可以通过「零高容器」的应用将任何轮播与任何「单图XX」组件进行拼装:
那么,发挥你的想象力,通过强大的黑科技 SVG 编辑器构建属于你自己的轮播创意组合设计吧!