“极氪汽车古风长卷的弹窗效果，是怎么做的？”
最近有小伙伴刷到了极氪汽车的一篇图文，直呼：“像古风画卷一样，太美了！”。
这篇《极氪启岁丨循龙迹，寻龙运》不仅在设计上独具匠心，而且结合使用了SVG交互，点击图文中闪烁的光点将会弹窗展示不同的内容。
我们先来看下效果：
▲GIF演示
这种「悬浮弹窗」的SVG交互有很多品牌都在推文中使用过，那么极氪汽车的这篇特殊在哪里呢？
首先，我们常见的竖屏图文已经见怪不怪了，从设计角度出发，我们可以将图文旋转排版，引导大家横屏查看。同时横屏也可以呈现更为壮观的效果，比如呈现出一副唯美的画卷。
其次，悬浮弹窗的交互需要用户点击才能触发，这里我们一般通过闪烁的光标来引导大家点击的触发区域或者位置在哪里，这就要求在设计上把光标做成闪烁的GIF图。
那么，我们有没有办法通过交互实现这样的效果呢？答案当然是：有的！
这里以极氪汽车的这篇图文为例，我们通过「iPaiban Pro 小助手浏览器插件」来下载素材进行参考学习，可以看到总共有3张静态图。
其中引导点击的提示文字和画卷内容设计在底图上，弹窗图是透明底色的png格式，需留意只有透明底的png图片在点击弹窗的时候才不会遮盖底图。最后是光点的图，这里只设计了一个白色圆点，同样也是png格式。
下面拆解下排版步骤????????，一起看下如何制作的吧。
详细教程：
工具：iPaiban Pro黑科技编辑器，网址：SVG.iPaiban.com
组件：点击-悬浮弹窗(无限次弹出,不同关闭位置)
编号：11118（组件）
组件：闪烁遮罩
编号：11113（组件）
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，在「弹出|弹窗」分类中找到「点击-悬浮弹窗(无限次弹出,不同关闭位置)」组件，或者直接搜索组件编号11118，点击选择。
第2步：上传图片素材
在右侧需要上传两部分图片：背景图和弹窗图。
背景图为用户还未点击时显示的图片；弹窗图为用户可以点击弹窗的图片。背景图和所有弹窗图的尺寸需保持一致。
点击「示例图片」替换背景图和弹窗图。
第3步：设置触发区域
双击编辑区上传的背景图，会出现一个触发区域调整窗口。
触发区序号为几即代表第几张弹窗图，案例里只使用了1张弹窗图，那么2代表的是底图上的弹窗触发区域，设置好位置后我们点击下一张，设置序号1即弹窗图的关闭位置。
触发区间不可重叠，调整触发区到合适位置后，一定点击「点我隐藏触发区域」在预览中才不会显示红色的触发区域。
第4步：选择组件
点击编辑器左侧「组件」按钮，在「特殊」分类中找到「闪烁遮罩」组件，或者直接搜索组件编号11113，点击选择。
第5步：上传图片素材
点击「换图」替换闪烁遮罩图。
第6步：调整闪烁时间
鼠标左键长按拖拽「滑杆」设置闪烁时间。
第7步：导入公众号后台
点击最右侧「预览草稿」扫码预览效果，效果满意后接着点击「同步至微信后台」就可以了。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）