公眾號(hào)翻頁(yè)效果怎么做?

此篇文章用到了斜切式翻書(shū)SVG效果,原理類(lèi)似于點(diǎn)擊切換圖片,但在視覺(jué)效果上模擬了翻書(shū)變化的動(dòng)畫(huà)。

案例拆解篇
2023.02.16
@所有人  必讀



01
斜切式翻書(shū)SVG效果





《不懂就問(wèn)》

點(diǎn)擊上方黃色文字跳轉(zhuǎn)??



01
創(chuàng)意分析

STUDY HARD


此篇推文將原本長(zhǎng)篇文章內(nèi)容濃縮成一張張圖片,并以書(shū)本的形式來(lái)呈現(xiàn),需要用戶(hù)點(diǎn)擊之后切換圖片查看。在圖片的設(shè)計(jì)上以扁平風(fēng)格為主,整體背景是暗色系,能更好突出產(chǎn)品圖片,讓用戶(hù)在閱讀過(guò)程中快速將目光鎖定到珠寶產(chǎn)品。




02
SVG效果分析

STUDY HARD


此篇文章用到了斜切式翻書(shū)SVG效果,原理類(lèi)似于點(diǎn)擊切換圖片,但在視覺(jué)效果上模擬了翻書(shū)變化的動(dòng)畫(huà)。此效果將長(zhǎng)篇圖文內(nèi)容融合為一屏展示,相較于以往的長(zhǎng)篇累牘的呈現(xiàn)形式,這種形式能讓用戶(hù)視覺(jué)中心停留在此屏內(nèi)容之中,并帶著好奇心,進(jìn)行沉浸式閱讀,從而提高文章的留存率。


03
使用講解

STUDY HARD


當(dāng)大家在做圖片排版,而內(nèi)容較長(zhǎng)時(shí),利用此效果來(lái)展示文章是個(gè)不錯(cuò)的選擇。在圖片整體設(shè)計(jì)上,可以做成書(shū)籍、報(bào)紙、便簽的展示形式,如果要在海報(bào)中放入產(chǎn)品圖片時(shí),在文案部分需要精煉,整體海報(bào)的設(shè)計(jì)顏色要與產(chǎn)品形成反差,不要喧賓奪主,重點(diǎn)在于讓用戶(hù)關(guān)注到宣傳推廣的產(chǎn)品本身。


此效果適合科技、電商、彩妝、珠寶、服裝行業(yè)用來(lái)展示產(chǎn)品。


在135編輯器首頁(yè),選擇左側(cè)菜單欄【SVG編輯器】進(jìn)入。



進(jìn)入網(wǎng)頁(yè)后,選擇【互動(dòng)效果】—素材—斜切式翻書(shū)效果,ID:238,詳細(xì)制作教程如下:


教程在這里:點(diǎn)擊查看



02
左右掉落式切換圖片





《明天見(jiàn)。》

點(diǎn)擊上方黃色文字跳轉(zhuǎn)閱讀


01
創(chuàng)意分析

STUDY HARD


這篇推文是以二十四節(jié)氣為主題,以春夏秋冬為分界點(diǎn),每一個(gè)節(jié)氣海報(bào)圖則對(duì)應(yīng)一個(gè)珠寶產(chǎn)品。通過(guò)點(diǎn)擊切換節(jié)氣日歷的想法來(lái)做年度產(chǎn)品總結(jié),既展示了產(chǎn)品,又與年末主題相契合,與傳統(tǒng)的年度總結(jié)文章形式相比較而言構(gòu)思更巧妙。




02
SVG效果分析

STUDY HARD


推文中使用到的效果為左右掉落切換圖片,在點(diǎn)擊切換過(guò)程中圖片會(huì)朝左右兩側(cè)下方逐漸消失,模擬撕紙的視覺(jué)效果。在這篇推文中,將二十四節(jié)氣以春夏秋冬為時(shí)間分界線做了4組左右掉落式切換圖片的SVG,并且以日歷的形式來(lái)呈現(xiàn),讓排版變得高級(jí)美觀,將原本單一普通的產(chǎn)品展示變得新穎有趣,給用戶(hù)留下深刻印象。




03
使用講解

STUDY HARD


此款SVG適合大家用來(lái)做創(chuàng)意推文,無(wú)論是單獨(dú)作為展示效果,還是放在推文中與其他內(nèi)容組合在一起,在視覺(jué)呈現(xiàn)上都很棒。各行業(yè)都可以使用,在圖片制作上視覺(jué)風(fēng)格要保持一致,最好做成日歷或報(bào)紙的形式,才能與此效果的動(dòng)畫(huà)相融合。


在135編輯器首頁(yè),選擇左側(cè)菜單欄【SVG編輯器】進(jìn)入。



進(jìn)入網(wǎng)頁(yè)后,選擇【互動(dòng)效果】—素材—左右掉落式切換圖片,ID:245,詳細(xì)制作教程如下:


教程在這里:點(diǎn)擊查看







03
圖文依次停頓式展開(kāi)




《好長(zhǎng)長(zhǎng)長(zhǎng)...》

點(diǎn)擊上方黃色文字跳轉(zhuǎn)閱讀



01
創(chuàng)意分析

STUDY HARD


一看到這篇推文中的效果,我想大家應(yīng)該都不陌生了吧,沒(méi)錯(cuò),這就是《GQ紅了》爆款推文中的同款效果。在這篇文章中,以“粉色是什么”為主題,加上多款動(dòng)態(tài)的文字圖片進(jìn)行組合展示,對(duì)粉色的概念做了進(jìn)一步解釋?zhuān)徊讲降匾龑?dǎo)用戶(hù)往下閱讀推文,再在文章末尾處放上自己的新產(chǎn)品進(jìn)行宣傳推廣,與直接展示產(chǎn)品圖片相比,讓用戶(hù)更易接受,創(chuàng)意十足。



02
SVG效果分析

STUDY HARD


此款效果叫做圖文依次停頓式展開(kāi),同屬于點(diǎn)擊展開(kāi)效果的隊(duì)列,但是它相對(duì)于傳統(tǒng)的點(diǎn)擊展開(kāi)效果來(lái)說(shuō),圖文依次停頓效果能按照一定的動(dòng)畫(huà)時(shí)長(zhǎng),有節(jié)奏的展開(kāi),符合用戶(hù)閱讀習(xí)慣,讓用戶(hù)跟隨SVG的步調(diào)進(jìn)行沉浸式閱讀。

03
使用講解

STUDY HARD


此款效果已經(jīng)被很多行業(yè)采用,普適性強(qiáng),比如政務(wù)行業(yè)、科技行業(yè)、彩妝行業(yè)等。唯一要注意的是首先主題要明確,全篇的gif文字圖都應(yīng)該圍繞主題來(lái)展開(kāi),其次就是在圖片設(shè)計(jì)上,要以多種字體、動(dòng)效結(jié)合,錯(cuò)落排列,才能呈現(xiàn)出好的效果。


在135編輯器首頁(yè),選擇左側(cè)菜單欄【SVG編輯器】進(jìn)入。



進(jìn)入網(wǎng)頁(yè)后,選擇【互動(dòng)效果】—組合—圖片依次停頓式展開(kāi)效果,ID:244,詳細(xì)制作教程如下:


教程在這里:點(diǎn)擊查看








文章申明:本文章轉(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)先的在線圖文編輯平臺(tái)原創(chuàng)樣式素材,一鍵套用
筆格設(shè)計(jì)
受歡迎的在線作圖網(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)工具
分享到