妇女节打破刻板印象，教你用这3种SVG交互撕掉「标签」！
还有一周左右就到三八妇女节，品牌们如何策划创作妇女节的图文，才能打到女性的心坎里？
与其一味地送空洞的祝福，不如号召大家打破社会对女性的偏见，撕掉不该有的标签。
与众不同的主题搭配生动形象的SVG交互，往往能让图文展现出极其让人共鸣的的吸引力。
今天给大家简单分享拆解3个关于「打破偏见，撕掉标签」案例，一起学习下其中的创意和排版技巧吧。
一
点击炸弹撕毁标签
*素材来自中国教育报《今天，为她撕掉这些标签》
「中国教育报」结合「点击切换GIF动图」的交互模拟炸弹摧毁女性身上的标签，借此呼吁大家撕掉这些不被定义的标签。
在交互上只需要上传点击前和点击后2张图片，非常简单。
点击前的图片为标签图且为循环播放的GIF，点击后为引爆炸弹出现名言的动图并且动图需制作为单次播放的。
想要实现同款效果可以搜索使用：
组件：点击-切换GIF动图(有触发区)
编号：10087（组件）
二
层层滑开标签
*素材来自CharlesKeithOfficial《@所有女生 | 打破偏见，拥抱多样性！》
同样是点击展开，但是这篇图文可以「层层滑开」模拟拨开标签，引起大家的好奇心和探索欲后再点击展开。根据滑动方向的不同，我们选择左右交错，首层向右的「层层滑开+点击展开」的组合进行制作。
展开前设置层层滑开效果，需注意图片顺序的排列，且每张滑动图尺寸需保持一致。
展开后的内容，需要什么效果可以选择对应的效果组件嵌套在组合中。想要实现同款效果可以搜索使用：
组合：层层滑开(左右交错,首层向右,自动对齐)+点击展开
编号：10558（组合）
详细的教程戳：《层层滑开+点击展开=？》
三
点击消除标签
*素材来自每日每加《今天，我们选择撕掉这些标签》
「每日每加」图文开头是经典名词的标签效应的解释，能够引起大家的好奇和共鸣，点击每一张标签图会消失。除了单独使用「点击-消除图片」的组件，点击编辑器左侧「组合」按钮，在「多列布局」分类中找到「三列布局」和「二列布局」组合，将「点击-消除图片」的组件拖拽进组合内进行排版，效果更佳。需注意一行中每个宫格的图片尺寸要一致。想要实现同款效果可以搜索使用：
组件：点击-消除图片
编号：10238（组件）
组合：三列布局
编号：10150（组合）
组合：二列布局 ｜ 两列布局
编号：10144（组合）
详细的教程戳：《消除过去一年的不愉快吧！》
如果以上案例还没有看够，可以到「品牌时光机」交互图文案例库（网址：brandtime.cn）的中找到「节日分类」点击选择「妇女节」查看更多相关案例。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）