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