适合龙年春节的SVG模版

最新推荐文章于 2024-06-15 15:29:45 发布

黑科技编辑器

最新推荐文章于 2024-06-15 15:29:45 发布

阅读量767

点赞数 19

文章标签：编辑器新媒体运营微信公众平台交互

本文链接：https://blog.csdn.net/e2_cool/article/details/136070970

版权

各位 E2.COOL 的会员，编辑器内 1200+ 的 SVG 组件你们都用过吗？临近除夕，如果你的春节主题发布还未成型，不妨来看看本期的龙年 SVG 交互设计推荐吧！

❶龙与长图，具有天然的契合性。局部气候调查组公众号的 10W+ 创意作品《如何服务一条龙？》，巧妙利用「二分栏」、「三分栏」，结合基础的「点击渐现」形成了一条长长长长长的龙身，通过不断点击龙鳞中的醒目位置切换画面，初看极具冲击力，细品极具可玩性。

可见，优秀的 SVG 黑科技排版并非一定要基于复杂精妙的代码结构。对设计的巧思结合得当的编辑器组件选择，避免用力过猛，让形式真正服务于内容，才是 SVG 交互设计的真谛。

❷同样以「一条龙」之梗为选题，蕉内公众号《给会员的一条龙服务》则以 SVG 弹窗形式串联整个龙身，巧妙采用了 SVG「无限选择器」为模版实现了弹窗开关的特效。

可口可乐公众号的《和我一起，年货接Loooooooooooong！》SVG 图文，也采用了相似的设计思路，同样基于 E2.COOL 黑科技编辑器「无限选择器」实现：

关于通过 SVG 无限选择器制作弹窗开关效果的方法，我们已经在多个案例中为读者们做过开发详解。

❶上期我们曾介绍马吉拉公众号《家路依旧》中红包封面的展示方法，也就是基于 E2.COOL 黑科技编辑器中 UGC 专区的「卡片轮播」实现如下效果：

该组件的原创作者是业内著名的交互设计独立工作室归零心态 ZER0N，他们为华为、大众等品牌长期提供出类拔萃的图文 SVG 互动创意以及小程序、H5 页面技术支持，并研发了免费的 Z0 插件普惠广大运营人，欢迎点击阅读《SVG大神专访：ZER0N，不容小觑的斜杠青年团队！》认识他们。

❷同样我们还可以通过 UGC 专区的「旋转式切换」轮播红包封面，欢迎点击阅读《SVG大神专访：三千喵，从设计师到开发者的全栈汉服玩家》认识原创作者三千喵，其组件效果如下：

❸我们也可以让读者们试试手气，以 VALENTINO 公众号的《盲盒到，来接「龙」》为例，采用了 E2.COOL 中的「幸运抽签-切换式」组件实现了红包封面发放与抽签交互的融合：

❶哪怕是单一款红包封面，也可以通过 SVG 交互加持，让领取的过程变得更有趣，比如 PayPal 公众号《“龙”重登场！PayPal China贝宝中国龙年限定红包封面来了！》纵向滑动后从红包中抽出祝福内容：

考虑到这里有一处红包结构对纵向滑动的遮挡效果，我们建议按如下布局搭建呈现：

❷或结合独家设计的壁纸，让红包封面领取与壁纸保存共同呈现，以马吉拉公众号的《相聚2023》为例此处采用了等分容器滑动结构，第一个容器为「无图标超链接」跳转红包封面，第二个容器为「热区型弹出式海报」引导读者保存壁纸，透明的滑块设计非常出彩，你可以滑动下方画面体验：

❶与艺术家联名是品牌在春节期间的常见宣传形式，纪梵希特邀非遗传承人手绘了 12 个月的纸页游龙，并采用了微信 SVG 交互大神 @GL 老师发明的「标签抽拉」SVG 组件进行展示：

「标签抽拉」是一款 3 年来备受用户喜爱的交互模版，早在 2021 年《再小的个体，也有自己的版权！》中就获得 @GL 老师的独家授权上架于 E2.COOL 黑科技 SVG 编辑器，任何用户均可直接点击该组件单独购买获得。

❷让用户亲自画龙？提前准备好精美的金色纹理背景，在前景镂空造型，随着屏幕的滑动就可以出现不断填色的交互效果，正如抖音发布的定制作品（by 阔野文化）《上班暂停，玩个年味接龙》，采用了「顶层滑动」嵌套「纵向滑动」结构：

这种基于镂空布局的滑动，重点考究设计师的想象力，这里提供一个结构图示：

❶年轻人们，准备好回家后面对亲戚们的灵魂拷问了吗？珠海科技学院公众号的《春节灵魂拷问：大学谈恋爱了吗？（送最后一波红包封面，必中！）》通过「二选一切换」SVG 特效，让你快速倒吸凉气：

❷但我们依然向往着家的方向，行李箱里早已装入自己的隐藏人格，正如 WhatYouNeed 公众号的《装成「败家女」回家过年的好处是：》一样，行李箱被安检扫描过后，我们另一面即将无拘无束地展开。此处通过「点击-播放 GIF-伸长」组件，将传送带动画与图文展开特效相串联：

更多海量模板，平均不足 1 元！

E2.COOL 秉持着让行业“人均 SVG”的生态理念，由多位黑科技排版设计的头部资深开发者共同打造，帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议，也欢迎通过客服向我们提出，E2 将竭诚思考代码转化的可行性。

E2 平台官网

https://www.e2.cool/

会的比别人多一点

黑科技编辑器

关注