SVG互動(dòng)創(chuàng)意:無(wú)限次點(diǎn)擊展開(kāi)回縮效果教程

掌握新媒體運(yùn)營(yíng)的創(chuàng)新利器!本文深入解析135編輯器的SVG無(wú)限次點(diǎn)擊展開(kāi)回縮功能,通過(guò)CC卡美珠寶的《許個(gè)愿吧》案例,展示如何通過(guò)互動(dòng)式SVG效果提升用戶(hù)參與度和推文留存率。學(xué)習(xí)如何操作這一動(dòng)態(tài)效果,為你的內(nèi)容營(yíng)銷(xiāo)注入活力。

大牌案例拆解


每天進(jìn)步一點(diǎn)點(diǎn)


嗨嘍,寶子們,好久不見(jiàn),今天三兒將繼續(xù)帶著大家一起來(lái)學(xué)習(xí)今天的大牌案例拆解內(nèi)容——無(wú)限次點(diǎn)擊展開(kāi)回縮。點(diǎn)擊展開(kāi)效果大家應(yīng)該都不陌生了,但是在此基礎(chǔ)上搭配無(wú)限次的點(diǎn)擊查看機(jī)會(huì),又會(huì)碰撞出怎樣的火花呢?趕緊跟著三兒一起來(lái)看看吧!



1
寫(xiě)在前面




點(diǎn)擊上方圖片跳轉(zhuǎn)閱讀??


本期為大家?guī)?lái)的優(yōu)質(zhì)案例是CC卡美珠寶品牌的推文內(nèi)容《許個(gè)愿吧》,這篇文章是以新年愿望為主題,利用無(wú)限次點(diǎn)擊展開(kāi)點(diǎn)擊回縮效果來(lái)介紹自己的珠寶產(chǎn)品。推文的首圖是一張精心設(shè)計(jì)的珠寶產(chǎn)品展示圖片。而具體的產(chǎn)品內(nèi)容則隱匿在首圖之下,需要用戶(hù)通過(guò)點(diǎn)擊之后才可了解,而每展開(kāi)一個(gè)產(chǎn)品內(nèi)容則對(duì)應(yīng)一個(gè)新年愿望,比如醒獅的項(xiàng)鏈代表著一路發(fā)財(cái),與推文主題相呼應(yīng)。這樣的設(shè)計(jì)在保證排版美觀的同時(shí)又能與用戶(hù)形成很好的互動(dòng),下面就具體展開(kāi)講解。





2
效果講解




??gif圖效果展示


這篇文章中用到的效果為無(wú)限次點(diǎn)擊展開(kāi)點(diǎn)擊回縮(變化首圖)效果,ID:129。大家對(duì)點(diǎn)擊展開(kāi)的效果應(yīng)該都不陌生,該文章中用到的svg,在點(diǎn)擊展開(kāi)的基礎(chǔ)上添加了無(wú)限次展開(kāi)回縮的效果,讓用戶(hù)能夠與推文進(jìn)行多次互動(dòng),提高推文的留存率。


此效果在節(jié)省排版空間的基礎(chǔ)上,優(yōu)化了排版布局。如果將單個(gè)珠寶產(chǎn)品信息海報(bào)圖直觀的展示在推文中,整體看上去就會(huì)比較平淡,且每個(gè)單獨(dú)的產(chǎn)品海報(bào)銜接在一起,內(nèi)容上顯得很松散,不統(tǒng)一。但是將每個(gè)產(chǎn)品具體的信息隱匿在一張完整的海報(bào)之下,能夠在不破壞整體推文美觀度的情況下,盡可能展示更多的內(nèi)容。比如在該篇文章中將每部分展開(kāi)的珠寶產(chǎn)品內(nèi)容對(duì)應(yīng)一個(gè)新年愿望:笑看生活、一路發(fā)財(cái)?shù)?,且產(chǎn)品的寓意與新年愿望的文案是有關(guān)聯(lián)的,整體設(shè)計(jì)巧妙。



此效果也增強(qiáng)了推文的互動(dòng)性。點(diǎn)擊展開(kāi)的方式增加了產(chǎn)品內(nèi)容的神秘感,激起用戶(hù)的好奇心,讓用戶(hù)通過(guò)點(diǎn)擊特定的按鈕來(lái)查看具體內(nèi)容,同時(shí)無(wú)限次點(diǎn)擊展開(kāi)回縮的效果,讓用戶(hù)可以多次點(diǎn)擊,停留更多的時(shí)間和注意力進(jìn)行閱讀,一定程度上提高了文章的留存率。



3
操作步驟



01
打開(kāi)svg編輯器


在編輯器首頁(yè)的左側(cè)菜單欄選擇svg編輯器,進(jìn)入到svg編輯器首頁(yè)。



02
添加效果


