滴滴：成语接龙,瓜分百万打车券!

2018-01-26 H5案例分享 H5案例分享

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

识别图中二维码

成语接龙,瓜分百万打车券!-查阅二维码

完整欣赏此案例大约需要35秒

案例：成语接龙,瓜分百万打车券!

出品：滴滴

亮点：

策划上，长图+成语接龙小游戏类，成语接龙，瓜分百万打车券，① loading结束来到划龙舟地点，已接龙的成语在屏幕中依次出现；② 而后向上滑动，龙舟带着成语来到“新用户有惊喜”区域，玩家输入手机号，点击OK，即可获得成功瓜分滴滴打车券的惊喜；③ 继续滑动了解游戏规则，然后选择你的团队，出现需接龙的成语，点击输入框即可输入成语进行接龙；④ 接力成功后，可看到接力成语的记录，还可去查看排行榜，召唤好友来冲榜。
设计上，扁平立体画风，采用橘红色作为主色调，一座座小岛屿都是一幅幅精致的小插画，并且有些岛屿上的建筑物还嵌有大写字母”D”，暗喻“滴滴”。龙舟从上到下贯穿始终，增加了整个长图页的连贯性。
体验上，动画设计的很细腻，岛屿轻轻浮动，给人一种轻盈之感。而且里面的图片大多采用base64编码，大大减少了http请求，优化了页面性能。

技术实现： Zepto + Hammer.JS

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

标签