案例

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

字号+ 作者:小左 来源:未知 2018-11-16 我要评论

网易哒哒:测测你的哲学气质h5

2018-11-15
网易哒哒:测测你的哲学气质

 

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

识别图中二维码

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

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

 

案例:测测你的哲学气质

出品:网易哒哒

亮点:

  1. 策划上,恰逢世界哲学日。这则案例用问答的形式带我们一起了解哲学背后的故事,测一测我们普通人内心深处潜在的哲学人格,同时也附加科普的作用。案例一个10个问题,每个问题2-4个答案不等。根据用户每个问题的选择,生成个人哲学性格图之后,用户可点击详情页查看,诸如犬儒主义、斯多葛主义背后的含义,对哲学小白也很友好。根据用户答题的选项对应产生 23 种哲学性格。

  2. 设计上,浅色调,整体画面以素色为主,有古希腊雕塑,有粒子移动,有近代油画。画面丰富,风格多样。没有五颜六色的物体,唯黑白两色,以及自己与自己的交流。这就是哲学最开始出现时的样子。
  3. 技术上,使用 Zepto 做 DOM 的操作与画面的隐现。画面的转场与衔接是通过在 canvas 画布上移动关键帧来产生动画的效果。不同场景的音效进行预加载,到特定画面再进行触发,配合转场动画实现平滑的过渡效果。

  4. 体验上,场景之间衔接自然,转场动画自然流畅。由哲学这个主题,引发用户自身探索的欲望,通过简单的答题方式来让用户了解自己内心潜在的哲学性格。并在最后的结果页附加二级页的内容详情,让用户了解诸如犬儒主义、斯多葛主义等这些哲学名词背后的含义。案例的画面上采用素色的设计,隐含了哲学思考自身的含义。

 

 

技术实现: Zepto, canvas

 


h5
相关文章
  • H5ideas:网易夸夸群史上最精彩一役

    H5ideas:网易夸夸群史上最精彩一役

  • 网易云音乐:留声40年 H5

    网易云音乐:留声40年 H5

  • 腾讯:腾讯20周年司庆全新出发

    腾讯:腾讯20周年司庆全新出发

  • 抖音:美好生活喵斯卡

    抖音:美好生活喵斯卡