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