這里我為大家找了一篇塔斯汀公眾號(hào)的推文內(nèi)容來(lái)進(jìn)行案例拆解。在推文中他們的長(zhǎng)圖設(shè)計(jì)都與SVG效果巧妙的結(jié)合起來(lái)，將領(lǐng)優(yōu)惠券與產(chǎn)品宣傳做成游戲的形式，讓用戶在帶著好奇心瀏覽完全文。

點(diǎn)擊圖片跳轉(zhuǎn)閱讀

這篇推文中用到多種SVG效果進(jìn)行組合，再配上卡通的版面設(shè)計(jì)，可愛(ài)十足。首先進(jìn)入到推文后映入眼簾的就是連續(xù)翻頁(yè)再展開(kāi)SVG效果，ID：152：在整體設(shè)計(jì)上，首圖和翻頁(yè)圖以卡通風(fēng)格為主，視覺(jué)效果上模擬了游戲界面的樣式，比如游戲進(jìn)度條、gif圖，與正文的闖關(guān)設(shè)置相呼應(yīng)，讓原本直白普通的領(lǐng)券過(guò)程變得很有意思。

正文內(nèi)容部分，通過(guò)3個(gè)版塊串連在一起，做成了闖關(guān)的形式，前兩個(gè)部分都用到了多區(qū)域彈出海報(bào)自動(dòng)收回SVG效果，ID：195，通過(guò)該效果分別介紹了周二會(huì)員日的詳情，以及漢堡系列產(chǎn)品，而在第三部分則是利用多區(qū)域觸發(fā)引導(dǎo)跳轉(zhuǎn)SVG，ID：233，引導(dǎo)用戶跳轉(zhuǎn)小程序領(lǐng)優(yōu)惠券。

整體上看這篇文章并沒(méi)有用到特別酷炫的SVG效果，都是一些我們常見(jiàn)的SVG組件，但是他們卻能巧妙地將SVG與領(lǐng)券嘗鮮的主題相結(jié)合，讓每個(gè)SVG組件都能恰到好處發(fā)揮其價(jià)值。從中我們也可以看出，一篇優(yōu)秀的推文內(nèi)容，不是光靠厲害的SVG組件來(lái)堆砌，而是要將SVG組件與主題、版面設(shè)計(jì)相結(jié)合來(lái)完成的，畢竟我們的推文最終目的還是在于向用戶傳遞實(shí)質(zhì)性的價(jià)值。

在創(chuàng)意設(shè)計(jì)上來(lái)看，明確主題后，可以將推文內(nèi)容分版塊以SVG來(lái)呈現(xiàn)，比如像上述文章圍繞領(lǐng)券嘗鮮主題，以闖關(guān)形式呈現(xiàn)，做了多組不同的游戲內(nèi)容設(shè)計(jì)，或者是圍繞時(shí)下流行話題，比如：MBTI、年輕人奇葩的購(gòu)物習(xí)慣等展開(kāi)話題，通過(guò)對(duì)比方式，運(yùn)用滑動(dòng)、點(diǎn)擊換圖等SVG，做相應(yīng)的版塊設(shè)計(jì)。正文內(nèi)容要始終圍繞主題而展開(kāi)，這樣才能形成一篇完整的推文。

在SVG頁(yè)面的【互動(dòng)效果】的搜索框輸入195或者是“多區(qū)域彈出”關(guān)鍵詞，放入到編輯頁(yè)面。