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