DIY互动H5案例精选

案例：假如送你回到1999年旅行

①首页标题是“重返你的1999年”，如果要回到1999年旅行，你会带什么东西？点击“开启回忆”按钮。
②进入页面时候，箱子会自动打开，接着下方有五个元素（箱子、玩具、音乐、零食、其他），右下角还有一个“保存”按钮。把自己想要带的东西装到行李箱内，元素可以拖拽、删除，旋转，伸缩。
③保存后生成一张专属的回忆，下方有两个按钮，一个“重新回忆”（重新开始），另一个是“分享我的1999”

案例：奥利奥缤纷音乐盒

H5介绍：DIY定制生成类。Loading完毕，在首页点击开始定制。定制过程分为三步：①选择奥利奥音乐盒的包装背景插画；②选择奥利奥音乐盒的颜色搭配；③选择标签样式并输入自定义文字或取消标签设计。完成定制流程后，会生成专属编号，点击“下单购买”就可以进入天猫页面购买产品啦。再次进入首页时，点击首页底部按钮并输入专属编号，就能直接定位对应的设计作品啦。

案例：随心所欲！打造我的梦想办公位！

①DIY部分：首先获得微信的授权，进入主页面，深蓝色的背景，右下有一个卡通小人，白色的对话框写着“Hello！上班第一天欢迎来到你的新办公位，可依照喜好装饰自己跌办公环境，让办公生活更有色彩！”对话框上方有三个品牌的Logo，点击下方的START。出现的是简单的办公位，白色提示框写着“点击＋打造我的梦想办公桌”，总共有5处可以变换的地方，装扮完成点击“点击完成”。

②海报部分：薄荷绿色背景，上方是办公位的截图，最上方是三个品牌的Logo，左下方有二维码，长按海报即可保存我和我的办公桌合照，右边有一只手举着照相机的图片，点击“返回修改”回到DIY部分，点击“GET同款办公桌”出现淘宝店页面。

案例：吐槽一下，轻松一点

H5介绍：制作自己的海报，滴滴出行搞了一个吐槽活动，大家都很不容易，DIY自己的“不容易”海报并上传到微博。简单的滑屏翻页效果，列举了设计师、程序猿、做策划这三个角色的吐槽海报，来说明每个人都不容易，最后一屏介绍了活动内容，输入你的吐槽内容和身份，选择海报颜色，吐槽海报就生成了，保存图片，还可以一键分享到微博。

案例：顺丰优选冰淇淋梦工厂

H5介绍：小游戏类，自己动手DIY你的专属冰淇淋，分三步：1、依次点击选择基本配料，放入机器中，2、选择你喜欢的一种口味，老干妈、桂皮、辣条等八种“奇葩口味”可以选择！(这也太重口了，没想到你是这样的冰淇淋) 3、摇动手机制作冰淇淋。“点击抽奖”就有机会获得顺丰优选提供的1桶奇葩口味冰淇淋或10元现金券

案例：营养一杯，让爱加倍

H5介绍：手工制作类，案例展示的是五谷磨房的冲泡过程，用户使用H5提供的9个词组加入杯子，可以随意选择词组与数量，然后摇一摇，最后生成一段相应的暖心文案，还有优惠券哦。

案例：抖音不嗨心治愈所

H5介绍：动画合成，进入页面，显示“抖抖手机”，用户摇动手机后，来到抖音“不嗨心治愈所”，点击屏幕右下方按钮“我不嗨心”，进入下一页开始“治愈”。用户需要上传一张头像（最好是正面标准头像），若不想上传，也可以选择去画自己的头像。上传之后，头像会自动填充到画面中的人物身上，此时用户“抖抖手机”，即可将动画开启，“来首music，一秒变嗨~”，动画播放时，用户再次摇动手机可以换一首歌，查看别的抖音动画，如果“喜欢这首”，可以选择分享“我的嗨心，让别人看到”。

每首歌的曲风和对应的画面色调都截然不同，这使得案例整体趣味性很高，再加上将用户上传的头像放入画面，又使用户有了参与感。分享部分也很人性化，好友点进来首先会看到分享者的作品，多少会提升一定的转发率。

案例：快来看！我刚定制了一款超好看的月饼！

H5介绍：以DIY月饼为主题，推广宣传品牌。

点击“开始定制”，进入月饼DIY制作程序。可以DIY月饼的背景、馅、皮、料，每一部分都有12种选择，随意搭配。如果不满意，还可以选择左上角的“重置”，DIY完成后，可选择右上角的“生成”，输入你的昵称，专属于你的好看月饼就完成啦！

案例：晨光666陪战考试季

H5介绍：以大部分都会经历的高考为主题，高考对大部分人来说，都是一个特别的记忆。晨光和连咖啡以布置场景的形式，展示了“我的陪战书桌”。

首先需要输入姓名和高考年份；然后进入DIY书桌，一共6组道具可以选择，分别是战场、秘籍、装备、回血、回忆杀、吉祥物。DIY海报完毕后，选择陪战宣言（也可以自己输入），填好，或者选中后，生成你的专属陪战书桌海报。

案例：DIY我眼中的老爸

亮点：这款游戏类的h5是雪加公司为了宣传自己的产品，使用户玩起来，最终为产品引流。

①Loading部分：中间是雪加的logo，向右不断滑动长条

②内容动画部分：进到首页，中间是一个手绘风的男人形象，下边写着“你眼中的老爸是什么样子的”点击“开始生成”，进入选择页面，左边可以选择发型，服饰，鞋，配饰。选择好之后会自动穿到右边的人身上，右下角是选背景。

③落地页：选择完背景，点击下方的继续按钮，会弹出一个我的老爸有点XX的框，输入好之后点击生成属于自己老爸形象的海报，生成之后，下方有三个按钮“返回编辑”，“长按保存”，“领取礼物”。