这是H5资讯站的第：
896
篇更新
-
今天，小呆要给你抄个冷饭，分享个3年前的H5，你可能会疑惑，这么老的案例能好么？
可以这么说，这是在我印象里，美术执行最厉害的H5，如果你没有见过这支H5，那真就太可惜了。
《我们的精神角落》是2016年上线的，其实官方原版早就下线了，你之所以还能看到这个案例，
是因为，小呆为能够保存这个项目，自己租了服务器，才得以保存H5，而在我的酷5网，这支H5的点击量也惊人的高。
项目设计师：wang 2mu、super sonic
因为手机屏幕大小和像素的限制，我们在H5中很难看到真正清晰的画面，但其实，H5的场景绘制是非常精致的，而更为下功夫的是他的动态部分。
场景1-动态组建列表
场景4-动态组建列表
场景4-动态组建列表
以下是部分道具物品的结构示意图，如果不是展开的示意图，你不可能想到，在场景里的这些小道具，原来有这么复杂的结构。
这个在画面里，只有指甲盖大小的佛头，居然如此的复杂
传送机的结构展开演示图
冰箱的结构展开演示图
植物的结构演示图
这部分画面里几乎看不见，但同样画的及其细致
微波炉的结构展开演示图
这部分是放大后的部分场景道具和物品，其实这些内容绘制的清晰度很高，但因为手机屏幕太小，所以，很难看的比较清楚。
豆子的设定
坠落豆子的设定
H5的加载动画豆子+火车厢
反射镜
石膏像
格挡围栏
耳朵小提琴
复古电池
电池+自动售卖机
冰冻的鼻子怪兽
奔跑的鼻子怪兽
厨房的组合柜
厨房的组合柜
加热的炉火
复古的电冰箱
通过这些细节图，你会发现，原来场景中，这些道具绘制的是如此精细，你可能会问，这些场景都是怎么绘制出来，其实用的都是最常规的工具。
用PS也能制作出的动态闪电动画
就是PS、AI和AE，这三款工具，而使用率最高的，就是所有设计师电脑里都有的PS，看了，下方的场景步骤解析图，你就知道了。
眼睛场景步骤解析
大脑场景步骤解析
除了画面，这支H5更为惊人的设计部分是他的交互设计，他几乎做到了，每一个场景的所有道具都能实时交互的地步，以下是H5的场景交互解析图：
场景1中，有18个可点击的实时交互点，每个交互点，都搭配了相关的场景动画
场景2中，实时交互点增加到了20个，每个交互点，都搭配了相关的场景动画，并且，还有动画彩蛋的加入。
到了场景3，实时交互点增加到了22个，每个交互点，都搭配了相关的场景动画，可以说，画面中的任何细节都可以通过点击来进行互动。
最后的场景4，实时交互点增加到了35个，每个交互点，都搭配了相关的场景动画，所有的场景元素，都可以直接进行互动，这样的设计，难度极高。
-正常来说，一支营销H5的交互点设计在10～30个之间。
而这支，总数超过了100次，但在观看时，你可能并未觉察，有这么多交互设计，这就是因为，场景中的正反馈做的非常自然和到位。
所以，大量的交互才不会让你产生不耐烦的情绪。同时，这支H5的的游戏设计也颇有深意，在5个场景中埋藏了对豆瓣这款网站产品的综合解读。
主题这部分内容，小呆就不再展开说了，以后有机会，咱们再更新相关内容。
单从最终效果来说，这支H5不仅仅是美术超强，而且是从投入到产出，都超出了一支营销类H5的能力范畴。
-
真难以想象，这样一个量级的项目，居然只是2位设计师做的，太厉害了！不可思议！
如果你想获得这套超过200MB的演示动态资料，只需要在公众号后台回复“豆瓣”就可以了！
此次H5项目设计师：wang 2mu、super sonic
-
优秀的设计作品，值得分享
最近，小呆的新书刚刚上市，点击下方图书配图，可直接了解新书详情，这就是今天的分享内容了，希望你能够有所收获，咱们下期内容见！
相关主题文章
同样是做H5，为什么别人比你卖的贵
2019新广告法禁用词！上线了
《长安十二时辰》大结局，1天的故事，美术组设计用了2年
从H5到TVC | 憋了11年的豆瓣终于炸锅了
. 进入资讯站社群，看H5分享 - 加微信号： kuzhanh5 - 微博:@小呆xdxd QQ群:465521360 微信:zixunzhanxiaomi
点击
原文链接
，进入作者的书店
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
