腦內(nèi)映像館H5：你不知道的滴滴科技

數(shù)英評(píng)分

收藏78 評(píng)論2

舉報(bào) 2017-10

掃描,分享朋友圈

眾所周知，中國(guó)的交通問題是一個(gè)世界級(jí)難題。

但是，這個(gè)難題既是挑戰(zhàn)，也是機(jī)會(huì)。

滴滴便抓住了這個(gè)機(jī)會(huì)，經(jīng)過過去五年的高速發(fā)展，現(xiàn)在已經(jīng)成為全球最大的一站式出行平臺(tái)。在2017年的戰(zhàn)略布局中，更是一直在踐行“共享出行數(shù)據(jù)、共建智慧交通”，并且，不斷在用層出不窮的“黑科技”解決這個(gè)世界難題。

那么，滴滴科技具體都有哪些、都是些什么呢？

為了讓普通用戶都能更清晰、更直觀地了解，鯨夢(mèng)受滴滴邀請(qǐng)，制作了這支腦洞大開的H5——《腦內(nèi)映像館》。

下面，為大家來揭開《腦內(nèi)映像館》的制作始末和創(chuàng)作秘密。

一、什么是“腦內(nèi)映像館”

顧名思義，你可以理解為這是一個(gè)展覽腦內(nèi)秘密的博物館，這里陳列了很多名人，古今中外應(yīng)有盡有。

Loading 頁面是一個(gè)不斷旋轉(zhuǎn)的木偶人頭，彌漫著一股詭異的氣息。

H5 的主體分為兩大塊：

一是腦內(nèi)映像館，里面有6個(gè)名人大腦可供選擇，每一個(gè)名人對(duì)應(yīng)一種科技。

二是滴滴智慧大腦，集中展示介紹這6大科技。

腦內(nèi)映像館H5：你不知道的滴滴科技

Loading 頁加載完之后，我們就來到了“腦內(nèi)映像館”的大門，門口還有兩個(gè)呆萌的守門人。他倆惶恐不安，悄悄進(jìn)行腦內(nèi)對(duì)話，原來是怕客人打開館內(nèi)的腦袋，秘密被發(fā)現(xiàn)。

點(diǎn)擊門口的紅色帷帳進(jìn)入之后，有幾個(gè)不停旋轉(zhuǎn)的名人人頭等待挑選，他們分別是——雍正皇帝、阿爾法狗、哥倫布、印度人、發(fā)明家、唐代地理學(xué)家賈耽，任君挑選。

腦內(nèi)映像館H5：你不知道的滴滴科技

任意選擇一個(gè)人物之后，他的大腦就被打開了，跳出一個(gè)與這個(gè)人物相匹配的腦內(nèi)動(dòng)畫。細(xì)細(xì)一看，這些腦內(nèi)動(dòng)畫還在微微浮動(dòng)，輕輕搖晃你的手機(jī)，還會(huì)驚奇地發(fā)現(xiàn)：動(dòng)畫會(huì)隨著手機(jī)的運(yùn)動(dòng)而運(yùn)動(dòng)。

注意注意，這里運(yùn)用了陀螺儀技術(shù)，增強(qiáng)了動(dòng)畫的立體感和層次感，也增加了觀看的趣味性。

接著，我們就鉆進(jìn)他的腦洞里看一看，到底有什么秘密吧。

溫馨提醒：橫屏觀看效果更佳。

每一個(gè)秘密，都是一個(gè)滴滴科技。這里嵌入的是6支動(dòng)畫短片（由滴滴提供）。分別是：

雍正——滴滴大數(shù)據(jù)；阿爾法狗——機(jī)器學(xué)習(xí)；哥倫布——智能規(guī)劃路線。

印度人——智能拼車；發(fā)明家——潮汐車道；賈耽——智慧誘導(dǎo)屏。

腦內(nèi)映像館H5：你不知道的滴滴科技

當(dāng)這些全部看完之后，我們就穿越到現(xiàn)代的滴滴智慧大腦里了，這里面又用文字詳細(xì)地介紹了6大科技——滴滴大數(shù)據(jù)、機(jī)器學(xué)習(xí)、智能規(guī)劃路線、智能拼車、潮汐車道、智慧誘導(dǎo)屏。

腦內(nèi)映像館H5：你不知道的滴滴科技

二、你可能沒注意到的細(xì)節(jié)

到這里，整個(gè) H5 就結(jié)束了，檢驗(yàn)一下你的細(xì)心程度，下面這3個(gè)細(xì)節(jié)你注意到了嗎？

1、在觀看腦內(nèi)秘密短片的過程中，你可以有兩個(gè)選擇，一個(gè)是“關(guān)掉”按鈕，關(guān)掉之后，你可以返回去重新選擇一個(gè)腦袋；旁邊還有個(gè)“下一個(gè)”按鈕，你就可以直接觀看下一個(gè)腦內(nèi)秘密短片了。

2、看完一個(gè)秘密短片后，便會(huì)直接跳到與之對(duì)應(yīng)的科技介紹。比如，“雍正的大腦”跳轉(zhuǎn)到“滴滴大數(shù)據(jù)”。同時(shí)，這是一個(gè)雙行道，你也可以通過“去看看別的大腦”按鈕返回到雍正的界面，然后再去選擇別的大腦。

3、除了一個(gè)西域風(fēng)情的背景音樂之外，每一個(gè)互動(dòng)的地方，我們還設(shè)置了不同的細(xì)節(jié)音效，比如門口的“管他呢”、選腦袋時(shí)的“下一個(gè)”按鈕，劃開大腦的“手指”處等。

三、再來說說幾個(gè)技術(shù)處理

如果你不是技術(shù)宅，也不是程序員，可能對(duì) H5 里運(yùn)用的技術(shù)不太了解，讓我來給你淺顯地說明一下。

在長(zhǎng)達(dá)一個(gè)月的制作過程中，我們的 H5 技術(shù)團(tuán)隊(duì)提供的程序方案也經(jīng)歷了各種嘗試，甚至是推翻性重改。最終呈現(xiàn)給我們的就是一個(gè)風(fēng)格詭異、畫面流暢、聲音和諧的腦內(nèi)世界。值得一說的是我們對(duì)聲音文件、圖片請(qǐng)求、資源加載等的處理，主要是以下三個(gè)方面：

1、聲音方面：由于無法進(jìn)行正常地預(yù)加載，將會(huì)導(dǎo)致音效無法精準(zhǔn)契合時(shí)間點(diǎn)。但是，如果沒有加載頁面，那么觀眾就無法提前熟悉我們的場(chǎng)景設(shè)定，也就不能愉快地到腦內(nèi)映像館里自由參觀了。為了解決這個(gè)問題，我們對(duì) aac 的聲音文件做了一個(gè) base 64碼的轉(zhuǎn)碼處理。

2、圖片請(qǐng)求：這支H5中包含了大量的圖片，為了使觀看更為流暢，我們將圖片資源轉(zhuǎn)換為JS資源，從而將圖片的請(qǐng)求數(shù)量從近2000個(gè)壓縮到了100多個(gè)；同時(shí)，也將原始的超過100 M 的資源包壓縮到了不到60 M 。

3、資源加載：資源加載是按需加載，就是在合理的時(shí)間加載合適的資源，如圖片、音頻等，讓觀眾更快地觀看到第一頁的內(nèi)容。

掃描二維碼，進(jìn)腦內(nèi)映像館逛逛！
（數(shù)英網(wǎng)APP用戶需點(diǎn)擊放大二維碼，長(zhǎng)按識(shí)別）

二維碼.png