一个测试类H5的诞生-测一测你的孤独指数

原创 1 收藏 评论
举报 2019-01-17

图片1.png

甲方爸爸喜马拉雅市场部,希望做一个H5推广新课程,《范景中讲西方艺术史》,于是有了这个H5需求。

正赶上网易的人格测试H5刷了一波,于是决定做一个在博物馆答题测试的H5,

致敬网易,把刷屏H5做出了新高度。

网易测人格,咱测一测孤独指数。

策划先行,设计跟上。

团队讨论后,希望能够造出一种沉浸式的氛围,让用户更加有带入感。

一个好的视觉体验需要有一个双重人格的设计,不断的自我否定。

附上头图进化史,说实话摆出来一看,第一版是有点辣眼睛的。最终给到客户爸爸的版本,无论是高级感还是精细度都要高很多。

未标题-1.jpg

市面上测试类的H5同质化还是很严重的,都说画面不够动效来凑。为了做出些区别,后期大哥花心思做了很多动效。

这里用到的动画制作工具,flash和ae。

加载特效.gif

loading动画

1.gif

看魔法小樱长大的孩子

2.gif

答题页的触发小动画

结果…

技术复现后资源巨大…

不得不佩服,技术妹子删减动画的能力。

删减多余帧数合并雪碧图,再加上分段加载终于(偷偷跑你流量),控制住了loading时间。

技术部分主要使用白鹭引擎,H5开发万用神器。

图片2.png

最后整个方案纠结最多的就是生成海报了,改了n版,附上我最喜欢的一版本,最终效果如何,客官自己扫描体验一下吧。

图片3.png

1547718889.png

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)