《財富》500強的品牌是如何制作交互圖文的？
SVG交互圖文到底都有什么效果？
SVG交互圖文的設計可以是什么風格？
通過SVG交互圖文又能實現怎樣的創意？
……
看一看大公司的案例或許你能得到答案。
7月12日，《財富》雜志推出了2022年中國500強榜單（詳情見文末「閱讀原文」），其中超過100家與i排版有過SVG交互圖文的合作。
這里給大家整理了其中15個大公司旗下品牌的SVG交互圖文，有的交互比較新穎，有的設計非常突出，有的創意讓人讓人眼前一亮，看完總會有些收獲。
簡單的在本文就能直接查看，一些復雜的則需要跳轉原文體驗哦。
1
平安人壽
▲GIF演示
點此查看原文
點擊播放音頻同時圖文展開的交互，加上模仿直播間的設計，引導大家進入真實的直播間。用圖片自轉的效果發起福利活動，有效提高了互動率。
該效果需定制。
2
騰訊
點此查看原文面對一個個死亡現場，騰訊醫典用多個「點擊切換圖片」和「點擊切換圖片后展開」的交互效果，引導用戶探索破解死亡原因，很是具有吸引力，同時為大家普及了相關醫療知識。
該交互對應編輯器模板：組合：點擊切換圖片+展開(有觸發區) 編號：10057（組合）
3聯想
▲GIF演示點此查看原文
點擊按鈕，一根流動的細線向前延伸，細線經過之處畫面浮現，引導用戶觀看，巧妙串聯起20年的大事記。
該效果需定制。
4
美的
點此查看原文
美的用趣味漫畫搭配「點擊彈窗」和「點擊切換圖片后展開」的交互對比了三種洗衣機清洗方法的利弊，有效宣傳了自己的深度清洗服務。
該交互對應編輯器模板：
組件：點擊-懸浮彈窗(無限次彈出,相同關閉位置) 編號：11114（組件）
5
小米
▲GIF演示點此查看原文
本文使用了常見的「點擊伸縮式展開」交互，點擊展開后獨特大氣的畫風很容易抓住用戶的眼球，圖文長但不枯燥，文案和畫面讓用戶深深感動。
該交互對應編輯器模板：
組合：點擊伸縮式展開(無抖動) 編號：11224（組合）
6
京東方BOE
點此查看原文
打開圖文加載完畢后，動畫自動播放，停留至最后一幀畫面圖文展開。展開后的內容是此次招聘的詳細介紹，包括宣傳視頻、事業群介紹等信息，部分文字和人物形象加入了動態效果，其中事業群的介紹使用了「點擊展開，點擊收回」的交互，避免內容顯得太過冗長。
該效果需定制。
7
格力
點此查看原文
把一年分為春、夏、秋、冬四季，每一個季節對應一個「點擊切換圖片后展開」的效果，闡述成就又不失溫情。
該交互對應編輯器模板：
組合：點擊切換圖片+展開(有觸發區)
編號：10057（組合）
8
滴滴
點此查看原文
整體來看也是一個「點擊伸縮式展開」的交互效果，但配合魔法棒的創意讓這個效果更顯合理，文章主題與交互效果結合得非常合適。
該效果需定制。
9
民生信用卡
點此查看原文
音頻鋪墊氛圍，一幅長卷，十大名畫，點擊解鎖名畫主題信用卡同時出現辦卡通道，既展示了信用卡設計之美，又傳達了設計靈感來源，對用戶具有更強的辦卡吸引力。
該效果需定制。
10
長城汽車
點此查看原文
輸入密碼解鎖圖文，長城汽車用交互在520當天展示了自己的獨特浪漫。
該交互對應編輯器模板：
組合：解鎖展開(可設置點擊動畫&觸發區域)
編號：10473（組合）
11
伊利
點此查看原文
通過層層展開的交互一步步揭曉數字藏品，能引起用戶好奇心，第一次展開同時播放音頻具有渲染氛圍的作用。
該效果需定制。
12
貝殼找房
點此查看原文
展開中嵌套3個點擊播放音頻同時展開的效果，音頻具有更強的感染力，可以更好地吸引用戶點擊閱讀故事全文。
該效果需定制。
13
云南白藥
點此查看原文
開頭通過連續點擊切換圖片的效果一步步引導用戶進入故事之中，接著圖文展開“進入游戲”，并在“游戲”中植入自己的產品，很是有趣。像素風的設計也非常可愛。
該交互對應編輯器模板：
組合：連續點擊切換圖片+消失展開(有觸發區)
編號：10469（組合）
14
蔚來
點此查看原文
本文用一個情景式選擇題開篇，錯誤選項使用了「點擊展開，點擊收回」的交互，正確選項使用了「層層展開」的交互，將知識點一點一點傳達給用戶，很是優雅。
該交互對應編輯器模板：
組件：點擊展開,點擊收回(無限循環)
編號：10237（組件）
組件：層層展開
編號：10410（組件）
15
長電科技
點此查看原文
年度報告不再是長圖文，長電科技將長圖切分為多個短圖，用「點擊飄落切換圖片」的方式讓用戶一頁一頁翻閱查看，科技感滿滿。
詳細的2022年《財富》中國500強排行榜單大家可以點擊文末「閱讀原文」查看，如果你的公司也在榜單之中，可以備注「500強」添加下方微信，免費領取品牌時光機SVG案例庫一年的會員哦。
▲長按掃碼識別
目前案例庫總案例數已達60000+，其中7800+案例支持一鍵還原，制作同款效果非常方便。
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）