《元宵節(jié)SVG交互圖文案例大全》
打地鼠游戲
Whac?A?Mole
為各位 E2 編輯器會員首先帶來的，是由 JZ Creative Studio 設(shè)計(jì)并授權(quán)的 SVG「打地鼠」模型，原文鏈接《SVG打打打打打打地鼠（馬）！》。你可以直接從目前官網(wǎng) Templates 頁面加載此草稿或查看操作指引。
圖片消失-滑動出現(xiàn)
燈謎互動是元宵節(jié) SVG 的形式首選，《元宵節(jié)｜猜燈謎共團(tuán)圓》采用「圖片消失-滑動出現(xiàn)」組件，將觀眾引入一片燈火璀璨之中。隨后通過「等分容器滑動」嵌套多個「連續(xù)切換」形成：
此外，還可以點(diǎn)擊《????推薦適合元宵的SVG模版????（第一期）》和《????推薦適合元宵節(jié)的SVG模版????（第二期）》查看往年的相關(guān)專題 SVG 模版推薦喔！
錯層滑動
元宵/湯圓是正月十五的節(jié)日標(biāo)識，《一只元宵的奇浴旅程》和《快看這個圓圓的是什么？》均通過「錯層滑動」使其穿梭于產(chǎn)品廣告與祝福設(shè)計(jì)之間，沉浸感極佳：
此外對于 SVG「夾湯圓」的效果，近期 E2 編輯器了推出《SVG模板推薦：筷子夾湯圓挑戰(zhàn)（長按操作）》教程，也同樣推薦廣大會員應(yīng)用實(shí)踐。
任意點(diǎn)放大消失接伸長
天上的明月，猶如碗中的湯圓。《元宵尋“圓”，米其林是懂浪漫的》將各類圓形的視覺要素通過層層穿梭的 SVG 互動，在圖文中不斷切換插畫場景：
這一效果我們曾通過《點(diǎn) 擊 進(jìn) 入 虛 擬 元 宵 燈 會》進(jìn)行示范，如需復(fù)現(xiàn)可點(diǎn)擊《一圖看懂虛擬元宵燈會SVG排版｜玩轉(zhuǎn)任意動畫接伸長｜E2.COOL》學(xué)習(xí)。
三選一切換
元宵燈謎答題，是時(shí)候用上高級的「三選一切換」組件了！《隆基25周年丨時(shí)間里的「燈謎」，你能猜中幾個？》通過這款 E2 編輯器組件，準(zhǔn)確反饋了用戶的答題正誤：
如果你希望進(jìn)一步掌握通過 E2.COOL 實(shí)現(xiàn)各類 SVG 答題創(chuàng)意，還請點(diǎn)擊《答題型SVG模版匯總｜公眾號交互設(shè)計(jì)》選擇最適合你的問答互動模板。
雙面翻轉(zhuǎn)
SVG「雙面翻轉(zhuǎn)」可用于模擬燈謎卡片的翻轉(zhuǎn)過程，《迎元宵猜燈謎，謎底竟然是TA！》讓元宵猜燈謎活動更身臨其境：
在我們的多款 SVG 翻轉(zhuǎn)組件篩選器中還有「傾斜翻轉(zhuǎn)」式，可以一定程度上進(jìn)一步增強(qiáng)翻轉(zhuǎn)的立體感。
多熱區(qū)漸現(xiàn)
《【元宵特輯】猜燈謎，贏好禮！》引導(dǎo)用戶進(jìn)行簡單的「尋寶」SVG 交互，找到藏在湯圓里的亮點(diǎn)：
如果運(yùn)營人計(jì)劃在圖文內(nèi)打造此類解密游戲，也可以點(diǎn)擊《解密效果SVG模板匯總｜黑科技編輯器》選擇更多豐富的 E2.COOL 黑科技 SVG 編輯器組件。
密碼解鎖+幸運(yùn)抽簽-長按式
同樣是解燈謎和夾湯圓互動，《首刷有禮｜玩趣元宵解鎖好禮》巧妙選擇了「密碼解鎖」和「幸運(yùn)抽簽」兩款 E2 編輯器組件進(jìn)行創(chuàng)意布局：
SVG「密碼解鎖」的應(yīng)用形式多種多樣，除了用于「猜燈謎」，當(dāng)然還有更多傳統(tǒng)的使用策略。
多段伸長、逆向畫面伸長等
《喜鬧元宵》以多段伸長 SVG 層層遞進(jìn)，把「回家團(tuán)圓」的節(jié)日祝福情感逐步推向高潮：
關(guān)于此組件，還有一些結(jié)合「浮層」的妙用，小編建議可以在元宵節(jié)結(jié)合湯圓要素進(jìn)行結(jié)構(gòu)升級。
而局部氣候調(diào)查組的《新春百花爭斗艷，元宵燈謎樂團(tuán)圓》更為魔性，通過「逆向畫面伸長-切換」的多次復(fù)用產(chǎn)生了超長的猜燈謎掛繩：
手寫祝福+燃放孔明燈
《紅包在哪兒？（第三彈｜元宵版）》為大家展示了逆天的可輸入文本 SVG 互動玩法。讀者可以親自在圖文中修改元宵祝福語，確認(rèn)后點(diǎn)擊按鈕將孔明燈放飛，可謂將節(jié)日活動的電子化演繹推向了極致：
現(xiàn)在，你可以在官網(wǎng) Templates 頁面加載此模板，或通過教程《黑孔明燈祝福+放飛（可輸入文本+逆反盒子）SVG教程》進(jìn)行布局學(xué)習(xí)：
擠壓伸長
元宵民俗文化課時(shí)間！《元宵好運(yùn)從天而降！快來接住》以 UGC 組件「擠壓伸長」為讀者們帶來精美的吉祥團(tuán)紋展示，擠壓展開后露出關(guān)聯(lián)匹配的產(chǎn)品廣告設(shè)計(jì)：
關(guān)于 E2編輯器 UGC 組件「擠壓伸長」的應(yīng)用，可以查看 Ceep 老師的視頻專題講解學(xué)習(xí)更多案例設(shè)計(jì)。
圖片消失-滑動出現(xiàn)（GIF版）+多熱區(qū)彈出式海報(bào)
畫風(fēng)超可愛的《元宵夜，這樣做好嗎…》從動態(tài)封面切換橫向滑動，將糯嘰嘰湯圓的民俗故事藏在插畫長卷中：
EMOJI 猜謎游戲互動
《猜燈謎》采用了 E2 編輯器《???? ???? ???? ???? = ?》限時(shí) UGC 組件的布局策略，讓可輸入文本承載猜燈謎的交互功能：
這種涉及用戶鍵盤打字的互動確實(shí)能帶來更強(qiáng)的公眾號參與感，但這里提醒廣大運(yùn)營人一定要注意多機(jī)型調(diào)試，因?yàn)椤缚奢斎胛谋尽箤τ诓煌瑱C(jī)型來說存在一定的 CSS 布局浮動，應(yīng)在排版時(shí)盡可能匹配多數(shù)手機(jī)瀏覽體驗(yàn)！
更多海量模板，平均不足 1 元！
E2.COOL 秉持著讓行業(yè)“人均 SVG”的生態(tài)理念，由多位黑科技排版設(shè)計(jì)的頭部資深開發(fā)者共同打造，斬獲包括法國設(shè)計(jì)獎、美國繆斯創(chuàng)意設(shè)計(jì)獎等諸多國際賽事大獎，幫助更多品牌以可視化形式完成互動式圖文創(chuàng)作。如有任何特效靈感和建議，也歡迎通過客服向我們提出，E2 將竭誠思考代碼轉(zhuǎn)化的可行性。
E2 平臺官網(wǎng)
https://www.e2.cool/
會的比別人多一點(diǎn)
轉(zhuǎn)載請?jiā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條）