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