地球上最無(wú)厘頭腦洞SVG交互圖文，們！

原創(chuàng) 贊收藏 評(píng)論

舉報(bào) 2025-05-23

掃描,分享朋友圈

莫名其妙，又極致上癮……本期為大家?guī)?lái)包括由我們交付的多款 SVG 交互設(shè)計(jì)領(lǐng)域無(wú)厘頭腦洞創(chuàng)意作品介紹。這里是 JZ Creative Studio，中華人民共和國(guó)《融媒體 SVG 交互設(shè)計(jì)技術(shù)規(guī)范》起草單位之一，Social Beta 年度四大 SVG 交互設(shè)計(jì)廠牌，也歡迎接洽（WeChat：Zhuoya_Work）咨詢更多合作事宜。

1.敲木魚

釘釘 x JZCreative《電子木魚》

《???? 電子木魚 . e x e》可能是新年微信紅包封面最無(wú)厘頭的發(fā)放形式，連續(xù)擊打畫面中的釘釘 IP 頭像，可不斷彈出 +1 提示和文案，經(jīng)過(guò)極多次點(diǎn)擊后才能最終展示出紅包封面入口。該作中我們核心采用了 <touchstart> 與 <click> 雙層觸發(fā) SVG 機(jī)制，由此實(shí)現(xiàn)了木魚的無(wú)限打擊反饋和下層內(nèi)容連續(xù)切換。此后我們還與 M Stand 合作《工作壓力大？進(jìn)來(lái)「捶捶」樂(lè)一下！限定周邊福利套餐》，在開場(chǎng)部署連續(xù)敲錘交互：

M Stand x JZCreative《錘錘樂(lè)》

因而，包括敲鼓、拍球等均可通過(guò)該 SVG 形式轉(zhuǎn)化，歡迎通過(guò)（WeChat：Zhuoya_Work）咨詢定制設(shè)計(jì)與開發(fā)。

2.捏泡泡

網(wǎng)易《絕對(duì) の無(wú) 聊挑戰(zhàn)》

泡泡紙都捏過(guò)嗎？網(wǎng)易《絕對(duì) の無(wú) 聊挑戰(zhàn)》在 2019 年率先將這種生活中的既無(wú)趣又有趣的互動(dòng)搬到了公眾號(hào) SVG 交互設(shè)計(jì)的舞臺(tái)之上。其布局方式甚是簡(jiǎn)單，但效果可謂出奇制勝，大量的點(diǎn)擊切換平鋪堆疊，彩蛋無(wú)處不在。同理，近期《「送你一張泡泡紙」》亦如是：

局部氣候調(diào)查組《送你一張泡泡紙》

關(guān)于這種簡(jiǎn)單粗暴的大量點(diǎn)擊切換布局，你可以基于 E2 編輯器的分欄和切換型 SVG 特效進(jìn)行高效排版。

3.割韭菜

局部氣候調(diào)查組 x JZCreative《韭菜的一生》

在《韭菜的一生大約可以被收割50次》中，我們通過(guò) discrete 值的 calcMode 位移，實(shí)現(xiàn)可重復(fù)執(zhí)行的序列動(dòng)畫，將韭菜的快速重復(fù)生長(zhǎng)特性淋漓盡致展現(xiàn)，歡迎通過(guò)（WeChat：Zhuoya_Work）咨詢定制設(shè)計(jì)與開發(fā)。

4. 鯊魚玩具

橡子屋 x JZCreative《鯊魚玩具》

前不久，我們創(chuàng)造性地以音畫同步開發(fā)策略，將童年陰影鯊魚牙齒玩具復(fù)現(xiàn)在公眾號(hào)圖文內(nèi)。《???? 鯊魚玩具.svg》不僅每次刷新頁(yè)面 SVG 都會(huì)隨機(jī)鎖定結(jié)果，還能在按下牙齒時(shí)播放機(jī)關(guān)音效，交互結(jié)果頁(yè)自然引導(dǎo) APP 廣告，著實(shí)妙趣橫生。

5.消消樂(lè)

JZCreative《麻將消消樂(lè)》

過(guò)年期間，計(jì)育韜老師結(jié)合麻將消消樂(lè)的游戲概念，基于 SVG 行業(yè)前沿的 mouseover/mouseout 組合技術(shù)，打造了公眾號(hào)圖文版 SVG 消消樂(lè)完美運(yùn)行邏輯《?????麻將消消消消消消消消消消消消消消樂(lè)》。目前該 SVG 特效也同步上架了 E2 編輯器《UGC 原創(chuàng)設(shè)計(jì)介紹｜消消樂(lè)》，開發(fā)者也可以通過(guò)我們的視頻課學(xué)習(xí)其關(guān)鍵 SVG 代碼技術(shù)：

6.塞爾達(dá)傳說(shuō)、魷魚游戲、開端等劇情復(fù)現(xiàn)

JZCreative《塞爾達(dá)傳說(shuō)》

作為塞爾達(dá)系列愛好者，JZ Creative Studio 曾將荒野之息和王國(guó)之淚兩作的所有無(wú)厘頭梗集中在一篇公眾號(hào) SVG 交互圖文中，推出《點(diǎn) 開即玩 ← ↑ → ↓ 塞爾達(dá) 傳說(shuō)》。具有挑戰(zhàn)性的是，我們決定采用中國(guó)三大 SVG 編輯器之一的 E2 編輯器（https://www.e2.cool/）完全零代碼開發(fā)，獲得了極佳的創(chuàng)作成果！

我們也結(jié)合過(guò)《魷魚游戲》，設(shè)計(jì)了將經(jīng)典闖關(guān)融入 SVG 交互的黑科技排版作品《????點(diǎn)開即玩????魷魚游戲????》：

JZCreative《魷魚游戲》

以及循環(huán)流電視劇《開端》的公交車劇情 SVG 復(fù)現(xiàn)《????點(diǎn)開即玩????№45公交車????》：

JZCreative《№45公交車》

可見對(duì)于藝術(shù)/游戲/影視等作品的推廣，也可以結(jié)合 SVG 演繹劇情來(lái)在推廣中提升用戶的參與感。歡迎通過(guò)（WeChat：Zhuoya_Work）咨詢定制設(shè)計(jì)與開發(fā)。

那么，你還想讓 JZ Creative Studio 來(lái)實(shí)現(xiàn)哪些無(wú)厘頭創(chuàng)意的 SVG 互動(dòng)體驗(yàn)？歡迎在文末評(píng)論區(qū)留言你的愿望！

本文系作者授權(quán)數(shù)英發(fā)表，內(nèi)容為作者獨(dú)立觀點(diǎn)，不代表數(shù)英立場(chǎng)。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。