喜眠：了解一下你的睏衣装

2018-12-18 H5案例分享 H5案例分享

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

了解一下你的睏衣装-查阅二维码

完整欣赏此案例大约需要1分6秒

案例：了解一下你的睏衣装

出品：喜眠

亮点：

策划上，答题测试类H5，测试你的睏衣装，用户在首页点击开始，进入一个屋子的视频（13秒），然后进入的是点击开始游戏进入睏衣适配系统，一共六道测试题，每道题四个选项，第一个问题是走优雅女士人设的路线，居家姿态是什么样子的；第二个问题是参加朋友的睡衣趴会穿什么去；第三个问题是有人让你飞黄腾达，如何缓解他现在的形象；第四个问题是小孩为什么不停的哭闹；第五个问题是面对哭闹不止的孩子，从妈咪包里拿出什么安抚她的情绪；第六个问题是经历了一个派对与哄孩子，回到家你想选择什么衣服入睡，问题都是一些有关于睡衣的问题，测试完成后生产一张睏衣装扮的海报，海报上写有评语，长按可以保存。
设计上，采取插画手绘风格，卡通风格。
体验上，页面设计很美，操作流畅，每个题目都围绕着睡衣来讲，不会惹人厌烦。

技术实现： Egret tweenjs

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签