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