公眾號排版如何做出高級感？SVG實現(xiàn)局部點擊換圖效果教學(xué)
羨慕“局部氣候調(diào)查組”的交互長圖？本文手把手教你拆解案例，利用135編輯器SVG功能，實現(xiàn)局部點擊換圖的電影感效果，讓排版立刻高級。點擊立即學(xué)！
相信每一位新媒體人發(fā)問：“有什么優(yōu)質(zhì)公眾號推薦”時，「局部氣候調(diào)查組」一定位列其中。“局部氣候調(diào)查組”以長圖文敘事形式展示內(nèi)容，將嚴(yán)謹(jǐn)?shù)目茖W(xué)知識與藝術(shù)創(chuàng)意完美融合。他們擅長用"一鏡到底"的視覺手法營造電影感體驗，搭配荒誕幽默的對白與嚴(yán)謹(jǐn)科普形成獨特反差萌。
SVG交互技術(shù)的巧妙運用，配合"或抽象或?qū)憣?quot; 的插畫，讓復(fù)雜知識變得生動有趣。作品如同小說般引人入勝，金句頻出，在科普傳播領(lǐng)域獨樹一幟，為讀者打開了認(rèn)識世界的全新視角。
恰巧，近日有小伙伴瀏覽「局部氣候調(diào)查組」時，看到一篇推文，甚是喜歡。想要學(xué)習(xí)如何制作，那么今天就讓我們開啟品牌排版學(xué)習(xí)之旅。
*思路分析
讓我們簡單分析下，本文核心是「點擊」動作，每點擊一次就會換一張圖。
這時候有朋友說：“這不就是點擊換圖嗎？不難呀”
沒錯，這是「點擊換圖」但又和日常的不同。平日點擊換圖多是整塊區(qū)域整體換圖，而「局部」換圖是整體區(qū)域中部分內(nèi)容換圖，這就是它的巧思。
如何實現(xiàn)？
很簡單：利用一行多列布局效果在不同的區(qū)域中插入點擊換圖效果，就能實現(xiàn)局部換圖。
1、從135編輯器左側(cè)找到「SVG編輯」，點擊進(jìn)入SVG「編輯器頁面」
2、進(jìn)入SVG編輯器頁面后，在左側(cè)選擇「SVG效果」在搜索框中搜索：基礎(chǔ)布局一行四列，組件ID：350
3、選擇其中一個布局，點擊頁面右側(cè)的「編輯基礎(chǔ)布局」
4、進(jìn)入后選擇「點擊換圖」組件ID：6。如果該區(qū)域不需要換圖，我們選擇無縫圖（組件ID：1）添加即可。
*注意：點擊換圖的前后圖寬高需保持一致，無縫圖高度需與點擊換圖一致。
1、三兒使用135插件下載了「局部」這篇文章的所有素材圖給大家做案例展示，大家也可以利用插件提取公眾號推文素材做練習(xí)使用。
注意：圖片提取僅作教學(xué)練習(xí)使用，不可擅自商用！
「局部氣候調(diào)查組」這篇原文有三百多張圖，這里僅做部分效果展示。
1、我們回頭看，「局部氣候調(diào)查組」并沒有用什么復(fù)雜的效果，而是將布局與點擊換圖完美配合，搭配他們精良的畫面，有趣的文案，最終呈現(xiàn)這篇佳品。
框架展示
2、好的作品，從不是單一交互效果的堆砌。它像一座建筑——好的設(shè)計是出彩的外立面，扎實的內(nèi)容是穩(wěn)固的地基，SVG不是雪中送炭而是錦上添花。
3、在后續(xù)內(nèi)容創(chuàng)作中，我們不妨試試?yán)貌季执钆浜唵涡Ч?，如：滑動、輪播、點擊換圖、多次點擊換圖等。讓效果為內(nèi)容賦能，使用簡單效果或許能讓用戶更專注內(nèi)容本身。
4、使用SVG不是為了盲目炫技，而是讓內(nèi)容更有趣、更易于傳播。
以上就是三兒分享的全部內(nèi)容了
如果覺得還不錯
記得點贊+在看
互動時間
「你在作品里用過最難忘的交互是什么？」
歡迎在評論區(qū)聊聊你的經(jīng)驗
祝你擁有美好的一天
