【公眾號(hào)排版必學(xué)】SVG滑動(dòng)上色效果教程
掌握2025年新媒體運(yùn)營新技能！本文詳細(xì)介紹了如何制作滑動(dòng)上色效果，一種讓大牌青睞的SVG互動(dòng)效果。從素材分析到效果制作，再到實(shí)際案例展示，135編輯器帶你一步步學(xué)習(xí)如何通過點(diǎn)擊換圖豎向移出+底圖固定豎向上滑組件（ID：538）實(shí)現(xiàn)動(dòng)態(tài)上色效果，增強(qiáng)用戶互動(dòng)體驗(yàn)。立即閱讀，為你的內(nèi)容創(chuàng)作增添創(chuàng)意和心意！
本周二三兒在135平臺(tái)賬號(hào)上發(fā)了一篇2024新媒體人年終回顧（傳送門在這里）原以為大家會(huì)被我感人肺腑，幽默風(fēng)趣的自嘲文案打動(dòng)，結(jié)果不愧是咱們新媒體人，一生都在問「效果」怎么做，教程多久出。
單純從視覺效果看本文主要是一個(gè)上滑效果，在滑動(dòng)過程中會(huì)出現(xiàn)「上色」特效，以此強(qiáng)調(diào)或標(biāo)注某些重要信息。若再細(xì)分一點(diǎn)，是點(diǎn)擊「點(diǎn)擊換圖豎向移出+底圖固定豎向上滑」，恰好這也是我們此次使用的效果名稱，組件ID：538。
我們想要制作一個(gè)效果，先要了解效果背后的邏輯。點(diǎn)擊換圖移出好理解，我們需要制作一張點(diǎn)擊前的封面圖、點(diǎn)擊后的封面圖就能實(shí)現(xiàn)換圖效果，至于「移出」屬于程序端，不需要我們考慮。
點(diǎn)擊前封面圖
點(diǎn)擊后封面圖
之后就是滑動(dòng)部分，從視覺直觀上看我們滑動(dòng)的是內(nèi)容層也就是我們需要呈現(xiàn)的部分，上色部分的色塊是固定的也就是我們的背景部分。故上色區(qū)域是背景圖，變化的內(nèi)容是滑動(dòng)圖。
固定背景圖
滑動(dòng)內(nèi)容圖
背景上色演示
對(duì)于需要上色的部分，我們需要給單獨(dú)摳除，形成透明底色。當(dāng)滑動(dòng)到背景上色區(qū)域時(shí)，就會(huì)被預(yù)設(shè)的背景色著色以實(shí)現(xiàn)「上色」效果。
在135編輯器左側(cè)找到「SVG編輯器」入口，進(jìn)入SVG編輯器，選擇「互動(dòng)效果」在搜索框中搜索點(diǎn)擊換圖豎向移出+底圖固定雙層豎滑或組件ID：538.
老規(guī)矩我們?cè)谥谱魉夭牡臅r(shí)候一定要看清楚素材要求，避免到時(shí)候內(nèi)容出現(xiàn)差錯(cuò)，減少不必要的返工。
本效果組件要求：所有素材寬高需要一致。
制作好素材后，我們按照對(duì)應(yīng)的板塊上傳點(diǎn)擊前后的封面圖、固定背景圖、滑動(dòng)內(nèi)容圖即可。
下面我們將為大家展示其他品牌制作上色效果的推文，給大家再打開一點(diǎn)新思路。
01.檸季手打檸檬茶
檸季手打檸檬茶
檸季也是一篇點(diǎn)擊換圖向上切換的效果，但不同的是它在里面嵌套了輪播效果用于商品展示。不過需要注意的是在單層滑動(dòng)布局中，對(duì)素材尺寸要求比較嚴(yán)苛，同時(shí)在部分手機(jī)機(jī)型（系統(tǒng)版本中）在滑到各板塊連接處可能會(huì)出現(xiàn)卡頓現(xiàn)象。
組件：單層豎滑
ID：361
組件：點(diǎn)擊換圖豎向移出+底圖固定雙層豎滑
ID：538
組件：橫向停頓圖片輪播
ID：166
02.全國人大
全國人大
全國人大這一篇回歸滑動(dòng)上色本質(zhì)，沒有額外使用點(diǎn)擊換圖或是嵌套其他效果組件，符合賬號(hào)屬性，簡約、大氣。本篇邏輯就是背景上色層固定，內(nèi)容層滑動(dòng)。這篇難度更多在于設(shè)計(jì)上的巧思，如銜接過渡如何自然、小動(dòng)效制作等。
組件：底圖固定雙層豎滑
ID：201
03.紅動(dòng)粵東創(chuàng)意工作室
紅動(dòng)粵東創(chuàng)意工作室
本篇和全國人大的底層邏輯相同，不過本篇底圖固定背景層是花了心思的，不像以往上色是一個(gè)純色背景，而是帶有一些顏色透明變化的背景，在滑動(dòng)過程中更富有層次感。
固定背景圖
組件：底圖固定雙層豎滑
ID：201
以上就是三兒帶給大家
滑動(dòng)上色創(chuàng)意排版的教程
以及同類排版創(chuàng)意思路
相信大家對(duì)這個(gè)效果
有了新的理解
快動(dòng)手試試吧
創(chuàng)作一篇更富創(chuàng)意和心意的作品
立即登錄
