當你打開一篇公眾號圖文，發現只有一句話或一張圖片時，也許你會一臉疑惑：這麼簡單的圖文也能推送，還閲讀量 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 圖文排版工具來實現。
如果您有疑問、想法，歡迎一起交流學習。
