告別單一動畫！用135編輯器AI組合SVG組件，打造沉浸式敘事推文
想知道刷屏的“大山里的詩”SVG推文如何制作？本文深度復盤該案例，不僅詳解“上色效果”的SVG教程，更提煉出一套“目的-情緒-交互”的互動設計思維方法論，并手把手教你用135編輯器AI組合組件實現(xiàn)，讓你掌握打造SVG創(chuàng)意排版的核心能力。
周三，三兒在135平臺發(fā)了一篇推文
關于大山里的孩子寫的詩
山里的小朋友
缺的不是夢
是能托舉夢想的書本
于是135編輯器AI與小編們
一拍即合，做一件「小事」
為孩子們籌書
活動發(fā)起后
我們收到了來自五湖四海的小編們
寄來的書籍??「活動進度看這里」
我們把他們的故事
用SVG推文展示
評論區(qū)熱鬧極了
有人夸小朋友寫得真棒！
也有人盯著排版問
“這篇SVG咋做的，想要學習”
別著急，三兒快馬加鞭給大家寫教程
那么吸睛又出彩的「上色」效果
是怎么做的呢
快來看看吧
*思路分析
為什么要選擇這個效果呢？
我們想要讓用戶「沉浸」在內(nèi)容中，盡量不被額外的交互動作打擾，而滑動是基礎的交互動作，沒有學習成本，老少咸宜。但如果只是「滑動」又會顯得太常規(guī)、太單調(diào)。
結合本文主題，我們想要給孩子們點亮「希望」那用「上色」來呈現(xiàn)就很合適，但如果就這樣直愣愣地展示，未免太過直白。所以我們決定先把上色內(nèi)容「藏」起來，放進「展開」中，緩緩遞進豐富整篇內(nèi)容的層次，讓用戶與文章交互的每一步都「意料之外」但「情理之中」
基于此我們就能確定需要使用什么效果「點擊展開」+「雙層滑動」，確定好大方向后我們再根據(jù)個人喜好選擇具體的效果。本文選擇的是「點擊回縮展開(全屏)（自定義觸發(fā)））Id：110」「雙層滑動+底層固定頂層上下滑動Id：201」
01.進入SVG編輯器
1.從135編輯器AI左側找到「SVG編輯」，點擊進入SVG編輯器頁面。
2.進入SVG編輯器頁面后，在左側選擇「SVG效果」，并在其搜索框中搜索「點擊回縮展開（全屏）（自定義觸發(fā)）」組件ID：110。
在使用組件的時候，一定要看清楚素材要求、素材要求、素材要求。
按照需求添加首圖，調(diào)整展開動畫時長。
點擊「編輯展開內(nèi)容」添加「雙層滑動+底層固定頂層上下滑動」組件Id：201
我們上傳背景圖并按順序添加滑動圖即可，記得看素材要求。
背景圖
（部分）滑動鏤空圖
*注意上色部分需要在作圖時和設計師溝通清楚，完成滑動圖的鏤空。
做完后可選擇右上角的「同步」填好標題、封面圖同步至微信公眾號后臺。
如果需要添加到135編輯器頁面中，則選擇右上角的「導出」，選擇復制代碼到135編輯器
1.大家看完教程后，一定會覺得本文的難點并不在排版上，而在創(chuàng)意、設計、文案打磨上。排版反而成了最不耗時的部分。而135編輯器AI正是想通過簡單操作讓大家輕松排版，從而有更多時間投入在創(chuàng)意、文案打磨。
2.好的作品，從不是單一交互效果的堆砌。它像一座建筑——好的設計是出彩的外立面，扎實的內(nèi)容是穩(wěn)固的地基，SVG不是雪中送炭而是錦上添花。
3.使用SVG不是為了盲目炫技，而是讓內(nèi)容更有趣、更易于傳播。
以上就是三兒分享的全部內(nèi)容了
如果覺得還不錯
記得點贊+在看
如果還有什么想看想學的
歡迎在評論區(qū)留言哦
祝你擁有美好的一天
