春游季，給圖文排版「搞點樂子」玩玩吧！
開春后，天氣轉暖，按捺不住想要出去玩的心?
如果我們制作春游季主題圖文，不妨來個「春游」玩法，給圖文「搞點樂子」玩玩吧！
今天就用米其林中國、盒馬和溜溜梅3個案例，教大家3種在圖文中「春游」的排版效果！
下面一起簡單拆解一下。
一
自定義海報生成春游裝備
*素材來自米其林中國《一不小心，打翻夏日調色盤》
「自定義海報」效果可以讓用戶在微信文章中點擊選擇自己喜歡的春游裝備生成海報進行下一步傳播，除了海報其實還用作變裝、生成頭像等創意，具體玩法就看大家的腦洞啦。
該效果可使用 iPaiban Pro 黑科技編輯器中的「自定義海報(按鈕在上,3排)」組件制作。
只需上傳畫面整體和展示區圖片，接著按序設置相應的觸發區域即可。
依次上傳按鈕圖，按鈕圖片有且只能3排，不能多也不能少，每一排按鈕選項數沒有限制，不局限于3個。
分別上傳每排按鈕點擊后出現的對應元素，注意這里素材的尺寸要和整體交互的尺寸一致，顯示元素以外的地方為透明底。設計圖上除了點擊后出現的對應元素，還可以加上對應按鈕選中的狀態。
雙擊編輯區下圖所示位置，依次設置三排按鈕的觸發區域。注意這里設置觸發區域時不要超出圖片本身的范圍，觸發區之間不可重疊。
設置完畢后，點擊「保存設置并退出」。
想要實現同款效果可以在編輯器（SVG.iPaiban.com）搜索使用：
組件：自定義海報(按鈕在上,3排)
編號：11782（組件）
教程：《圖文里也能DIY海報，像H5一樣！》
二
放大彈窗
*素材來自盒馬《胃，新疆去不去撒》
在背景圖上點擊浮動的按鈕，圖片像被鏡頭拍攝一樣推進聚焦變化，并彈出彈窗，點擊彈窗的關閉按鈕返回原樣，可繼續循環點擊。效果非常神奇，做起來卻十分簡單。
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，在「彈窗」分類中找到「點擊-鏡頭推進+聚焦放大式彈窗」組件，或者直接在搜索框中搜索組件編號11913，點擊選擇。
刪除示例圖片后，依次點擊「換圖」和「+」號上傳圖片。所有圖片尺寸保持一致。
所需圖片素材包括四部分，分別為真實背景圖、觸發區定位圖+彈窗關閉遮罩、點擊提示圖片、彈窗圖片。本文案例中的素材上傳效果如下：
點擊加減號設置動畫參數，一般保持默認即可。
想要實現同款效果可以在編輯器（SVG.iPaiban.com）搜索使用：
組件：點擊-鏡頭推進+聚焦放大式彈窗
編號：11913（組件）
教程：《“盒馬這種鏡頭推進式彈窗，怎么做啊？”》
三
擦除切換
*篇幅所限，GIF動圖演示交互，素材來自溜溜梅《跟我走！給春天一點顏色LOOKLOOK》
「溜溜梅」圖文打開后是灰色的畫面，能夠引起大家的好奇，點擊切換后伴隨梅子落下向下擦除逐漸上色。
這里的長圖是多張圖拼接而成的，需要使用「點擊-向下擦除切換(多張圖)」的組件，需留意所有圖片寬度相同，切換前圖片總高度等于切換后圖片總高度。
想要實現同款效果可以在編輯器（SVG.iPaiban.com）搜索使用：
組件：點擊-向下擦除切換(多張圖)
編號：11872（組件）
如果以上案例還沒有看夠，可以到「品牌時光機」交互圖文案例庫（網址：brandtime.cn）中搜索關鍵詞「春」查看更多相關案例。
目前案例庫總案例數已達80W+，其中8W+案例支持一鍵還原，制作同款效果非常方便。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）