脉脉:职场变形图鉴

2019-07-04 H5案例分享 H5案例分享
脉脉:职场变形图鉴


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

识别图中二维码

职场变形图鉴-查阅二维码

完整欣赏此案例大约需要30秒


案例:职场变形图鉴

品牌:脉脉

亮点:

1.创意定位

脉脉是一款职场社交平台的app,主推线上商务社交,通过此职场的社交测试传播自己的APP的企业文化,为产品APP下载引流。

 

2.策划逻辑

整个H5大致分4部分:

 

①Loading部分:加载页面就是一群动物的头像快速切换,同时显示加载进度百分比数字;完成Loading后先获得微信授权,后自动播放。

 

②主题页:上方是自动的带着声音的小漫画格式,分别有猴子,兔子和狗三种代表不同职场人群的动物,下方写着“职场变形图鉴,毕业多年后的我们,现在变成了什么模样”,点击“开始测试”按钮进行测试。

 

③测试答题部分:用户需要分别回答4个回到毕业前的问题,3个来到工作后的问题。

 

回到毕业前:

Q1:毕业聚会时,暗恋的对象坐你旁边,你会怎么样?

 

Q2:选择职业时,你会听从谁的意见 ?

 

Q3:当你听室友跟现任有暧昧,你会怎么做?

 

Q4:你跟同学做好了毕业旅游攻略,有人临时提出改变路线,你会怎么办?

 

来到工作后:

 

Q5:当你被同事叫去参与年会表演时,你会怎么做?

 

Q6:想给你升职的老板和想跟你分手的伴侣同事掉水里,你会救谁?

 

Q7:当你作为参会者,会议内容跑偏并且超出时间,你会怎么做?

 

小五只能说脑仁太小,策划怎么能想出Q6这样的问题,莫非他正经历“职场得意,情场失意”的状态 ?不然,怎么会做这种问题, 如果真让我答,我选E:好开心~ 

 

④测试结果部分:回答完毕后会自动生成一张“职场变形图鉴”,图鉴上包括:用户毕业前和毕业后最匹配的两种动物,和他们的最佳cp,还有个职场能力描述。长按可保存图片到相册。还有“重新测试”和“查看成长秘籍”,最下方有脉脉的Logo和slogan“成就职业梦想”。点击“查看成长秘籍”就会跳转到脉脉的一个关于“你是如何在职场中一步步成长起来的?还有哪些职业梦想等待实现?”的论坛产品页面。点击“重新测试”按钮,再重新玩一遍。

 

3.设计上

手绘漫画风格,背景鲜艳的宝石蓝色,突出了色彩饱和度较低的人物,画风使故事更风趣。

 

4.体验上

加载速度快,画风流畅,右下角有音乐标识可静音浏览。回到毕业前和来到工作后的两种时间段的答题体验让人很容易察觉到从青春一下跳入职场的差距。



技术实现: HTML5



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

标签

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

相关推荐:

网易考拉工厂店&脉脉:第一次年终奖全国普查

脉脉:一张视力表看出你的2018年度字

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~