这是H5信息站第896次更新

今天小呆就给大家分享一下3年前的H5。您可能想知道，这么老的案例还能更好吗？

可以说，这是我印象中美术表现最好的H5。如果你还没有见过这款H5，那就太遗憾了。

《我们的心灵角落》于2016年上线，其实官方原版早已下线。你还能看到这个案例的原因是，

因为小呆租了一台服务器来挽救这个项目，从而能够挽救H5。在我的网站上，这个H5的点击量也是出奇的高。

《我们的心灵角落》是一款H5解密游戏。当你第一次体验的时候，会给人一种特别的新奇感，而在这种新奇感的背后，

这是一种难以想象的艺术表现。以上，两位项目作者发布了大量项目背后的设计手稿。可以说，这些手稿比作品本身更精彩！

项目设计师：王二木，

由于手机屏幕尺寸和像素的限制，我们很难在H5中看到真正清晰的画面，但事实上，H5的场景绘制非常细腻，并且在其动态部分下了更多的功夫。

场景一-动态成分列表

场景2-动态成分列表

场景3-动态成分列表

场景3-动态成分列表

场景4-动态成分列表

场景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的能力。

很难想象如此规模的项目实际上是由两名设计师完成的。太棒了！极好的！

由于微信公众号上传GIF的2M限制，该推文无法完整展示项目中大量图片的动态演示。

如果你想获得这套100多条演示动态素材，只需在公众号后台回复“豆瓣”即可！

本次H5项目设计师：王2mu，

让更多人看到优秀的H5作品，让更多人看到作品背后的价值。希望今天的分享能够帮助您有所收获。欢迎关注小呆H5网站！