宝藏模版
往期推荐(点击阅读):
趣味效果|高大上|可爱风|年终总结(一)|年终总结(二)|循环特效|情人节(一)|情人节(二)|妇女节|儿童节|儿童节(二)|618|父亲节|丝滑动画|端午节|滑动妙用|图片轮播|又红又专|中秋节(一)|双十一|世界杯|圣诞节|新年|兔年春节|元宵节|愚人节|杂志范儿|520/521|五一旅游|母亲节|多巴胺|微博|夏日氛围|大唐国风|反诈宣传|七夕节|CityWalk|开学季|揭露丑恶真相|运动会|中秋节(二)|十一|万圣节|冬季氛围|新闻宣传|春节红包|龙年春节
各位黑科技编辑器的会员,编辑器 SVG 组件你们都用过吗?开工日将近,做好充分准备用 SVG 交互展示品牌的新年新气象吧!
产品轮播画面设计(零高结构)
Burberry 崇礼限时精品店即将开业,品牌方以《雪上飞鸢,尽游新愿》一文为消费者呈现大量的高清美图。那么作为其中最关键的新店预约落地页,SVG 是必不可少的:
静态文案清晰,动态提示显著,轮播图片精美。很显然排版时采用了「动静分离」的思路,由此使得最终的叠加效果近乎完满,它的图层关系如下:GIF(轮播)-PNG(文案)-PNG(SVG 提示符闪烁)
利用好零高结构,我们可以轻松通过如下方式在黑科技 SVG 编辑器中布局:
按照这个设计思路,我们还可以将第一个「零高图片」替换为「零高容器」并嵌套丰富的编辑器 SVG 轮播效果,由此实现更多出彩的落地页设计效果。而关于 GIF 动态图的巧妙分层处理办法和压缩机制,还可以进入视频号动态进行具体学习。
双向可滑动设计
有没有一种神奇的布局,在初始状态下既可以左滑也可以右滑?积家 JaegerLeCoultre 公众号《翻转传奇》就做到了,在这篇线下腕表限时体验空间开展预告的图文中,有一组居中出发可左右滑动的产品图布局:
这里利用的是「等分容器吸附滑动」和「等分容器逆向吸附滑动」相结合产生的奇妙特性。关于双向滑动的基本原理,可以点击阅读《「双向滑动」是什么神奇图文排版?》,关于上方案例的具体操作流程则可以进入小红书笔记,马上开始学习。
用户好评滚动播放(跑马灯)
开工新品选什么?霸王茶姬让消费者说了算。在《开工的第一杯奶茶,我们请!》中,用户的票选留言通过 SVG 跑马灯进行了轮播展示,体现了天选实力派产品「桂馥兰香」的用户声量:
本质上,是将这些评论排列为长图后通过 PS/AI 切片工具等分切图,再利用「跑马灯」模板进行无缝拼接滚动。同理,这种 SVG 黑科技排版还可以用于展示弹幕动画效果,在星巴克公众号的定制作品(by 语图工作室)《龙年新品|这一杯,祝你如愿成龙!》中,这个有趣的画面就是「跑马灯」+「浮层」的组合结果:
挤压伸长-回缩(UGC)
多款新品推出,既要平铺陈列,又想展开说说?在 E2 编辑器的 UGC 原创专区,有一款由@科蚪大神发明的「挤压伸长」正适合这样的场景需求。在古茗茶饮的定制案例(by 三千喵)《超多新品来袭!大豆奇幻之旅正在上演》中,开发者构思了三个「关卡」,巧妙展示了不同的新品信息:
用户还可以在该组件使用时,选择首页带切换的版本,形成画面变化并挤压伸长的效果。内部则可以嵌套滑动等互动内容,进一步丰富展开的信息细节。正如路易威登的《爱无终点站(上)》案例,以「视角选择」的构思结合滑动布局形成了优雅的 SVG 交互效果:
需要注意的是:
1)挤压伸长的返回区在长图内容最后 10% 处,因此临近末端的排版组件应筛选到「自然优先级」,避免阻挡返回能力;
2)挤压伸长的技术本质涉及 flex 布局,因此多个挤压结构内部应保持严格的布局统一性,尤其涉及嵌套滑动模块时,滑动的屏数应尽量一致。
裸眼 3D 排版(视差滑动)
要让新品的亮相更为震撼,那么裸眼 3D 的效果可以说是公众号黑科技排版的天花板选项了。以法拉利中国公众号的《打造您的纯血跃马 Purosangue》为例,采用的就是业内知名学者@计育韬老师发明的「地平面线视差」模型:
这种神奇的布局思路,最早出现在《如果你也喜欢周杰伦,那我们就是好朋友。》一作中,黑科技 SVG 编辑器已获得授权并上架为对应模板。上方的法拉利公众号的排版思路可参考《黑科技编辑器|裸眼3D地平线视差教程》进行操作。
黑科技编辑器秉持着让行业“人均 SVG”的生态理念,由多位黑科技排版设计的头部资深开发者共同打造,帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议,也欢迎通过客服向我们提出,编辑器将竭诚思考代码转化的可行性。