67个品牌联合制作了一支“视觉效果超酷”的H5

原创2019-10-17举报74718

67个品牌联合制作了一支“视觉效果超酷”的H5

扫描,分享朋友圈

一支视觉效果超酷的H5:当你的手机App使用时长可视化

通常,H5都是由1家品牌产品,并只代表自己,从来没听说过,能有这么多品牌联合在一起,制作项目的?这H5究竟是什么来头???咱们还是来先睹为快吧!

一支视觉效果超酷的H5:当你的手机App使用时长可视化

扫描二维码,立即体验!
(数英App用户需点击放大二维码后,长按识别)
一支视觉效果超酷的H5:当你的手机App使用时长可视化

这H5要怎么操作?

可能有些朋友,直接打开H5就懵逼了,这H5怎么用呀?使用方式很类似于,苹果手机的 Assistive Touch(辅助触控)的操作方式,通过触控按键,来进行APP气泡的添加和删除,在调出的APP列表里,还有搜索界面,可以查找,你想找的APP。

一支视觉效果超酷的H5:当你的手机App使用时长可视化

一支视觉效果超酷的H5:当你的手机App使用时长可视化

气泡之间也有着非常真实的物理还原效果,你可以通过拖拽,摇动手机的方式来体验,这就是H5的所有操作和效果了。

一支视觉效果超酷的H5:当你的手机App使用时长可视化一支视觉效果超酷的H5:当你的手机App使用时长可视化

这支H5效果很特别,但它要做什么用?

效果真的很特别,也非常出乎意料。但是,这么做有什么用,看的我是一头雾水?

其实,H5想表达的是一个类似“屏幕时间”的概念,简单说,就是用可视化的方式来直观呈现你使用各种应用的时间比例。

一个屏幕中,应用所占用的时间

一支视觉效果超酷的H5:当你的手机App使用时长可视化


屏幕时间的二维效果图

一支视觉效果超酷的H5:当你的手机App使用时长可视化

你应该注意到了吧。H5当中,所有气泡是有大小的,同样的APP,大气泡代表时间投入多,小气泡代表时间投入少,整个屏幕的气泡展示,就视觉化呈现了一个人的习惯、特征和行业,这也是设计者的初衷。

不同人的不同屏幕时间

一支视觉效果超酷的H5:当你的手机App使用时长可视化

如果从概念本身出发,每个人的“屏幕时间”,应该是自动进行生成的,而不是手动设置的,这样才会更加的逼真和可信。

道理虽然如此,但受限于目前技术的限制,所以,H5还无法调用每个手机的数据信息。最后,才只能以这种方式来展示。

不同人的不同屏幕时间其实,咱们是没必要纠结这些问题的。而应该看到的是,原来H5是能呈现如此逼真和复杂效果的,这确实是让人脑洞打开的实践和想法。

屏幕时间示意图


这支H5是谁做的?

看到这里,小呆也终于发现了,这支H5虽然涵盖了多个品牌,但并非是任何一家出品,而是由一人作为自发项目,独立制作完成的。

虽然,H5在完成度方面,还有很多问题,但当我得知,这支H5是由1人完成的时候,我还是有些震惊的!

必定,一支H5涉及到了策划、设计、原型、开发、上线等等多个环节,而且这所有的环节,还都能做到如此的深入,这可就是非常困难的事情了。

就实现方式来说,这支案例的技术涉及到了 Processing、Cinema4D、After Effects、Houdini等工具,而主要的工作量集中在了代码开发,而非设计图的绘制。

小站之前也分享过作者另外一个H5项目——《国内1000名知名设计师,一起被做成了一支H5!》

说到缺点么,主要还是完成度方面,就一支作品而言,这其实更像是一个DEMO,而非一个完整作品,没有具体的结束与开始的感受,体验很不完整。

不过,虽然很多人觉得看不懂,但是,H5还是会有一种很惊艳的观赏体验,大家更惊奇的是,原来H5还能实现如此复杂而真实的效果,如果稍加故事化,或者内容化,这支H5就会非常有意思了。

看来,只用营销的标准看待H5,还是太过于狭窄了,他的很多延展性,还有待于被发觉,这次的自发项目,就有这样的一个启示。

分享这样的技术脑洞给大家,也希望能给大家带来一些启发,同时,这支H5也让小呆感慨,这个行业也真的是人外有人,天外有天!很多大神都在闷声做研究呀!真是长见识了!

好了,这就是小呆这期的分享了,让更多人看到好的创意作品,让更多人看到作品背后的价值,希望今天的分享能让你有所收获,欢迎关注小呆的H5小站!欢迎大家留言与我互动~


注:本帖所有图片来源于公众号:坏打印机


数英用户原创,转载请遵守规范
作者公众号: H5广告资讯站(ID:H5-zixunzhan)

67个品牌联合制作了一支“视觉效果超酷”的H5

扫描,分享朋友圈