水井坊：朕有道圣旨，你读一下

2017-09-07 H5案例分享 H5案例分享

案例：朕有道圣旨，你读一下

出品：水井坊

亮点：

策划上，序列帧动画+视频。Loading时显示承天门(天安门)建设中，Loading完毕则会出现指纹按钮，点击播放视频。视频内容是蒯(kuǎi)祥建好了承天门，拍照给宋礼(宋大人)看，宋很满意，决定赏酒，并由“水井坊”引发一连串聊天，出现各种历史人物加入“群”里。最后永乐帝出现，发出圣旨，邀请众卿六百年后相聚，看看谁的事业六百年后犹能传世。用户在群聊中，点击圣旨，可以接旨查看圣旨内容，在圣旨上能查看活动规则，或点击按钮参加活动。

设计上，古风掺杂现代元素，如手机、群聊等，人物的聊天风格也是，一会儿之乎者也一会儿流行词语，给人一种“一本正经地胡说八道”的感觉哈哈哈。动画方面，如Loading部分承天门草稿绘制的过程就很有感觉，或结尾圣旨打开的动画等，整体动画表现都蛮细腻，就是结尾页用户填写部分，字体有点不统一，看上去有点跳戏。

体验上，最近可能是被各种“尬”洗脑了，一开始觉得聊天很尬，但李时珍莫名其妙地出现，莫名其妙地戳中了小五的笑点，觉得案例有了一丝魔性。整体故事线围绕着“酒”和“水井坊”，最后再以皇帝出现引出圣旨，即邀请函，因此故事和画面也并没有让小五觉得喧宾夺主。其实小五觉得，内容有点点长，光视频就2:31秒，主题露出太晚，不过案例很人性化地设置了“领旨”按钮，即跳过，用户可以直接到达领旨界面。

技术实现： Swiper + Video + Zepto

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

识别图中二维码

朕有道圣旨，你读一下-查阅二维码

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

标签