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)注入活力。
嗨嘍,寶子們,好久不見(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)看看吧!
點(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)講解。
??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)行閱讀,一定程度上提高了文章的留存率。
① 在這篇文章中看到的完整首屏海報(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)。
無(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ū)留言哦~
立即登錄