用炫酷的黑科技策劃一篇公衆號圖文，閱讀量 10w+ 不是夢

當你打開一篇公衆號圖文，發現只有一句話或一張圖片時，也許你會一臉疑惑：這麼簡單的圖文也能推送，還閱讀量 10 萬+ ？

直到你可愛的小手指點擊了不斷暗示你「戳它」的動畫，你彷彿發現了新大陸：原來圖文還有這種形式存在。

► vivo OriginOS 《我想開了》效果展現

SVG 交互圖文是什麼

在瞭解 SVG 交互圖文以前，咱們先簡單瞭解一下什麼是 SVG 。
SVG 英文全稱爲 Scalable Vector Graphics，即爲可縮放的矢量圖形，是一種圖像文件格式。其具備如下三個特色：

• 一種圖片格式
• 矢量圖，在放大或改變尺寸的狀況下，其圖形質量不會有所損失
• 交互和動畫，能夠實現多種互動效果

那什麼是 SVG 交互圖文？

SVG 交互圖文是經過 SVG+HTML 代碼實現的一種高級排版方式，經過在 SVG 文件中嵌入動畫元素，從而實現具備多種互動效果的圖文。SVG 交互圖文的特色：創意、超清、交互、動態。

SVG 交互圖文其實不算新鮮的技術，早在 2016 年就有相關的應用，只是隨着一個個爆款案例的出現，各大品牌開始發現 SVG 交互圖文的品牌營銷價值，並紛紛嘗試這種圖文新玩法。

經過與品牌契合的創意內容、各式各樣的互動效果、驚豔的視覺效果，以科技感的方式「講故事」（介紹企業或產品和服務）或者「玩遊戲」，將用戶一步步帶入到情境中，引發用戶共鳴，提升用戶對品牌和產品的認知度，從而爲企業塑造一個深刻人心的品牌形象。

SVG 交互圖文的優劣勢

優點

1）相較於傳統圖文，SVG 交互圖文更具備互動性和趣味性，能夠給讀者帶來不同的閱讀體驗，既能減小讀者因閱讀疲勞而退出圖文，也能加深讀者對內容的印象。
2）相較於 H5，SVG 交互圖文形態更輕，更適合應用在公衆號圖文中。
3）SVG 交互圖文更注重創意與風格，能夠融合企業的品牌形象、產品理念，並以直擊人心的方式傳遞給用戶，達到出乎意料的品牌營銷效果。

劣勢

1）製做一篇 SVG 交互圖文須要策劃、編輯、設計、開發人員協做完成，溝通成本和製做成本高，製做週期長。

SVG 交互圖文的互動形式

SVG 交互圖文能夠分爲豎版長圖和橫版長圖，常見的互動形式有點擊、長按、滑動。

01 點擊

當讀者點擊某個區域或元素以後，畫面中會發生相應的變化，好比切換圖片、放大圖片、拉伸長圖等。「點擊」是較爲常見的交互形式，一般須要經過指引來讓讀者完成點擊動做，但過多的文案又會影響視覺效果，所以能夠嘗試使用「符號」來替代文字指引。

👉 案例展現：《我，在 iPhone 裏發現了一座黃色小房子...》

案例解析：

• 點擊切換圖片：讀者點擊閃爍的「符號」，便可查看下一個內容，一張張簡潔的圖片一步步帶領讀者走進情景中。
• 點擊拉伸長圖：當讀者已經產生其興趣後，點擊拉伸長圖，展開更多內容，這種內容呈現方式，更能避免枯燥感，也能激發讀者更強烈的興趣。

02 長按

當讀者長按某個區域或元素以後，畫面中會發生相應的變化，好比長按切換、長按實現圖片 360° 旋轉（相似於三維動畫效果）和抽籤等。千篇一概的「點擊」交互容易缺少特點，配合「長按」、「鬆手觸發」交互形式，會讓圖文更有趣味性。

👉 案例展現：《騰訊小馬哥的 QQ 號是多少？》

案例解析：

• 長按切換，鬆手回彈到最初狀態：案例爲問答類，經過長按出現答案提示，能夠更好的引導讀者進入下一步。

03 滑動

當讀者左右上下滑動圖片時，畫面中的一些元素會跟隨移動。常見的滑動樣式有：

• 雙層滑動：背景不動，頂層透明圖片滑動
• 穿透滑動：前景不動，底層背景滑動
• 夾層滑動：前景背景都不動，中間內容滑動

滑動經常使用於故事情景圖片替換或問答中的揭開答案等場景，讓原有的內容更充滿神祕感，滑動也常常應用在橫版的故事推進中。

👉 案例展現：《你覺得咱們用「Apple 全家桶」是爲了炫富嗎？》

案例解析：

• 雙層滑動：將產品與多個應用場景結合，經過滑動圖片更換不一樣職業的用戶的故事，有趣的展現了產品的價值。

實現一篇高質量 SVG 交互圖文的關鍵因素

01 創意+風格+交互，缺一不可

策劃一個與品牌契合度高的創意內容，是製做 SVG 交互圖文的重中之重，但設計風格和流暢的交互也是缺一不可的。以抓住眼球的創意切入點，讓全部交互動做都天然而然，讓全部內容都有條理的呈現出來，纔可以真正引發讀者關注、產生共鳴。企業推送 SVG 交互圖文時，不只要重視內容，也要重視與讀者相匹配的創意和體驗感。

02 團隊協做能力

SVG 交互圖文是須要品牌、策劃、編輯、設計、開發整個團隊協做完成，有效的需求溝通，規範的工做流程，才能高效地完成一篇交互圖文，達到預期的營銷效果。

愛範兒、知曉雲團隊助力 Apple、OPPO、華爲、廣汽傳祺、滴滴等品牌打造了多個定製化 SVG 交互圖文，創造了多個驚豔的圖文交互效果。這些是須要企業與策劃開發團隊投入時間和精力去完成。基礎的 SVG 交互樣式，如在傳統圖文中插入「點擊換圖、圖片輪播、點擊顯示、點擊跳轉」等交互，也是能夠經過 SVG 圖文排版工具來實現。

若是您有疑問、想法，歡迎一塊兒交流學習。