京东：JD Red Story 第二季

2017-05-16 H5案例分享 H5案例分享

案例：JD Red Story 第二季

出品：京东

亮点：

策划上，图文+视频展示类。最佳体验方式为锁屏后横屏浏览。Loading完毕进入首页，左滑屏幕查看内容，右滑查看上一页。每页都有一个故事主题，和两句叙述，底部有个播放按钮，点击后会播放3秒左右的短视频，并定格在最后一帧，点击画面上的送货员，可以查看该送货员的信息，并了解主题故事背景。结尾页将所有“故事”发生的地点列在一起，点击即可回跳到对应页。

设计上，跟第一季的“JD Red Story”一样，照片是黑白风格，但环境中有一抹“京东红”配送员。跟上一季不同的是，这次的照片动了起来，镜头拉动最后定格，照片便是视频最后的定格，并且在结尾页能跳回任意页面上，非常人性化。

体验上，很简单的滑屏翻页H5，但从画面表现到内容展示来看，文字本身就很戳人，很有画面感，配合照片看效果更赞，背景音乐恢弘大气，所以整体一点也不会觉得简单或者粗糙。

技术实现： Zepto + Howler.js(JS音频控制库)

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

识别图中二维码

JD Red Story 第二季-查阅二维码

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

标签