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

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

這H5要怎么操作？

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

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

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

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

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

一個屏幕中，應(yīng)用所占用的時間

屏幕時間的二維效果圖

你應(yīng)該注意到了吧。H5當中，所有氣泡是有大小的，同樣的APP，大氣泡代表時間投入多，小氣泡代表時間投入少，整個屏幕的氣泡展示，就視覺化呈現(xiàn)了一個人的習(xí)慣、特征和行業(yè)，這也是設(shè)計者的初衷。

不同人的不同屏幕時間

如果從概念本身出發(fā)，每個人的“屏幕時間”，應(yīng)該是自動進行生成的，而不是手動設(shè)置的，這樣才會更加的逼真和可信。

道理雖然如此，但受限于目前技術(shù)的限制，所以，H5還無法調(diào)用每個手機的數(shù)據(jù)信息。最后，才只能以這種方式來展示。

不同人的不同屏幕時間其實，咱們是沒必要糾結(jié)這些問題的。而應(yīng)該看到的是，原來H5是能呈現(xiàn)如此逼真和復(fù)雜效果的，這確實是讓人腦洞打開的實踐和想法。

屏幕時間示意圖

這支H5是誰做的？

看到這里，小呆也終于發(fā)現(xiàn)了，這支H5雖然涵蓋了多個品牌，但并非是任何一家出品，而是由一人作為自發(fā)項目，獨立制作完成的。

雖然，H5在完成度方面，還有很多問題，但當我得知，這支H5是由1人完成的時候，我還是有些震驚的！

必定，一支H5涉及到了策劃、設(shè)計、原型、開發(fā)、上線等等多個環(huán)節(jié)，而且這所有的環(huán)節(jié)，還都能做到如此的深入，這可就是非常困難的事情了。

就實現(xiàn)方式來說，這支案例的技術(shù)涉及到了 Processing、Cinema4D、After Effects、Houdini等工具，而主要的工作量集中在了代碼開發(fā)，而非設(shè)計圖的繪制。

小站之前也分享過作者另外一個H5項目——《國內(nèi)1000名知名設(shè)計師，一起被做成了一支H5！》

說到缺點么，主要還是完成度方面，就一支作品而言，這其實更像是一個DEMO，而非一個完整作品，沒有具體的結(jié)束與開始的感受，體驗很不完整。

不過，雖然很多人覺得看不懂，但是，H5還是會有一種很驚艷的觀賞體驗，大家更驚奇的是，原來H5還能實現(xiàn)如此復(fù)雜而真實的效果，如果稍加故事化，或者內(nèi)容化，這支H5就會非常有意思了。

看來，只用營銷的標準看待H5，還是太過于狹窄了，他的很多延展性，還有待于被發(fā)覺，這次的自發(fā)項目，就有這樣的一個啟示。

分享這樣的技術(shù)腦洞給大家，也希望能給大家?guī)硪恍﹩l(fā)，同時，這支H5也讓小呆感慨，這個行業(yè)也真的是人外有人，天外有天！很多大神都在悶聲做研究呀！真是長見識了！

好了，這就是小呆這期的分享了，讓更多人看到好的創(chuàng)意作品，讓更多人看到作品背后的價值，希望今天的分享能讓你有所收獲，歡迎關(guān)注小呆的H5小站！歡迎大家留言與我互動~

注：本帖所有圖片來源于公眾號：壞打印機

成都用戶原創(chuàng)，轉(zhuǎn)載請遵守規(guī)范
作者公眾號： H5廣告資訊站（ID：H5-zixunzhan）