婦女節(jié)打破刻板印象，教你用這3種SVG交互撕掉「標(biāo)簽」！

原創(chuàng) 贊收藏 評(píng)論

舉報(bào) 2024-02-29

掃描,分享朋友圈

還有一周左右就到三八婦女節(jié)，品牌們?nèi)绾尾邉潉?chuàng)作婦女節(jié)的圖文，才能打到女性的心坎里？

與其一味地送空洞的祝福，不如號(hào)召大家打破社會(huì)對(duì)女性的偏見(jiàn)，撕掉不該有的標(biāo)簽。

與眾不同的主題搭配生動(dòng)形象的SVG交互，往往能讓圖文展現(xiàn)出極其讓人共鳴的的吸引力。

今天給大家簡(jiǎn)單分享拆解3個(gè)關(guān)于「打破偏見(jiàn)，撕掉標(biāo)簽」案例，一起學(xué)習(xí)下其中的創(chuàng)意和排版技巧吧。

一

點(diǎn)擊炸彈撕毀標(biāo)簽

*素材來(lái)自中國(guó)教育報(bào)《今天，為她撕掉這些標(biāo)簽》

「中國(guó)教育報(bào)」結(jié)合「點(diǎn)擊切換GIF動(dòng)圖」的交互模擬炸彈摧毀女性身上的標(biāo)簽，借此呼吁大家撕掉這些不被定義的標(biāo)簽。

在交互上只需要上傳點(diǎn)擊前和點(diǎn)擊后2張圖片，非常簡(jiǎn)單。

點(diǎn)擊前的圖片為標(biāo)簽圖且為循環(huán)播放的GIF，點(diǎn)擊后為引爆炸彈出現(xiàn)名言的動(dòng)圖并且動(dòng)圖需制作為單次播放的。

想要實(shí)現(xiàn)同款效果可以搜索使用：

組件：點(diǎn)擊-切換GIF動(dòng)圖(有觸發(fā)區(qū))

編號(hào)：10087（組件）

二

層層滑開(kāi)標(biāo)簽

*素材來(lái)自CharlesKeithOfficial《@所有女生 | 打破偏見(jiàn)，擁抱多樣性！》

同樣是點(diǎn)擊展開(kāi)，但是這篇圖文可以「層層滑開(kāi)」模擬撥開(kāi)標(biāo)簽，引起大家的好奇心和探索欲后再點(diǎn)擊展開(kāi)。根據(jù)滑動(dòng)方向的不同，我們選擇左右交錯(cuò)，首層向右的「層層滑開(kāi)+點(diǎn)擊展開(kāi)」的組合進(jìn)行制作。

展開(kāi)前設(shè)置層層滑開(kāi)效果，需注意圖片順序的排列，且每張滑動(dòng)圖尺寸需保持一致。

展開(kāi)后的內(nèi)容，需要什么效果可以選擇對(duì)應(yīng)的效果組件嵌套在組合中。想要實(shí)現(xiàn)同款效果可以搜索使用：

組合：層層滑開(kāi)(左右交錯(cuò),首層向右,自動(dòng)對(duì)齊)+點(diǎn)擊展開(kāi)

編號(hào)：10558（組合）

詳細(xì)的教程戳：《層層滑開(kāi)+點(diǎn)擊展開(kāi)=？》

三

點(diǎn)擊消除標(biāo)簽

*素材來(lái)自每日每加《今天，我們選擇撕掉這些標(biāo)簽》

「每日每加」圖文開(kāi)頭是經(jīng)典名詞的標(biāo)簽效應(yīng)的解釋?zhuān)軌蛞鸫蠹业暮闷婧凸缠Q，點(diǎn)擊每一張標(biāo)簽圖會(huì)消失。除了單獨(dú)使用「點(diǎn)擊-消除圖片」的組件，點(diǎn)擊編輯器左側(cè)「組合」按鈕，在「多列布局」分類(lèi)中找到「三列布局」和「二列布局」組合，將「點(diǎn)擊-消除圖片」的組件拖拽進(jìn)組合內(nèi)進(jìn)行排版，效果更佳。需注意一行中每個(gè)宮格的圖片尺寸要一致。
想要實(shí)現(xiàn)同款效果可以搜索使用：

組件：點(diǎn)擊-消除圖片

編號(hào)：10238（組件）

組合：三列布局

編號(hào)：10150（組合）

組合：二列布局｜兩列布局

編號(hào)：10144（組合）

詳細(xì)的教程戳：《消除過(guò)去一年的不愉快吧！》

如果以上案例還沒(méi)有看夠，可以到「品牌時(shí)光機(jī)」交互圖文案例庫(kù)（網(wǎng)址：brandtime.cn）的中找到「節(jié)日分類(lèi)」點(diǎn)擊選擇「婦女節(jié)」查看更多相關(guān)案例。

本內(nèi)容為作者獨(dú)立觀(guān)點(diǎn)，不代表數(shù)英立場(chǎng)。
本文禁止轉(zhuǎn)載，侵權(quán)必究。