【翻書SVG效果】公眾號(hào)多圖片創(chuàng)意排版技巧揭秘
探索如何讓公眾號(hào)的多圖片排版更具吸引力！本文深入解析了翻書SVG效果，一種能讓圖片內(nèi)容生動(dòng)如翻書頁的互動(dòng)排版技巧。通過具體案例分析和詳細(xì)步驟指導(dǎo)，學(xué)習(xí)如何為醫(yī)療、珠寶等行業(yè)推文增添創(chuàng)意，提升用戶閱讀體驗(yàn)。掌握這一效果，讓你的公眾號(hào)在內(nèi)容展示上脫穎而出。
在面對(duì)一篇長(zhǎng)圖文內(nèi)容排版時(shí)，大家還在用點(diǎn)擊展開或者滑動(dòng)效果來呈現(xiàn)嗎？是時(shí)候做出些改變了，今天介紹的SVG效果將突破大家以往的排版形式，增加排版的創(chuàng)意度，還在等什么？趕緊來看看吧！
今天三兒準(zhǔn)備了兩篇來自不同公眾號(hào)的文章內(nèi)容，分別是醫(yī)療行業(yè)以及珠寶行業(yè)，他們?cè)谕莆牡呐虐嬷卸加玫搅朔瓡鳶VG效果。他們僅用一個(gè)SVG效果就將整篇內(nèi)容進(jìn)行呈現(xiàn)，突破了以往推文的展現(xiàn)形式，在面對(duì)長(zhǎng)篇圖文展示時(shí)大家不妨可以嘗試這款效果。
gif圖展示
點(diǎn)擊藍(lán)色文字跳轉(zhuǎn)閱讀
這是一篇來自醫(yī)療行業(yè)的推文。這篇推文將牙齦出血的科普文章內(nèi)容做成了多張圖文，讓用戶在瀏覽的過程中通過點(diǎn)擊圖片獲得新的內(nèi)容，體驗(yàn)翻閱書籍的感受。在視覺設(shè)計(jì)上，圖片中加入了手繪元素和簡(jiǎn)短的文字介紹，顯得俏皮可愛。因?yàn)橛辛藞D片內(nèi)容的巧妙設(shè)計(jì)+SVG效果的應(yīng)用，讓原本枯燥的科普文章也變得趣味十足。
gif圖展示
點(diǎn)擊藍(lán)色文字跳轉(zhuǎn)閱讀
這是一篇珠寶行業(yè)的推文內(nèi)容，這篇文章主要介紹了自己品牌的新品珠寶。它將珠寶產(chǎn)品圖與扁平動(dòng)畫設(shè)計(jì)相結(jié)合做成多張珠寶海報(bào)展示圖，并突破以往滑動(dòng)、輪播的形式，通過翻書SVG效果來呈現(xiàn)。讓原本長(zhǎng)篇圖文內(nèi)容濃縮為一屏展示，并以文案串聯(lián)起每張海報(bào)的邏輯，讓用戶隨著文案內(nèi)容的指引下，以閱讀故事的方式看完整篇內(nèi)容。
從這兩篇公眾號(hào)案例我們可以學(xué)習(xí)到以下排版思路：
① 在遇到長(zhǎng)篇圖文內(nèi)容時(shí)，可以嘗試突破以往的排版方式，利用翻書SVG效果，將文章內(nèi)容做成圖片形式，并按照一定的邏輯串聯(lián)在一起，從而增加整篇推文的趣味性和可讀性。在圖片設(shè)計(jì)上要往書籍、報(bào)紙、日歷等視覺效果上靠攏，才能更符合翻書效果的動(dòng)畫特效。
② 除了應(yīng)用在科普類文章外，品牌宣傳推廣產(chǎn)品，公司年終回顧，政策發(fā)布等場(chǎng)景都可以使用。
這兩篇案例用到的SVG效果為斜切式翻書效果，ID：238，三兒為大家講解此款效果具體的制作方法。
在SVG頁面的【互動(dòng)效果】的搜索框輸入238或者是“翻書效果”關(guān)鍵詞，放入到編輯頁面。
① 依次添加圖片進(jìn)入SVG效果，每添加一張圖片，就要為該張圖片設(shè)置翻頁的控制熱區(qū)。（每張圖片的寬度高度需要保持一致）
② 拖拽紅色虛線調(diào)整控制熱區(qū)的范圍，移動(dòng)熱區(qū)到需要翻頁的位置。
③ 調(diào)整SVG組件細(xì)節(jié)，比如動(dòng)畫時(shí)長(zhǎng)，【動(dòng)畫時(shí)長(zhǎng)】設(shè)置的數(shù)字越大，翻頁的速度越慢，【動(dòng)畫時(shí)長(zhǎng)】設(shè)置的數(shù)字越小，翻頁的數(shù)字越快。
④ SVG組件制作好之后，選擇右上角【保存】【同步】到微信公眾號(hào)后臺(tái)即可。
還有什么想看的內(nèi)容
歡迎在評(píng)論區(qū)留言
如果覺得還不錯(cuò)
記得點(diǎn)贊+在看哦
立即登錄
