【翻書SVG效果】公眾號多圖片創(chuàng)意排版技巧揭秘

探索如何讓公眾號的多圖片排版更具吸引力!本文深入解析了翻書SVG效果,一種能讓圖片內容生動如翻書頁的互動排版技巧。通過具體案例分析和詳細步驟指導,學習如何為醫(yī)療、珠寶等行業(yè)推文增添創(chuàng)意,提升用戶閱讀體驗。掌握這一效果,讓你的公眾號在內容展示上脫穎而出。

大牌案例拆解
翻書效果 

在面對一篇長圖文內容排版時,大家還在用點擊展開或者滑動效果來呈現嗎?是時候做出些改變了,今天介紹的SVG效果將突破大家以往的排版形式,增加排版的創(chuàng)意度,還在等什么?趕緊來看看吧!



01



寫在前面


今天三兒準備了兩篇來自不同公眾號的文章內容,分別是醫(yī)療行業(yè)以及珠寶行業(yè),他們在推文的排版中都用到了翻書SVG效果。他們僅用一個SVG效果就將整篇內容進行呈現,突破了以往推文的展現形式,在面對長篇圖文展示時大家不妨可以嘗試這款效果。



02



內容分析



案例一



gif圖展示

唰——唰——唰——!》

點擊藍色文字跳轉閱讀


這是一篇來自醫(yī)療行業(yè)的推文。這篇推文將牙齦出血的科普文章內容做成了多張圖文,讓用戶在瀏覽的過程中通過點擊圖片獲得新的內容,體驗翻閱書籍的感受。在視覺設計上,圖片中加入了手繪元素和簡短的文字介紹,顯得俏皮可愛。因為有了圖片內容的巧妙設計+SVG效果的應用,讓原本枯燥的科普文章也變得趣味十足。



案例二


gif圖展示

《不懂就問》

點擊藍色文字跳轉閱讀


這是一篇珠寶行業(yè)的推文內容,這篇文章主要介紹了自己品牌的新品珠寶。它將珠寶產品圖與扁平動畫設計相結合做成多張珠寶海報展示圖,并突破以往滑動、輪播的形式,通過翻書SVG效果來呈現。讓原本長篇圖文內容濃縮為一屏展示,并以文案串聯(lián)起每張海報的邏輯,讓用戶隨著文案內容的指引下,以閱讀故事的方式看完整篇內容。


從這兩篇公眾號案例我們可以學習到以下排版思路:


① 在遇到長篇圖文內容時,可以嘗試突破以往的排版方式,利用翻書SVG效果,將文章內容做成圖片形式,并按照一定的邏輯串聯(lián)在一起,從而增加整篇推文的趣味性和可讀性。在圖片設計上要往書籍、報紙、日歷等視覺效果上靠攏,才能更符合翻書效果的動畫特效。


② 除了應用在科普類文章外,品牌宣傳推廣產品,公司年終回顧,政策發(fā)布等場景都可以使用。



03



使用講解


這兩篇案例用到的SVG效果為斜切式翻書效果,ID:238,三兒為大家講解此款效果具體的制作方法。



01
打開SVG編輯器


在SVG頁面的【互動效果】的搜索框輸入238或者是“翻書效果”關鍵詞,放入到編輯頁面。




02
編輯SVG組件


① 依次添加圖片進入SVG效果,每添加一張圖片,就要為該張圖片設置翻頁的控制熱區(qū)。(每張圖片的寬度高度需要保持一致)



② 拖拽紅色虛線調整控制熱區(qū)的范圍,移動熱區(qū)到需要翻頁的位置。



③ 調整SVG組件細節(jié),比如動畫時長,【動畫時長】設置的數字越大,翻頁的速度越慢,【動畫時長】設置的數字越小,翻頁的數字越快。



④ SVG組件制作好之后,選擇右上角【保存】【同步】到微信公眾號后臺即可。






還有什么想看的內容

歡迎在評論區(qū)留言

如果覺得還不錯

記得點贊+在看哦



END





文章申明:本文章轉載自互聯(lián)網公開渠道,如有侵權請聯(lián)系我們刪除
文章評價
登錄后可以評論
立即登錄
分享到