京东：时尚生活体验馆

2018-06-15 H5案例分享 H5案例分享

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

识别图中二维码

时尚生活体验馆-查阅二维码

完整欣赏此案例大约需要5分钟

案例：时尚生活体验馆

出品：京东

亮点：

策划上，通过8个家居场景，展示时尚生活体验馆的种种可能。首先是一个有桌子、椅子和电视的家，点击桌子上的遥控器，电视放大，穿越到电视里，出现8个不同风格的家居场景，每个场景都有几个不同的商品穿插其中，不仅展示出了物品的实际用途，也使画面更具一体感。滑动对应的屏幕，卡通人物主人公，以第一人称或者第三人称的角度，讲述事故，为当前家居讲述背后的故事，可以点击当前场景的右下角“完整故事”按钮，听完整故事。这种带入感，让每个场景的物品，都附有了存在感，乐意点击进入，查看物品的细节和购买链接。可能是与每个场景主人公的叙述有共鸣，也可能是喜欢当前场景的布置画面，希望自己的家，也这么美。
设计上，手绘卡通风格，画面细腻，很有高级感。尤其喜欢第一个场景中的美女和第八个场景中老奶奶和猫。
技术上，每个场景的主人公动画，使用CSS3动画实现。音频上，每个音频都是一个audio标签，达到了预加载，这样，播放音频时，不会有卡顿。
体验上，横屏观看，既支持横向锁屏观看，也支持自然横屏观看。8个场景中，可以滑动屏幕慢慢观看，也可以点击左右箭头，快速切换到上一个或者下一个场景。每个场景采用内容独白的方式，每一个小故事都有专业的声优配音，并通过点击的方式显示完整的故事背景，使得每个故事中的人物都更为鲜活，引发用户的探索欲望。虽然是引导用户在京东购物，但是这样方式，不生硬，像是朋友推荐的感觉。

技术实现： Vue.js + jQuery

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

京东：时尚生活体验馆

标签

相关推荐：

天猫：你敢不敢出色？

索菲亚：和黄景瑜一起布置新家吧