春游季，给图文排版「搞点乐子」玩玩吧！
开春后，天气转暖，按捺不住想要出去玩的心♥
如果我们制作春游季主题图文，不妨来个「春游」玩法，给图文「搞点乐子」玩玩吧！
今天就用米其林中国、盒马和溜溜梅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条）