小米：无聊治愈所

2018-04-09 H5案例分享 H5案例分享

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

识别图中二维码

无聊治愈所-查阅二维码

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

案例：无聊治愈所

出品：小米

亮点：

策划上，测试类。Loading完毕，进入主页，显示主题“无聊是种病，你得治”。点击页面下方的“开始拯救你的无聊”按钮，根据提示进入测试，测试方式比较简单，即扯卫生纸（小五提示：卫生纸是有尽头的，结尾有亮点），随着纸的长度变化，会出现一些有趣的文字，至于内容如何，亲们自行体验吧。结束后，引导用户查看生成的无聊报告，或者再玩一次。无聊报告页面显示出品——小米，以及个人测试结果，可长按保存图片，下方按钮引导用户进入下一个页面，推荐小米相关产品指尖积木，引导用户进入小米商城购买页。
设计上，主页再现了街道上常见的贴满小广告的墙，测试页则是模拟公共卫生间的某些场景，设计上很新颖，让人“眼前一亮”！通过向下滑动页面，卫生纸长度增加，会出现相应的文字，内容不同，搞笑幽默，不至于让用户感觉枯燥。
交互上，点击屏幕+上下滑动页面。
体验上，场景的设计可谓独树一帜，厕所卫生纸、小广告......贴近生活。测试中的文案以及生成报告的用语，幽默搞笑，又紧随潮流，增强了H5的趣味性。无聊是种病，早治早见效。

技术实现： jQuery+lodash

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

标签