火影忍者OL手游：火影的奔跑，你敢挑战吗？

2019-05-31 H5案例分享 H5案例分享

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

识别图中二维码

火影的奔跑，你敢挑战吗？-查阅二维码

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

案例：火影的奔跑，你敢挑战吗？

品牌：火影忍者OL手游

亮点：

1. 创意策划上

以“忍者跑的试炼”为主旋律，开始是一小段视频，讲述忍者的修炼，点击“试炼开启”按钮，一个看似平凡的主人公，与火影开始一起奔跑，中间夹杂了三个问题。

三个问题如下：

你第一次拼命奔跑是为了什么？ A 伙伴 B 梦想

你喜欢用什么方式跨越挑战？ A 灵感 B 经验

当你自我怀疑的时候你选择...... A 坚持 B 改变

这三个问题都是很有青春年少，激情澎湃的感觉，选项无所谓正确或者错误。最后会根据你不同的选择，生成不同的海报（6选一）。

一共三个问题，每个问题2个答案，运用数学解法 2*2*2=6，核算6张海报。具体选项和海报对应关系就不剧透了。

2. 设计上

漫画书的风格，黑白画面，小时候看过漫画书的伙伴，肯定不会陌生。

3. 技术上

① 整个案例，从加载页结束，就使用了MP4格式的视频展示，视频全长2分21秒。

② 在视频部分，可以看到播放到问题时，视频暂停，出现选项；视频播放到问题部分时，在制作时，也多制作了几秒相同内容，保持用户提留看到内容一致。

4. 体验上

案例视频制作很有节奏感，品质属于上品。

技术实现： video + jQuery

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

标签