GIF圖展示↑

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

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

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

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

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

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

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

小紅書消息：雙層滑動、圖片彈窗

微信消息：音頻海報、多次點擊換圖、圖片彈窗

抖音消息：普通上下滑動

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

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

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

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