2021年Top20品牌SVG交互排版圖文案例盤點
從2017年i排版（http://x.iPaiban.com）在全國首次推出公眾號圖文的商業化SVG交互排版服務，已經累計服務超過800個頭部品牌，4年多來SVG交互圖文已經成為品牌大事件、重要節日必備形式，SVG交互文章的閱讀量、互動量、轉化率均有明顯的提升，頭部品牌公眾號最近幾年的SVG交互數量均有300%-500%的高速年增長。
每年年初，我們都會盤點一部分上一年的優秀案例出來。
剛過去的一年，又有哪些優秀的定制作品出現呢？
2021年SVG交互排版圖文案例Top20盤點來了！
*按推送時間排序
*長按掃碼查看相應案例
*「i排版」查看更多案例和教程，定制請咨詢玉兔微信（ID：playhudong15）
1.平安人壽
交互效果：點擊展開同時播放音頻+圖片自轉
難度等級：★★★★☆
圖片、聲音和交互結合，模擬直播間場景，點擊展開后繼續引導用戶進入真實直播間。同時利用圖片自轉效果發起互動活動，參與度非常高。
拓展案例：模擬手機操作+點擊展開
2.度小滿
交互效果：長按動畫
難度等級：★★★★☆
元宵節通過引導用戶長按圖片“制作”元宵讓用戶感受到濃濃的節日氛圍，最后送上品牌節日祝福。長按蓄力的玩法還適用于踩油門、放煙花等場景，配合一定的互動活動效果更佳。
3.雷克薩斯中國
交互效果：音頻答題玩法
難度等級：★★★★☆
鏈接：《聲控福利！ES 300h車內的這些聲音你聽到過嗎？》
讓用戶聽聲音來答題，新鮮有趣。打開音頻前還有一個點擊關燈頁面變暗的效果，能讓用戶更專心聆聽音頻內容，造足氛圍。
拓展案例：
4.星巴克中國
交互效果：連續點擊切換圖片后伸縮展開
難度等級：★★★★☆
通過連續點擊切換圖片一步步向用戶展示新店產品，最后一次點擊圖文伸縮展開，進行全面介紹，圖文末放置新店超鏈接圖片，點擊無需確認即可跳轉。
5.i排版
交互效果：貪吃蛇
難度等級：★★★★★
圖文內就能玩貪吃蛇游戲，可選難度，方向鍵真實反饋，自動計算分數。將貪吃蛇或小球換成任意商品非常適合宣傳新品，曾風靡一時。（目前平臺已經禁止）
拓展案例：
6.高瓴時間
交互效果：點擊展開+圖片自動顯現
難度等級：★★★★☆
打開該圖文的第一時間就通過畫面的逐步自動顯現吸引用戶視線跟隨閱讀。在整個過程中，用戶需要進行兩次交互，開頭點擊展開和結尾點擊顯現，給予了一定的參與感。
7.BOE招聘
交互效果：圖文自動展開+點擊展開+圖片浮動
難度等級：★★★★☆
鏈接：《Hi YOU | 京東方2022全球校園招聘正式啟動》
打開圖文，開頭華麗順暢的動畫第一時間就抓住用戶眼球，讓用戶對展開后的內容充滿興趣。展開后還有展開以及部分浮動元素，信息很多卻不顯冗長。
8.QQ星
交互效果：點擊選擇移動元素
難度等級：★★★★☆
點擊不同的移動元素，出現對應題目讓用戶作答，作答成功出現對應產品。簡單的互動讓人對產品印象深刻，甚至有了購買沖動。
9.SandroParis
交互效果：娃娃機
難度等級：★★★★☆
經典的娃娃機玩法，游戲結果具有一定的隨機性，給用戶很強的參與感。還能配合做福利活動，增加圖文互動率。
10.MichaelKors
交互效果：游戲挑戰+密碼展開
難度等級：★★★★★
鏈接：《絕對機密》
想要查看“機密文件”，需要挑戰4個小游戲獲取密碼，趣味十足，具有很強的參與性。
11.360安全衛士服務號
交互效果：復雜軌跡移動
難度等級：★★★★★
多關卡游戲通過復雜軌跡移動串聯在一起，游戲過程既讓用戶了解了程序員生活又植入品牌產品，最后送上祝福，一舉多得。
12.騰訊醫典
交互效果：平級展開
難度等級：★★★★☆
科普不一定就是枯燥的。這篇圖文中寫實的場景畫面配合多個展開和點擊顯現效果，讓科普有力又有趣。
13.小米公司
交互效果：多點彈窗
難度等級：★★★★☆
可以重復點擊的彈窗效果，并在其中埋有彩蛋。最后一次點擊引出主要信息，達到宣傳的目的。
14.雀巢咖啡中國
交互效果：可收回點擊展開+可返回點擊切換圖片
難度等級：★★★★★
可收回點擊展開+可返回點擊切換圖片，展開前是一幅完整畫面，一屏便隱藏了9個故事。
15..MAJE官方
交互效果：點擊隨機播GIF
難度等級：★★★★☆
鏈接：《M bag五周年福利大放送 | Ready？GO！》
俄羅斯方塊的游戲過程是GIF，但不同用戶點擊同一位置會隨機看到不同的GIF，GIF結束出現對應的不同產品，引導用戶購買。
16.愛范兒
交互效果：點擊彈出圖片+圖文展開
難度等級：★★★★★
鏈接：《放松，換個角度試試》
圖文開頭動感的畫面第一時間抓住用戶眼球，然后通過多個點擊彈出圖片展示用戶痛點，多層嵌套展開展現產品優勢，讓人輕松get。
17.央視新聞
交互效果：點擊展開+自動輪播banner
難度等級：★★★★☆
新聞日歷也可以動態展現。長長的日歷隱藏在展開之中，不給用戶閱讀壓力。每一個重要節日都通過自動輪播的效果展示對應畫面，讓節日更具象。
18. 民生信用卡
交互效果：SVG軌跡移動
難度等級：★★★★☆
本文通過軌跡移動串聯起各種優惠活動，同時畫面與新年主題結合緊密，簡單干脆又不失趣味。
19.GE中國
交互效果：點擊打印同時圖文展開+點擊彈窗
難度等級：★★★★☆
點擊打印一張圖片，圖文展開后點擊不同膠片顯現對應事件彈窗，互動中透露著情懷。
20.李寧
交互效果：放映機
難度等級：★★★★☆
鏈接：《攜帶所有美好，出發！》
放映機效果在本文文末，看著一個個溫情故事像放電影一樣慢慢在眼前滑過，很有儀式感。放映結束后出現互動話題，效果拉滿。
附：
SVG交互排版認準 iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領取3天企業標準版會員體驗權，以及22個常用必備組件的大禮包（1年）。
「i排版」查看更多案例和教程，定制請咨詢玉兔微信（ID：playhudong15）。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）