GIF圖展示↑

點(diǎn)擊跳轉(zhuǎn)原文閱讀

上面兩篇推文都用到了模擬手機(jī)APP消息的SVG創(chuàng)意，兩篇主題內(nèi)容和設(shè)計(jì)風(fēng)格不同，但最終呈現(xiàn)效果都非常不錯(cuò)。我們可以看到這兩篇文章是由多個(gè)SVG交互效果構(gòu)成。比如第一個(gè)案例中有音頻海報(bào)、雙層滑動(dòng)等效果，第二個(gè)案例中用到了多次點(diǎn)擊、圖片彈窗等SVG。這些組件的使用，實(shí)現(xiàn)了1+1>2的疊加效果，不僅讓內(nèi)容展示形式更豐富，而且將內(nèi)容呈現(xiàn)的更全面。

這種模擬手機(jī)消息推送的SVG形式可以說(shuō)是百搭天花板，各行各業(yè)都可以采用這種創(chuàng)意來(lái)做推文，只要有一個(gè)主題，那么就可以結(jié)合各大APP的展示形式，利用SVG效果，通過(guò)放入音頻、圖片、視頻，多角度來(lái)呈現(xiàn)內(nèi)容。這樣無(wú)論是在視覺(jué)效果還是在創(chuàng)意上都可以給用戶眼前一亮的感覺(jué)。在用戶注意力稀缺的當(dāng)下，采用這種創(chuàng)意來(lái)提高推文與用戶之間的互動(dòng)性真的再合適不過(guò)了。

這兩篇推文中用到的主要效果都是點(diǎn)擊直接展開SVG，ID：57，它是控制APP消息展開的關(guān)鍵所在，在此基礎(chǔ)上還分別嵌套了其他組件，這樣才能構(gòu)成一篇效果豐富的推文，關(guān)于推文中具體用到了哪些組件，三兒就來(lái)具體展開說(shuō)說(shuō)。

案例一中使用到的組件分別是無(wú)縫圖，ID：1；點(diǎn)擊直接展開，ID：57；音頻海報(bào)-防誤觸，ID：43；雙層左滑-前景不動(dòng)背景滑動(dòng)，ID：142；圖片彈窗-自定義單個(gè)觸發(fā)區(qū)，ID：54。

案例二中用到的組件分別是點(diǎn)擊直接展開，ID：57；無(wú)縫圖，ID：1；多次點(diǎn)擊換圖，ID：10；圖片彈窗，ID：53；圖片彈窗自定義多個(gè)觸發(fā)區(qū)，ID：55。

從上述案例中三兒總結(jié)了針對(duì)一些APP消息展示形式，我們可以用到的SVG效果組件。

小紅書消息：雙層滑動(dòng)、圖片彈窗

微信消息：音頻海報(bào)、多次點(diǎn)擊換圖、圖片彈窗

抖音消息：普通上下滑動(dòng)

咱們要做這款展示形式，需要用到多張圖片。整體是由下面圖中標(biāo)注的六大部分組成。

第一部分和第六部分其實(shí)是一張圖片，可以用到我們的無(wú)縫圖組件，ID：1；第二、三、五部分使用到了點(diǎn)擊直接展開自定義觸發(fā)組件，ID：57，第四部分用到了圖片彈窗組件，ID：54。如下圖所示??

在使用到點(diǎn)擊直接展開的SVG組件中，我們還可以嵌套其他SVG組件進(jìn)去，比如雙層滑動(dòng)、圖片彈窗-自定義多個(gè)觸發(fā)區(qū)、多次點(diǎn)擊換圖等。

在搭好的SVG組件框架下，我們就只需按照要求來(lái)上傳圖片，調(diào)整細(xì)節(jié)即可。