优信二手车：要要要要……要干嘛！！

2017-10-30 H5案例分享 H5案例分享

案例：要要要要……要干嘛！！

出品：优信二手车

亮点：

策划上，视频类H5。进入案例，Loading部分一辆车驶过屏幕中央，随后在首屏有两个按钮，用户可以选择“点击屏幕把她唤醒”，或者“跳过剧情直通真相”。选择前者开始播放视频，视频分两部分，第一部分长2分37秒，以第一人称的角度，讲述“我”被两个男人带上车后的心理活动以及路上的遭遇，第二部分长24秒，讲述事件的真相。视频结束后，在结尾页用户可以选择“我想去现场”跳转链接填写信息参加“优信购车节”，或“福利传送门”下载App领取福利。点击“给朋友送影票”提示分享给好友。

设计上，第一部分主要以文字动画+配音的形式讲述故事，文字配合剧情会有相应的动画，使整个故事更有画面感。黑色的背景，人物实时的心理活动描写，以及波澜起伏的剧情，让案例内容充满了吸引力。声音部分，背景一直都有渲染紧张气氛的音乐铺底，女声配音为主讲述故事，随着剧情发展有对话、刹车等剧情声音元素出现。

体验上，文字动画+配音来讲述故事的形式，确实蛮少见，体验过后回味无穷。案例在气氛的渲染上做得很到位，代入感很强，文字配合剧情而出现的动效给人的画面感相对文字本身来说更加具象，故事设定也很有趣，即使视频很长，也没有让原本对视频有所心理排斥的小五产生疲劳感。案例在最后的剧情跳转虽然非常突(gou)兀(xie)，但是给人的印象真的超级深刻。最后，案例虽为视频，但是在安卓端（测试环境为小米）的表现还算不错。

技术实现： jQuery + Video

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

识别图中二维码

要要要要……要干嘛！！-查阅二维码

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

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

标签