67個品牌聯合制作了一支""視覺效果超酷""的H5 - 成都

通常，H5都是由1家品牌產品，并只代表自己，從來沒聽說過，能有這么多品牌聯合在一起，制作項目的？這H5究竟是什么來頭？？？咱們還是來先睹為快吧！

掃描二維碼，立即體驗！
（成都App用戶需點擊放大二維碼后，長按識別）

這H5要怎么操作？

可能有些朋友，直接打開H5就懵逼了，這H5怎么用呀？使用方式很類似于，蘋果手機的 Assistive Touch（輔助觸控）的操作方式，通過觸控按鍵，來進行APP氣泡的添加和刪除，在調出的APP列表里，還有搜索界面，可以查找，你想找的APP。

氣泡之間也有著非常真實的物理還原效果，你可以通過拖拽，搖動手機的方式來體驗，這就是H5的所有操作和效果了。

這支H5效果很特別，但它要做什么用？

效果真的很特別，也非常出乎意料。但是，這么做有什么用，看的我是一頭霧水？

其實，H5想表達的是一個類似“屏幕時間”的概念，簡單說，就是用可視化的方式來直觀呈現你使用各種應用的時間比例。

一個屏幕中，應用所占用的時間

屏幕時間的二維效果圖

你應該注意到了吧。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）