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