春游季，給圖文排版「搞點(diǎn)樂子」玩玩吧！

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

舉報(bào) 2025-02-26

掃描,分享朋友圈

開春后，天氣轉(zhuǎn)暖，按捺不住想要出去玩的心?

如果我們制作春游季主題圖文，不妨來個(gè)「春游」玩法，給圖文「搞點(diǎn)樂子」玩玩吧！

今天就用米其林中國(guó)、盒馬和溜溜梅3個(gè)案例，教大家3種在圖文中「春游」的排版效果！

下面一起簡(jiǎn)單拆解一下。

一

自定義海報(bào)生成春游裝備

*素材來自米其林中國(guó)《一不小心，打翻夏日調(diào)色盤》

「自定義海報(bào)」效果可以讓用戶在微信文章中點(diǎn)擊選擇自己喜歡的春游裝備生成海報(bào)進(jìn)行下一步傳播，除了海報(bào)其實(shí)還用作變裝、生成頭像等創(chuàng)意，具體玩法就看大家的腦洞啦。

該效果可使用 iPaiban Pro 黑科技編輯器中的「自定義海報(bào)(按鈕在上,3排)」組件制作。

只需上傳畫面整體和展示區(qū)圖片，接著按序設(shè)置相應(yīng)的觸發(fā)區(qū)域即可。

依次上傳按鈕圖，按鈕圖片有且只能3排，不能多也不能少，每一排按鈕選項(xiàng)數(shù)沒有限制，不局限于3個(gè)。

分別上傳每排按鈕點(diǎn)擊后出現(xiàn)的對(duì)應(yīng)元素，注意這里素材的尺寸要和整體交互的尺寸一致，顯示元素以外的地方為透明底。設(shè)計(jì)圖上除了點(diǎn)擊后出現(xiàn)的對(duì)應(yīng)元素，還可以加上對(duì)應(yīng)按鈕選中的狀態(tài)。

雙擊編輯區(qū)下圖所示位置，依次設(shè)置三排按鈕的觸發(fā)區(qū)域。注意這里設(shè)置觸發(fā)區(qū)域時(shí)不要超出圖片本身的范圍，觸發(fā)區(qū)之間不可重疊。

設(shè)置完畢后，點(diǎn)擊「保存設(shè)置并退出」。

想要實(shí)現(xiàn)同款效果可以在編輯器（SVG.iPaiban.com）搜索使用：

組件：自定義海報(bào)(按鈕在上,3排)

編號(hào)：11782（組件）

教程：《圖文里也能DIY海報(bào)，像H5一樣！》

二

放大彈窗

*素材來自盒馬《胃，新疆去不去撒》

在背景圖上點(diǎn)擊浮動(dòng)的按鈕，圖片像被鏡頭拍攝一樣推進(jìn)聚焦變化，并彈出彈窗，點(diǎn)擊彈窗的關(guān)閉按鈕返回原樣，可繼續(xù)循環(huán)點(diǎn)擊。效果非常神奇，做起來卻十分簡(jiǎn)單。

登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器左側(cè)「組件」按鈕，在「彈窗」分類中找到「點(diǎn)擊-鏡頭推進(jìn)+聚焦放大式彈窗」組件，或者直接在搜索框中搜索組件編號(hào)11913，點(diǎn)擊選擇。

刪除示例圖片后，依次點(diǎn)擊「換圖」和「+」號(hào)上傳圖片。所有圖片尺寸保持一致。

所需圖片素材包括四部分，分別為真實(shí)背景圖、觸發(fā)區(qū)定位圖+彈窗關(guān)閉遮罩、點(diǎn)擊提示圖片、彈窗圖片。本文案例中的素材上傳效果如下：

點(diǎn)擊加減號(hào)設(shè)置動(dòng)畫參數(shù)，一般保持默認(rèn)即可。

想要實(shí)現(xiàn)同款效果可以在編輯器（SVG.iPaiban.com）搜索使用：

組件：點(diǎn)擊-鏡頭推進(jìn)+聚焦放大式彈窗

編號(hào)：11913（組件）

教程：《“盒馬這種鏡頭推進(jìn)式彈窗，怎么做啊？”》

三

擦除切換

*篇幅所限，GIF動(dòng)圖演示交互，素材來自溜溜梅《跟我走！給春天一點(diǎn)顏色LOOKLOOK》

「溜溜梅」圖文打開后是灰色的畫面，能夠引起大家的好奇，點(diǎn)擊切換后伴隨梅子落下向下擦除逐漸上色。

這里的長(zhǎng)圖是多張圖拼接而成的，需要使用「點(diǎn)擊-向下擦除切換(多張圖)」的組件，需留意所有圖片寬度相同，切換前圖片總高度等于切換后圖片總高度。

想要實(shí)現(xiàn)同款效果可以在編輯器（SVG.iPaiban.com）搜索使用：