滴滴出行：Di-Tech编译器

2017-04-20 H5案例分享 H5案例分享

案例：Di-Tech编译器

出品：滴滴出行

亮点：

策划上，视频类。Loading完毕进入页面，提示“轻触屏幕，会有不可描述的事情发生”，点击屏幕以后播放视频。视频内容关于“第二届滴滴Di-Tech算法大赛”，以动画+文字的形式，再加上”if…else…”的思维逻辑，列举出“你是一个程序员”、“你进入决赛答辩”等各种事件成立和不成立时的不同结果。最后由“还等什么，快上车”引出品牌和大赛相关信息。最后一页可以点击现在报名跳转链接，或“组队来战”分享给好友。

设计上，矢量风格，黑色和深蓝为背景色调，并在背景上加入了模拟程序员编译器的元素，和编写代码的格式及书写过程，编辑器上同时会播放动画，人物和物体元素以橘色和青色展现，并且光效给人一种会动的霓虹灯的感觉。除了背景音乐，还有敲键盘的声音，像是萌猴发出的“if”与“else”的配音，非常洗脑。

体验上，无论是视觉还是听觉，冲击感都非常强。让人眼前一亮，平时死板的程序员、代码等元素，此时变得十分生动有趣。内容与主题联系很紧密，列举的各种情况和事件，层层递进，吊人胃口，奖品元素也充满了诱惑力，整体留给人很深的印象，起码不会让人因为炫酷的视觉效果和好玩的背景音乐而忽视了“算法大赛”这个主题。

技术实现： CreateJS + Video视频

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

识别图中二维码

Di-Tech编译器-查阅二维码

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

标签