宝藏模版
往期推荐(点击阅读):
趣味效果|高大上|可爱风|年终总结I|年终总结II|循环特效|情人节I|情人节II|妇女节|儿童节I|儿童节II|儿童节III|618I|618II|父亲节|丝滑动画|端午节I|端午节II|滑动妙用|图片轮播I|图片轮播II|又红又专|中秋节I|中秋节II|双十一I|双十一II|世界杯|圣诞节|新年|兔年春节|元宵节|愚人节|杂志范儿|520/521I|520/521II|五一旅游I|五一旅游II|母亲节I|母亲节I|多巴胺|微博|夏日氛围|大唐国风|反诈宣传|七夕节|CityWalk|开学季|揭露丑恶真相|运动会I|运动会II|十一|万圣节|冬季氛围|新闻宣传|春节红包|龙年春节|开工新品|地球日
各位黑科技编辑器的会员,编辑器内的 SVG 组件你们都用过吗?七夕将至,以下过往专题亦可参考:
推荐适合情人节的SVG模版 <br/> 推荐适合情人节的SVG模版 (第Ⅱ期)<br/> 推荐浪漫七夕的SVG模版
推荐适合520/521的SVG模版 <br/> 推荐520主题的SVG模版 (第Ⅱ期)
卡牌游戏(多热区无限浮现-关闭)
在完美日记公众号的《 情人节翻牌游戏!翻到什么送什么!》中,设计师以「翻牌」为互动意象,通过「多热区无限浮现-关闭」组件生成了整套 SVG 交互排版:
关于此模版的使用,应注意操作时各个热区不可发生重叠。Ceep 老师此前也录制了专题视频进行讲解。
产品多点缩放展示(地图多点游走)
在 ORIBE 公众号的《520抽奖|以繁花释放爱意》中,设计师创造性地将「UGC|地图多点游走缩放」SVG 模版转化为产品细节的缩放展示,便于消费者更自由地探索产品细节,视觉体验优雅灵动:
可前往视频号,通过 Ceep 老师的案例分析一起来了解它的排版布局方式。
而近期发布的《我要开始发疯了!!!》广受用户好评,它同样基于这款由@2H 大神发明的 SVG 组件实现,足见其通用性之广。可点击《SVG教程|发疯工位DIY|地图游走&文字输入组件|E2.COOL》查看 SVG 排版解析。
在 Tiffany 公众号的《故事,从开启蓝盒开始……》中,设计师娴熟应用了黑科技 SVG 编辑器的多款 SVG 组件,其中尤为出彩的是「UGC|SVG无限选择器」嵌套产品图滑动:
「SVG 无限选择器」是由@科蚪 大神发明并独家授权至 E2 平台的正版 UGC 组件,可查看原作的案例分析。
此外也可以在该组件中嵌入纵向滑动,形成另一种独特的展示效果:
自动连续动画(自由布局)
在荣耀手机公众号《一封穿越时空的情书!七夕献映,敬请期待》中,开场的丝滑自动动画得益于纯 SVG 代码的驱动:
我们可以利用黑科技 SVG 编辑器中的「自由布局」大区组件,结合「零高容器」与「自动伸长」叠加而成,且多个动画因结构相似故均可快速复制仅修改时间参数,具体排版参考如下:
图片消失-滑动出现
品类丰富亟需应用滑动展示,但又想确保长图的初始整体感?那么这时候就适合通过「图片消失-滑动出现」将一图流与多图滑动进行衔接,点击下方画面并滑动体验:
在黑科技编辑器的组件搜索功能内查找「图片消失-滑动出现」组件即可使用!注意保持设计素材尺寸相同,还可查看筛选器内的多个变体效果。
视频号跳转美化(双层)
对视频号进行美化处理,是当前一图流 SVG 交互设计的主流策略。且越来越多的品牌开始采用动静分离的排版,让美化效果形成双层布局,极大提升清晰度感官:
黑科技编辑器秉持着让行业“人均 SVG”的生态理念,由多位黑科技排版设计的头部资深开发者共同打造,斩获包括法国设计奖、美国缪斯创意设计奖等诸多国际赛事大奖,帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议,也欢迎通过客服向我们提出,编辑器将竭诚思考代码转化的可行性。