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

數(shù)英評分

收藏78 評論2

舉報 2017-10

掃描,分享朋友圈

眾所周知，中國的交通問題是一個世界級難題。

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

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

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

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

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

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

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

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

H5 的主體分為兩大塊：

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

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

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

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

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

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

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

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

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

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

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

雍正——滴滴大數(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é)

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

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

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

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

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

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

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

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

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

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

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

二維碼.png