創(chuàng)意SVG排版：塔斯汀推文案例拆解與互動(dòng)效果制作教程
深入了解塔斯汀如何利用SVG組件打造互動(dòng)性強(qiáng)的推文，引導(dǎo)用戶(hù)一周的解決方案。本文提供詳細(xì)的SVG編輯操作步驟，從選擇組件到同步至公眾號(hào)后臺(tái)的全過(guò)程。學(xué)習(xí)如何將SVG技術(shù)與創(chuàng)意設(shè)計(jì)相結(jié)合，提升你的新媒體內(nèi)容吸引力和用戶(hù)參與度。立即閱讀，掌握制作有趣且互動(dòng)性強(qiáng)的推文技巧。
嗨嘍，寶子們，今天三兒要給大家?guī)?lái)一期大牌案例拆解內(nèi)容，我為各位找到了塔斯汀的推文做展示，接下來(lái)就跟著三兒一起來(lái)看看，他是如何利用SVG創(chuàng)意排版帶我們花式度過(guò)一周的吧！
（來(lái)自塔斯汀公眾號(hào)）
塔斯汀的這篇推文從整體設(shè)計(jì)到創(chuàng)意思路都非常不錯(cuò)，他們以“拯救一周計(jì)劃”為主題，向用戶(hù)展示了如何快樂(lè)度過(guò)一周的方式。通過(guò)利用多次點(diǎn)擊換圖展開(kāi)的SVG組件，引導(dǎo)用戶(hù)不斷點(diǎn)擊切換周一到周末的解決方案，與用戶(hù)形成了良好的互動(dòng)，同時(shí)也宣傳了自己品牌的產(chǎn)品。
塔斯汀這篇文章用到的SVG組件為多次點(diǎn)擊換圖展開(kāi)，ID：112。這個(gè)組件可玩性極高，是一個(gè)寶藏SVG效果。除了做成塔斯汀的這種創(chuàng)意外，該組件還有很多玩法，其中最經(jīng)典的就是輸入密碼解鎖全文。
為了讓大家有更直觀的感受，這里三兒也給大家找了維達(dá)紙業(yè)的案例進(jìn)行展示。
（來(lái)自維達(dá)vinda公眾號(hào)）
這篇文章是維達(dá)520主題推文，他們?cè)陂_(kāi)篇部分設(shè)計(jì)了手機(jī)解鎖界面的視覺(jué)效果，并以0520作為密碼線索，引導(dǎo)用戶(hù)輸入對(duì)應(yīng)文字來(lái)解鎖全文。
從以上這個(gè)SVG組件呈現(xiàn)的兩種推文效果，說(shuō)明了一篇優(yōu)秀的推文內(nèi)容，不只是光靠厲害的SVG組件來(lái)堆砌，而是要學(xué)會(huì)讓SVG組件與主題、版面設(shè)計(jì)相互配合來(lái)呈現(xiàn)。
那么接下來(lái)三兒就來(lái)給大家講解如何制作該效果。
① 首先在編輯器頁(yè)面左側(cè)選擇【SVG編輯器】，進(jìn)入SVG編輯器之后在【互動(dòng)效果】中搜索組件ID：112，名稱(chēng)：多次點(diǎn)擊換圖展開(kāi)，將其放到編輯頁(yè)面。
② 接著放入素材圖片到組件中，塔斯汀的這篇文章在展開(kāi)前首圖部分用到了多張圖片，且都是GIF圖。
③添加完展開(kāi)前的首圖后，就需要為每張圖片設(shè)置觸發(fā)點(diǎn)擊切換的區(qū)域，拖拽紅色虛線區(qū)域，即可改變觸發(fā)區(qū)域的大小和位置，修改完第一張圖片的熱區(qū)后，點(diǎn)擊右上角箭頭進(jìn)行翻頁(yè)，依次為后面的圖片進(jìn)行添加。
④接著我們就需要為組件添加展開(kāi)后的圖片內(nèi)容，點(diǎn)擊【編輯展開(kāi)內(nèi)容】，在這里面根據(jù)自己的需求選擇對(duì)應(yīng)的組件即可。塔斯汀的這篇推文在展開(kāi)后的部分主要添加了無(wú)角標(biāo)小程序以及批量無(wú)縫圖組件。
展開(kāi)后的內(nèi)容添加好之后，選擇右上角的【完成】即可。
⑤整個(gè)SVG組件的內(nèi)容制作好之后，選擇右上角的【同步】【導(dǎo)出】就可以導(dǎo)入到公眾號(hào)后臺(tái)了。
以上就是三兒分享的全部?jī)?nèi)容
如果覺(jué)得還不錯(cuò)
記得點(diǎn)贊+在看哦
如果你還有什么想看想學(xué)的
歡迎在評(píng)論區(qū)留言哦
*本文所涉及的素材僅供學(xué)習(xí)交流使用，侵聯(lián)刪
立即登錄
