來(lái)源：H5廣告資訊站
作者：小呆
數(shù)英網(wǎng)用戶原創(chuàng)文章，轉(zhuǎn)載請(qǐng)聯(lián)系本人！
記得在上個(gè)月小站推薦萬(wàn)達(dá)的第一支一鏡到底H5作品時(shí)，就有用戶曾放下狠話：“你就等著我們的一鏡到底吧！” 因?yàn)榱粞缘娜耸侨?nèi)的技術(shù)大神，自然也就引起了我們平臺(tái)的高度重視。而時(shí)隔半月，當(dāng)我在22號(hào)晚上真的看到這支讓我等著的移動(dòng)端廣告時(shí)，那感覺(jué)就是，這牛逼不是吹的，我全家都服了！大神，快快快！趕緊給我再簽個(gè)名吧！
掃描二維碼，立即體驗(yàn)
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）
當(dāng)天晚上我就把作品分享了出去，然后壯觀的場(chǎng)景就出現(xiàn)了，下方為小呆的朋友圈截圖，因?yàn)閷?shí)在是太多了，所以就列舉了一部分分享：
小呆的朋友圈截圖
這么NB的H5誰(shuí)做的？
從作品風(fēng)格來(lái)看，雖然內(nèi)容方向偏差極大，但很多人會(huì)猜測(cè)此次的《穿越宇宙的邀請(qǐng)函》與3個(gè)月前火爆一時(shí)的《淘寶造物節(jié)邀請(qǐng)函》是同家供應(yīng)商出品，而通過(guò)域名信息和小站的多方調(diào)查，小呆可以確切的證實(shí)這個(gè)猜測(cè)，他們同時(shí)出品于上海VML的同支團(tuán)隊(duì)，操盤手是《淘寶造物節(jié)邀請(qǐng)函》的原班人馬。
供應(yīng)商的其它作品截圖
那么，這么驚艷的效果是如何實(shí)現(xiàn)的？
不夸張的說(shuō)，大多數(shù)人都被這支宇宙級(jí)的雙11廣告給嚇傻了，自認(rèn)為見(jiàn)多識(shí)廣的我也同樣如此。
動(dòng)態(tài)GIF截圖
而當(dāng)我們沉下心細(xì)致分析，你會(huì)發(fā)現(xiàn)作品真正勾起人們感官刺激的痛點(diǎn)就是空間推移的“一鏡到底”，那么它究竟是怎么實(shí)現(xiàn)的？
技術(shù)概述：
實(shí)際主創(chuàng)團(tuán)隊(duì)之前多次在項(xiàng)目中采用過(guò)類似技術(shù)解決方案，就像是之前的作品《絕不跟隨》，采用了非常類似的原理，你會(huì)發(fā)現(xiàn)作品的結(jié)構(gòu)與雙11的H5非常類似。
掃描二維碼，立即體驗(yàn)
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）
而且VML技術(shù)小組擁有自己的CSS3引擎，特別是在呈現(xiàn)“虛擬3D”（假3D效果）領(lǐng)域，可謂爐火純青，但因?yàn)榇舜雾?xiàng)目涉及素材內(nèi)容太過(guò)于龐大，分層圖片實(shí)在太多，即使是把自己的引擎開(kāi)到爆表，也撐不起這么多內(nèi)容，所以此次項(xiàng)目選用了threejs + webGL的組合。而具體的實(shí)現(xiàn)原理我們?cè)谖恼吕锞筒辉敿?xì)講解了，你可以通過(guò)下方的截圖來(lái)理解平面素材是如何在H5內(nèi)被編輯成3D空間的。
H5內(nèi)元素空間呈現(xiàn)示意圖
作為web領(lǐng)域也就是H5的主流3D開(kāi)元引擎，它一直是3D場(chǎng)景類網(wǎng)站的首選，而在H5內(nèi)想實(shí)現(xiàn)空間變換和推拉的效果，面對(duì)這么多素材的大型場(chǎng)景，靈巧的CSS3空間變換就顯得十分吃力了，為了更好的效率和流暢的體驗(yàn)，所以此次選用了webGL來(lái)繪制3D場(chǎng)景。
當(dāng)然，這里還有一個(gè)要權(quán)衡的利弊，雖然擅長(zhǎng)表現(xiàn)3D的webGL極為強(qiáng)大，但對(duì)性能的損耗實(shí)在太高，這使得低端機(jī)在觀看網(wǎng)頁(yè)時(shí)很有可能會(huì)卡到爆！
但因?yàn)椴僮飨到y(tǒng)的普遍提升和年初微信對(duì)內(nèi)置瀏覽器的進(jìn)一步升級(jí)，使得這些擔(dān)憂變的不再致命。從大環(huán)境來(lái)說(shuō)，是設(shè)備和平臺(tái)的升級(jí)，使得我們可以流暢的看到這樣的H5案例，要是只從技術(shù)分析，這樣的效果好幾年前就能做了，但根本無(wú)法普及到大眾。
設(shè)計(jì)概述：
在這支H5，技術(shù)與設(shè)計(jì)同等重要，但投入?yún)s完全不同，整個(gè)H5內(nèi)置了225張素材圖，他們通過(guò)修片、拍攝、合成、素材、3D渲染等多種方式獲得，最后再以2D圖片的方式導(dǎo)入H5，但網(wǎng)站的總體量卻控制在了5MB以內(nèi)，這簡(jiǎn)直是個(gè)奇跡！
H5的總大小和總請(qǐng)求數(shù)
這里面有2個(gè)點(diǎn)值得一提：
1. 巧妙的鏡像設(shè)計(jì)：畫(huà)面中很多素材是對(duì)稱的，對(duì)于一個(gè)虛擬空間來(lái)說(shuō)，這樣的設(shè)計(jì)會(huì)增加內(nèi)容的奇幻色彩。而實(shí)際上，鏡像處理在豐富場(chǎng)景空間的前提下還能減少網(wǎng)站體量，你只需要一組素材就能達(dá)到2組素材的視覺(jué)效果，真是非常討巧的設(shè)計(jì)。
從H5內(nèi)部獲得的分層素材圖組
2．與《造物節(jié)邀請(qǐng)函》H5類似，整支H5大量采用base64格式的圖片，而非JPG或者PNG，這樣的圖片體量雖然略大一些，但是可以減少服務(wù)器的請(qǐng)求數(shù)，也就是能增加加載速度，這是很多大素材H5項(xiàng)目需要借鑒的。也托開(kāi)發(fā)者們的努力，整支H5的體量控制在了4.8MB，但是通過(guò)后臺(tái)數(shù)據(jù)，我們發(fā)現(xiàn)作品的背景音樂(lè)實(shí)際還有壓縮的空間，如果進(jìn)一步優(yōu)化，網(wǎng)站還可以更小，但這個(gè)大小已經(jīng)可以確保大多數(shù)手機(jī)觀看無(wú)壓力了，相比那些動(dòng)不動(dòng)就十幾二十兆的H5來(lái)說(shuō)，這支作品在素材優(yōu)化上真是下了大工夫了。
H5內(nèi)所有圖片數(shù)量與大小截圖
體驗(yàn)痛點(diǎn)：
為什么說(shuō)人們會(huì)覺(jué)得造物節(jié)H5與雙11的H5外貌相差那么大，但給人的感覺(jué)卻很類似吶？因?yàn)閯?chuàng)作套路驚人的一致，從《絕不跟隨》到《造物節(jié)H5》再到《穿越宇宙的邀請(qǐng)函》，他們實(shí)際都是不同方式的“一鏡到底”，這有點(diǎn)像是電影的視聽(tīng)蒙太奇，長(zhǎng)鏡頭永遠(yuǎn)比碎鏡頭抓人，持續(xù)一致的感官體驗(yàn)永遠(yuǎn)比剪切過(guò)的內(nèi)容能給人更身臨其境的愉悅感，而這個(gè)原則對(duì)于30秒以內(nèi)的視聽(tīng)體驗(yàn)來(lái)說(shuō)更是如此，再長(zhǎng)的話，人類的感官就會(huì)開(kāi)始疲憊。
淘寶官方宣傳畫(huà)面
通過(guò)VML以往的作品，你會(huì)發(fā)現(xiàn)，他們就是把玩“長(zhǎng)鏡頭”的老司機(jī)，很早就抓住了這個(gè)用戶體驗(yàn)的痛點(diǎn)。他們?cè)谧约旱摹疤茁贰鄙希⌒囊硪淼膰L試新的內(nèi)容和方法，而新作品給人帶來(lái)的驚奇雖然意料之外，但卻在情理之中。所有讓人驚艷的視覺(jué)內(nèi)容和形式都是早就玩過(guò)的老更，只不過(guò)這次用的場(chǎng)景更大膽，素材更多樣，層級(jí)更復(fù)雜而已。或者換句話說(shuō)，這就是量變后帶來(lái)的質(zhì)變，是開(kāi)發(fā)者們長(zhǎng)期積累的結(jié)果。
那么，這支作品的創(chuàng)意我們應(yīng)該如何看待？
這確實(shí)又是一支刷新人們感官體驗(yàn)的H5， 可以說(shuō)是近3個(gè)月來(lái)又一支現(xiàn)象級(jí)神作! 小呆也從主創(chuàng)團(tuán)隊(duì)得知，整支網(wǎng)站素材制作耗時(shí)一個(gè)多月，帶上開(kāi)發(fā)周期，項(xiàng)目耗時(shí)近乎2個(gè)月，可以說(shuō)是不惜血本，當(dāng)然效果也非常顯著。但是它給我?guī)?lái)了兩點(diǎn)內(nèi)容點(diǎn)的反思：
H5頁(yè)面截圖演示
1. 我發(fā)現(xiàn)制約移動(dòng)端網(wǎng)站發(fā)展和創(chuàng)新的最大障礙實(shí)際是網(wǎng)站環(huán)境本身，如果用戶的設(shè)備不夠好、如果微信不升級(jí)內(nèi)置的瀏覽器，再頂級(jí)的團(tuán)隊(duì)面對(duì)這樣的環(huán)境也只能仰天長(zhǎng)嘆，就像是《穿越宇宙的邀請(qǐng)函》，因?yàn)檐浻布倪M(jìn)一步升級(jí)，才使得更為強(qiáng)眼的感官形式得以呈現(xiàn)。
2. 我們常常會(huì)誤解很多H5的“創(chuàng)意”初衷，有些作品會(huì)在內(nèi)容上做出突破，而有些H5的貢獻(xiàn)卻會(huì)落腳到形式上，《穿越宇宙的邀請(qǐng)函》就是后者，形式的刺激是直接而明顯的，但往往它也最難以留存。所以說(shuō)，這支作品雖然當(dāng)下聚集了各種耀眼的光環(huán)，但隨著技術(shù)的發(fā)展和迭代，3D場(chǎng)景的層級(jí)會(huì)越來(lái)越豐富，導(dǎo)入的素材會(huì)從圖片變?yōu)槟Ｐ停踔吝€有很多更為新鮮的事物，而作品對(duì)形式的開(kāi)荒起到的是承上啟下的過(guò)度作用，真心希望后面我們?cè)倏吹降摹耙荤R到底”和雙11是不一樣的，但是這太難了...
最后，給大家掃盲幾個(gè)關(guān)于作品的誤解
1. 這支H5技術(shù)比設(shè)計(jì)難：實(shí)際上這支H5的技術(shù)并不算難，整個(gè)網(wǎng)站的工作量全耗費(fèi)在了美術(shù)素材上，有點(diǎn)人海戰(zhàn)術(shù)的意思，依靠大量元素的視覺(jué)轟炸來(lái)達(dá)到驚艷的視覺(jué)體驗(yàn)。
2. 這是支VR H5作品：作品確實(shí)設(shè)置了VR模式，而且借助穿戴設(shè)備能進(jìn)行體驗(yàn)，但這只能說(shuō)是一種嘗試罷了，VR的虛擬現(xiàn)實(shí)基本無(wú)法實(shí)現(xiàn)，穿戴設(shè)備充其量就是個(gè)放大鏡，想在移動(dòng)設(shè)備上用上真的VR，同志們?cè)俚葞啄臧桑?/p>
3. 這支H5的單價(jià)是150W！： 很多人后臺(tái)問(wèn)我這支H5是不是150W，坦率的說(shuō)，像是這種規(guī)模的全案項(xiàng)目，H5只不過(guò)是其中的一環(huán)，整個(gè)項(xiàng)目的報(bào)價(jià)包括H5的單價(jià)只有參與報(bào)價(jià)的項(xiàng)目組和專項(xiàng)人員才可能知道，挺納悶這150是怎么來(lái)的？雖然成本較高，但項(xiàng)目單價(jià)究竟多少錢，你是不可能知道正確答案的，就請(qǐng)熱心的網(wǎng)友別跟風(fēng)亂刷了，真是唯恐天下不亂！
啊！一不留神就又寫(xiě)了一大堆，昨天晚上拉著VML的小伙伴聊到了很晚，也是為了能出一篇有價(jià)值的分析，好高興能夠看到《穿越宇宙的邀請(qǐng)函》的刷屏，也期待下個(gè)月能有更多的好作品出現(xiàn)。好了！咱們本期的分析就到這里了，謝謝你們的關(guān)注，我是小呆，咱們下期見(jiàn)了！
（最后強(qiáng)調(diào)一下，轉(zhuǎn)載需經(jīng)過(guò)作者本人授權(quán)，謝絕任何私自轉(zhuǎn)載！！真是被抄怕了！）
希望本期專訪能給你帶來(lái)不一樣的收獲，好了！我們本期的分享也就到這里了。
更多H5相關(guān)內(nèi)容請(qǐng)關(guān)注下方二維碼，微信公眾號(hào)：H5廣告資訊站
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（10條）