在互動(dòng)效果中輸入ID號(hào)碼:129,或者是關(guān)鍵詞:“無(wú)限次點(diǎn)擊展開(kāi)”,將該效果放置在編輯頁(yè)面中。



03
編輯效果


① 在這篇文章中看到的完整首屏海報(bào)圖片其實(shí)是由多個(gè)無(wú)限次點(diǎn)擊展開(kāi)回縮效果拼接而成,通過(guò)將海報(bào)中的各個(gè)產(chǎn)品圖片切割成幾部分,再依次編輯每部分的內(nèi)容而實(shí)現(xiàn)的。



② 這其中每一部分的無(wú)限次點(diǎn)擊展開(kāi)點(diǎn)擊回縮(變化首圖)又是由四個(gè)部分組成,展開(kāi)前首圖、點(diǎn)擊變化后的圖片、回縮圖片、以及產(chǎn)品圖片。



③ 添加好展開(kāi)前首圖、點(diǎn)擊變化后的圖片、回縮觸發(fā)圖后,再為首圖添加控制的熱區(qū)。



選中紅色虛線(xiàn)區(qū)域進(jìn)行拖拽即可為其添加控制熱區(qū)的位置。


④ 編輯點(diǎn)擊展開(kāi)后的圖片內(nèi)容,需要在編輯區(qū)域選擇【編輯展開(kāi)內(nèi)容】,進(jìn)入頁(yè)面之后選擇無(wú)縫圖組件。ID號(hào)為:136,添加在編輯頁(yè)內(nèi)。




需要注意的是在該效果中添加的所有圖片的寬高需要保持一致


⑤ 在做好第一部分之后,依次在后面添加無(wú)限次點(diǎn)擊展開(kāi)回縮效果,將其組合在一起形成一張完整的海報(bào)。



⑥ 制做好之后,選擇右上角的【導(dǎo)出】【同步】即可同步到微信后臺(tái)。




4
三兒說(shuō)


無(wú)限次點(diǎn)擊展開(kāi)回縮效果很適合放在展示內(nèi)容較多且需要排版創(chuàng)意且精致的推文之中。當(dāng)用慣了普通的點(diǎn)擊展開(kāi)效果,不妨可以考慮此款效果。像這篇案例文章一樣在推文中放入多個(gè)無(wú)限次點(diǎn)擊展開(kāi)回縮效果,拼接成完整的推文內(nèi)容,讓推文整體呈現(xiàn)效果更飽滿(mǎn)。除了用在產(chǎn)品介紹之中,像品牌活動(dòng)展示、創(chuàng)意內(nèi)容之中都可以使用該效果。


以上就是三兒分享的全部?jī)?nèi)容啦

如果覺(jué)得還不錯(cuò)

記得點(diǎn)贊+在看

還有什么想看的內(nèi)容

可以在下方評(píng)論區(qū)留言哦~




END




文章申明:本文章轉(zhuǎn)載自互聯(lián)網(wǎng)公開(kāi)渠道,如有侵權(quán)請(qǐng)聯(lián)系我們刪除
文章評(píng)價(jià)
登錄后可以評(píng)論
立即登錄
比格設(shè)計(jì)
熱門(mén)工具
135編輯器
領(lǐng)先的在線(xiàn)圖文編輯平臺(tái)原創(chuàng)樣式素材,一鍵套用
筆格設(shè)計(jì)
受歡迎的在線(xiàn)作圖網(wǎng)站,新媒體配圖、手機(jī)海報(bào)應(yīng)有盡有
筆格PPT
輸入主題,AI一鍵生成PPT;上傳本地文件秒變PPT
管小助
企業(yè)營(yíng)銷(xiāo)、私域流量運(yùn)營(yíng)——站式營(yíng)銷(xiāo)管理平臺(tái)
推薦文章
用戶(hù)運(yùn)營(yíng)平臺(tái)產(chǎn)品設(shè)計(jì)指南
淺談?dòng)脩?hù)運(yùn)營(yíng)中的用戶(hù)分層
內(nèi)容運(yùn)營(yíng):戴上寫(xiě)作的六頂思考帽
5000字方法論:4個(gè)細(xì)節(jié),決定私域能不能賺錢(qián)
一個(gè)案例說(shuō)明白用戶(hù)分析怎么用
22條視頻,漲粉12.6萬(wàn),一個(gè)女孩子在抖音靠洗車(chē)也能月入過(guò)萬(wàn)!
高價(jià)值社群的5大核心關(guān)鍵
抖音賬號(hào)內(nèi)容自檢清單!
決定離職后,3天拿到offer的總結(jié)與反思!
【135早資訊】:教育部將徹查教材插圖問(wèn)題;抖音6月1日起將對(duì)本地生活商家收取服務(wù)費(fèi)
熱門(mén)素材樣式
運(yùn)營(yíng)導(dǎo)航
運(yùn)營(yíng)工具
分享到