《夏日SVG交互圖文案例合集》
炎炎夏日，想要為公眾號(hào)文章增添一抹清涼與趣味？
今天為大家整理了8篇SVG交互圖文案例，一起來(lái)看看吧！
它們分別來(lái)自虎嗅APP、Tempo得寶、美團(tuán)外賣、AcquaDiParma帕爾瑪之水、萬(wàn)達(dá)集團(tuán)、潤(rùn)百顏、巴拉巴拉官方服務(wù)號(hào)、美團(tuán)Meituan公眾號(hào)。
01
虎嗅APP
《這個(gè)夏天怎么了？》
▲GIF演示
「長(zhǎng)按」模擬降溫，隨著溫度降低，卡通人物形象也由焦慮難受變?yōu)殚_(kāi)心舒適，吸引大家「點(diǎn)擊伸縮式展開(kāi)」降溫產(chǎn)品榜單的介紹。
該交互需定制
02
Tempo得寶
《[點(diǎn)擊查收]夏日宅家清涼法則》
▲GIF演示
多個(gè)平級(jí)「點(diǎn)擊切換展開(kāi)，點(diǎn)擊收回」介紹夏日宅家紙巾好物集結(jié)，借此宣傳Tempo 得寶 X618 優(yōu)惠福利。
交互對(duì)應(yīng)編輯器組件/組合
組件：點(diǎn)擊切換展開(kāi),點(diǎn)擊收回(無(wú)限循環(huán))
編號(hào)：10786（組件）
03
美團(tuán)外賣
《終于 我全敲完了！》
▲GIF演示
「點(diǎn)擊消失展開(kāi)」夏日酷熱難耐！快來(lái)化身敲冰人，參與美團(tuán)夏日敲敲樂(lè)挑戰(zhàn)，借此宣傳美團(tuán)外賣。
該交互需定制
04
AcquaDiParma帕爾瑪之水
《一鍵入庫(kù)，就這么簡(jiǎn)單》
▲GIF演示
「拖動(dòng)追光燈點(diǎn)擊伸縮式展開(kāi)」夏日公路旅行為場(chǎng)景，推廣品牌車載擴(kuò)香器，借此宣傳帕爾瑪之水，吸引讀者前往購(gòu)買。
交互對(duì)應(yīng)編輯器組件/組合
組合：追光燈+點(diǎn)擊伸縮式展開(kāi)
編號(hào)：11601（組合）
組件：雙層滑動(dòng)-前景左滑(自動(dòng)對(duì)齊)
編號(hào)：10270（組件）
05
萬(wàn)達(dá)集團(tuán)
《多巴胺夏天啥模樣？》
▲GIF演示
「自動(dòng)跳舞展開(kāi)」萬(wàn)達(dá)寶貝王和350萬(wàn)孩子進(jìn)行多巴胺暑假的瞬間，從而吸引大家參與萬(wàn)達(dá)寶貝王運(yùn)動(dòng)會(huì)。
交互對(duì)應(yīng)編輯器組件/組合
組合：自動(dòng)-跳舞展開(kāi) (連續(xù)伸縮展開(kāi))
編號(hào)：11653（組合）
06
潤(rùn)百顏
《加入夏日CITY WALK，走來(lái)走去找快樂(lè)！》
▲GIF演示
「點(diǎn)擊自動(dòng)層層展開(kāi)」各個(gè)城市的行走貼士和護(hù)膚建議，吸引大家購(gòu)買相應(yīng)產(chǎn)品。
交互對(duì)應(yīng)編輯器組件/組合
組件：點(diǎn)擊+自動(dòng)層層展開(kāi)
編號(hào)：11369（組件）
組件：遮罩
編號(hào)：10829（組件）
07
巴拉巴拉官方服務(wù)號(hào)
《多巴胺夏天啥模樣？》
▲GIF演示
「左滑」查看不同降溫思路，聚焦夏季穿搭，推出兒童防曬衣套裝，借此宣傳巴拉巴拉兒童防曬衣套裝。
交互對(duì)應(yīng)編輯器組件/組合
組合：無(wú)限選擇切換內(nèi)容(三組)
編號(hào)：11707（組合）
組件：?jiǎn)螌踊瑒?dòng)-左滑(小程序)
編號(hào)：10949（組件）
組件：?jiǎn)螌踊瑒?dòng)-左滑(自動(dòng)對(duì)齊、小程序)
編號(hào)：10243（組件）
組件：視頻號(hào)-圖片
編號(hào)：10228（組件）
08
美團(tuán)Meituan
《天?氣?太?熱?，美團(tuán)電單車涼?涼?涼?涼?涼?涼?涼?了》
▲GIF演示
天氣漸熱，美團(tuán)通過(guò)「連續(xù)點(diǎn)擊切換多張圖片」的交互展示被座墊燙屁股的動(dòng)畫(huà)，借此揭秘美團(tuán)電單車防燙座墊并宣傳美團(tuán)電單車。
交互對(duì)應(yīng)編輯器組件/組合
組件：連續(xù)點(diǎn)擊-切換多張GIF動(dòng)圖(有觸發(fā)區(qū))
編號(hào)：10088（組件）
如果以上案例還沒(méi)有看夠，可以到「品牌時(shí)光機(jī)」交互圖文案例庫(kù)（網(wǎng)址：brandtime.cn）在首頁(yè)中搜索「夏日」查看更多相關(guān)案例。
目前案例庫(kù)總案例數(shù)已達(dá)80W+，其中8W+案例支持一鍵還原，制作同款效果非常方便。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(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)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）