网易哒哒：测测你的哲学气质

2018-11-15 H5案例分享 H5案例分享

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

识别图中二维码

测测你的哲学气质-查阅二维码

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

案例：测测你的哲学气质

出品：网易哒哒

亮点：

策划上，恰逢世界哲学日。这则案例用问答的形式带我们一起了解哲学背后的故事，测一测我们普通人内心深处潜在的哲学人格，同时也附加科普的作用。案例一个10个问题，每个问题2-4个答案不等。根据用户每个问题的选择，生成个人哲学性格图之后，用户可点击详情页查看，诸如犬儒主义、斯多葛主义背后的含义，对哲学小白也很友好。根据用户答题的选项对应产生 23 种哲学性格。
设计上，浅色调，整体画面以素色为主，有古希腊雕塑，有粒子移动，有近代油画。画面丰富，风格多样。没有五颜六色的物体，唯黑白两色，以及自己与自己的交流。这就是哲学最开始出现时的样子。
技术上，使用 Zepto 做 DOM 的操作与画面的隐现。画面的转场与衔接是通过在 canvas 画布上移动关键帧来产生动画的效果。不同场景的音效进行预加载，到特定画面再进行触发，配合转场动画实现平滑的过渡效果。
体验上，场景之间衔接自然，转场动画自然流畅。由哲学这个主题，引发用户自身探索的欲望，通过简单的答题方式来让用户了解自己内心潜在的哲学性格。并在最后的结果页附加二级页的内容详情，让用户了解诸如犬儒主义、斯多葛主义等这些哲学名词背后的含义。案例的画面上采用素色的设计，隐含了哲学思考自身的含义。

技术实现： Zepto, canvas

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

标签