拉勾×爱卡汽车:测测你的职场气质配开什么车

2019-04-19 H5案例分享 H5案例分享
拉勾×爱卡汽车:测测你的职场气质配开什么车


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

识别图中二维码

测测你的职场气质配开什么车-查阅二维码

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


案例:测测你的职场气质配开什么车

品牌:拉勾×爱卡汽车

亮点:

1. 创意定位

拉勾联合爱卡汽车推出的横屏的答题测试类的H5,测试基于霍兰德职业倾向理论。

 

2. 策划上

①过渡页标题是“你的职场气质配开什么车”中间一个人物左右翻滚,准备起床,加载完后进入下一屏。

②一共有五道题,滑动测试,选择在画面的下方,题目与选项都融入画面中,如果中间有题目没有选,点击“提交”时,会跳转到未答题的画面上。

③第一个问题,你一睁眼,九点半了,还有半小时就到上班时间,你决定?第二个问题,你来到公司,刚坐下,老板就开会通知大家:即日起实施996工作制,你会?第三个问题,春光明媚~和同事出去吃饭,点菜时你会?第四个问题,吃饭时,你最感兴趣的话题是?第五个问题,地铁末班车过了,打车要排队两小时,有辆车多好啊!最打动你的购车理由是?滑到最后,点击“提交”按钮。

④输入姓名,点击“ok”按钮,生成一张属于你的职场气质,有雷达图显示你的气质,并匹配了一个座驾,下方二维码形成回流。

 

3. 设计上

横屏条漫式,走设计风,注重画面的整体感,加了一些热点小细节,例如巴黎圣母院和996。

 

4. 体验上

不选择题目答案,也可以向右侧继续滑动,查看下一题目,但是最后提交的时候,会提示漏题。触摸屏幕时,手不能太靠边,要不会有跳出微信的现象。



技术实现: jQuery tween vue



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

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

拉勾:恭喜你,抽中了人生重来一次的机会

爱卡汽车:2017XMEETING车迷大会

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~