洽客in + 首旅如家：都说要做有趣的人，看了这个你就懂了

2017-08-03 H5案例分享 H5案例分享

案例：都说要做有趣的人，看了这个你就懂了

出品：洽客in + 首旅如家

亮点：

策划上，交互视频。Loading完毕，首屏是一张主题为“乐游天下”的纸，引导用户“掀开看看”，此时用户点击屏幕，会播放一个引导短视频，视频中“洽总”要“带你去看有趣的生活”，随后用户需要在伦敦、巴黎和洛杉矶中，选择心仪的城市，接着以视频的形式，带你走进这座城市，体验独特而有趣的生活。每个城市的视频播放完毕还有不同的交互来深入体验。结尾页用户可以选择其他的城市来体验，点击“探索洽客in空间”可跳转活动链接，还可以分享给好友“秀出城市纸雕玩法”。

设计上，三个城市皆为纸雕风格，灰白背景色调，人物为真人拍摄，在纸雕背景下格外凸显。每个城市都是完全不同的体验，视频播放完毕也是不同的交互，“阅读周刊”、“餐厅菜单”、“窗前观景”，各具特色，还配有不同的音效，非常细腻。

体验上，虽然背景是纸雕风格，但是将每个城市的体验描绘的很形象具体，同时给人留下了足够的想象空间，让人心神向往。案例在使用视频的形式的同时，也以不同的交互体验保留了互动性。除了小五私以为视频中的“洽总”有点点“怪蜀黍”以外，感觉其他一切都很美好…

技术实现： CreateJS + Zepto + Hammer.js

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

识别图中二维码

都说要做有趣的人，看了这个你就懂了-查阅二维码

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

标签