腾讯看点：测测你的职业人设

2020-07-13 H5案例分享 H5案例分享

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

识别图中二维码

测测你的职业人设-查阅二维码

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

案例：测测你的职业人设

品牌：腾讯看点

技术实现： JavaScript

亮点：

1、创意定位

腾讯看点根据霍兰德职业兴趣理论，推出的职业人设测试H5。这支H5是定期品牌宣传，结合有趣的内容，让品牌植入用户心中。

2、策划上

① 首屏中大标题介绍本支H5为职业人设测试，根据的理论；

② 而后是6个问题，每个问题2、3个或者6个选项，问题是文字配合抽象的图形；选择选项后，自动切换到下一题；

③ 回答完问题后，选择性别（男生或女生），点击“查看结果”按钮，生成根据你刚刚对6个问题的选择，理论依据为霍兰德职业兴趣理论，生成的职业人设海报，海报中还有人设、人设标签、和对应职业的匹配程度、推荐的专业；还有小惊喜，滑动人物可以转动，转动的过程中，与你同类型的名人、未来职业猜想。

3、设计上

简洁干净的画面，抽象的图案，最后人设人物3D立体。

4、技术上

最后一屏可以转动的人物，采用36张图片（PNG格式），依次是人物水平360°旋转不同角度的图片；当用户滑动人物时，依次切换图片，视觉上产生3D立体视觉。

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

标签