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

掃描二維碼，立即體驗(yàn)！
（成都App用戶(hù)需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）

這H5要怎么操作？

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

氣泡之間也有著非常真實(shí)的物理還原效果，你可以通過(guò)拖拽，搖動(dòng)手機(jī)的方式來(lái)體驗(yàn)，這就是H5的所有操作和效果了。

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

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

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

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

屏幕時(shí)間的二維效果圖

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

不同人的不同屏幕時(shí)間

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

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

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

屏幕時(shí)間示意圖

這支H5是誰(shuí)做的？

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

雖然，H5在完成度方面，還有很多問(wèn)題，但當(dāng)我得知，這支H5是由1人完成的時(shí)候，我還是有些震驚的！

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

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

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

說(shuō)到缺點(diǎn)么，主要還是完成度方面，就一支作品而言，這其實(shí)更像是一個(gè)DEMO，而非一個(gè)完整作品，沒(méi)有具體的結(jié)束與開(kāi)始的感受，體驗(yàn)很不完整。

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

看來(lái)，只用營(yíng)銷(xiāo)的標(biāo)準(zhǔn)看待H5，還是太過(guò)于狹窄了，他的很多延展性，還有待于被發(fā)覺(jué)，這次的自發(fā)項(xiàng)目，就有這樣的一個(gè)啟示。

分享這樣的技術(shù)腦洞給大家，也希望能給大家?guī)?lái)一些啟發(fā)，同時(shí)，這支H5也讓小呆感慨，這個(gè)行業(yè)也真的是人外有人，天外有天！很多大神都在悶聲做研究呀！真是長(zhǎng)見(jiàn)識(shí)了！

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

注：本帖所有圖片來(lái)源于公眾號(hào)：壞打印機(jī)

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