能率：测测你是几分好男人

2017-11-17 H5案例分享 H5案例分享

案例：测测你是几分好男人

出品：能率

亮点：

策划上，宣传“能率燃气热水器”（1）“你是几分好男人？”标题居中，右上角能率始终显示，下方左侧显示一只睡觉的猫，右侧一个手捧礼物的男人，中间按钮测一测。（2）点击测试，缓动动画铺满屏幕，动画结束中间显示一个模态框展示题目，选择答案自动切换下一题并同步题号，答题结束显示答题结果。（3）答题结果，所得分数显示出来，并提醒打败百分之几的男性，然后提醒他们需要怎么做，也可以分享给朋友，还有get好男人养成宝典（跳转到能率燃气热水器宣传页），中间高亮按钮提示获取答案解析。（4）答案解析，给出问题与解析，解析高亮显示。（5）答题结束可以选择重新做题，
设计上，像素风格。

技术实现： Zepto

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

识别图中二维码

测测你是几分好男人-查阅二维码

完整欣赏此案例大约需要2分20秒

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

标签