柴之琪+鄒敏+成雨靜

2017年3月3日至15日，湖北廣播電視臺(tái)長(zhǎng)江云報(bào)道組專程赴北京開展全國(guó)兩會(huì)專題報(bào)道，期間聯(lián)合四川川報(bào)觀察客戶端、湖南新湖南客戶端、江蘇蘇州看蘇州客戶端四家媒體制作了H5作品《客官，請(qǐng)上船！你有一張四省通用提貨券！》，推出首日點(diǎn)擊量就已突破500萬(wàn)，從提出創(chuàng)意的的6個(gè)晝夜里，長(zhǎng)江云制作組起早貪黑，廢寢忘食，秉承“工匠精神”，精雕細(xì)刻，創(chuàng)作了一個(gè)比較滿意的新媒體作品。

3月6日，小組討論形成創(chuàng)意，初步構(gòu)思以一艘載滿貨物的寶船為游覽線索，寶船乘風(fēng)破浪游經(jīng)四省，浩浩蕩蕩達(dá)海通江。表達(dá)出在長(zhǎng)江經(jīng)濟(jì)帶這一國(guó)家戰(zhàn)略的創(chuàng)新驅(qū)動(dòng)下，多省經(jīng)濟(jì)在融合中互惠共享，走向全球的主題思想。

策劃當(dāng)天形成了可行性分析：①大的時(shí)間軸構(gòu)架；②內(nèi)頁(yè)多個(gè)小時(shí)間軸的配合；③點(diǎn)擊交互實(shí)現(xiàn)轉(zhuǎn)換的游戲體驗(yàn)；④元素繁多或會(huì)導(dǎo)致H5因大而卡頓，需想辦法解決；⑤隨機(jī)數(shù)分享模塊需從頭制作；⑥四省合作，交流意見需達(dá)成一致，這得占用一定的交流成本。故初步估計(jì)制作周期在一周左右。此作品由長(zhǎng)江云擔(dān)綱主力，承擔(dān)設(shè)計(jì)頁(yè)面、邏輯結(jié)構(gòu)搭建、整合素材、頁(yè)面集成等90%的工作量。

3月7日初步定下整個(gè)地圖的基調(diào)，以古中國(guó)風(fēng)為主題氣質(zhì)，遂開始總體設(shè)計(jì)，同時(shí)整個(gè)H5的結(jié)構(gòu)也進(jìn)入搭建階段，長(zhǎng)江云小組擬采用封面——導(dǎo)語(yǔ)頁(yè)嵌入地圖首頁(yè)——地圖頁(yè)——分享頁(yè)——尾頁(yè)的流水線結(jié)構(gòu)，一滑到底，通過(guò)手指的滑動(dòng)來(lái)控制空間的移動(dòng)進(jìn)而控制寶船的航線軌跡，實(shí)現(xiàn)在四省裝貨的效果。內(nèi)頁(yè)則準(zhǔn)備采用點(diǎn)擊收貨的形式，盡可能做流暢有點(diǎn)擊的快感。分享頁(yè)則由裝滿貨物的箱子構(gòu)成，尾頁(yè)由參與制作的四省媒體APP的LOGO填充。

3月8日確定了整體風(fēng)格后，長(zhǎng)江云制作組開始構(gòu)思交互手法和轉(zhuǎn)場(chǎng)形式。由于整體采用的是“中國(guó)風(fēng)”風(fēng)格，初步設(shè)想在封面和進(jìn)入地圖轉(zhuǎn)場(chǎng)的地方采用“撥云散霧”的形式，將“祥云”的元素嵌入其中：導(dǎo)語(yǔ)文字放置厚厚的祥云之上，隨著用戶手指的滑動(dòng)，云霧漸漸消散，寶船開始在長(zhǎng)江上“行駛”，同時(shí)在到達(dá)每個(gè)省份的“港口”時(shí)會(huì)通過(guò)碰撞事件引出“大熊貓”、“ 金絲猴”“ 丹頂鶴”“太湖 ”等四省代表元素。但作品初步完成后，測(cè)試中發(fā)現(xiàn)卡頓現(xiàn)象比較嚴(yán)重，經(jīng)過(guò)多輪排查，發(fā)現(xiàn)問(wèn)題出在撥云散霧的這些“云”和“碰撞事件”上，這個(gè)場(chǎng)景由5塊比較大的云構(gòu)成，每塊云都有各自的一長(zhǎng)段軌跡；碰撞事件交互比較復(fù)雜，都需要占用較大內(nèi)存，雖能營(yíng)造一個(gè)非常富有動(dòng)感的場(chǎng)景，但因卡頓給用戶帶來(lái)的體驗(yàn)較差，經(jīng)過(guò)反復(fù)斟酌，決定本著“用戶體驗(yàn)至上”的理念，刪掉了這些云層和碰撞事件，大大提升了流暢度。

3月9日 設(shè)計(jì)基本完成，進(jìn)入制作階段，整體采用的仍然是大滑動(dòng)時(shí)間軸套透明按鈕的結(jié)構(gòu)，同時(shí)對(duì)透明按鈕內(nèi)的不同元素做不同時(shí)間的軌跡描繪。在最上層鋪設(shè)內(nèi)頁(yè)的架構(gòu)方面，初始設(shè)為隱藏，以對(duì)應(yīng)作品整體邏輯。這一天先后完成了地圖頁(yè)的滑動(dòng)設(shè)置、部分交互設(shè)置、撥云散霧的效果、隨機(jī)分享的模塊、兩個(gè)需要做動(dòng)畫的序列以及內(nèi)頁(yè)鋪設(shè)，工作量繁重，達(dá)到正常工作日的三倍以上，直到深夜一點(diǎn)，小組成員的工作還在持續(xù)進(jìn)行。

3月10日 長(zhǎng)江云制作組首先對(duì)預(yù)加載頁(yè)文字反復(fù)修改，一開始撰寫的文字是：等待10秒，精彩自來(lái)，但大家討論之后認(rèn)為：一是文字與作品主題沒有關(guān)聯(lián)；二是等待時(shí)間過(guò)長(zhǎng)，容易增加用戶的抵觸情緒。經(jīng)過(guò)反復(fù)斟酌，最后修改為：上船的乘客較多，請(qǐng)耐心等待哦。此外，四個(gè)省份內(nèi)頁(yè)的鋪設(shè)并測(cè)試、頁(yè)面之間的交互設(shè)置也做了大量修改。3月10日當(dāng)天下午完成了整個(gè)制作，并開始第一次測(cè)試。面對(duì)著眼前這個(gè)花費(fèi)了五個(gè)日夜所精心培育出的“花朵”，大家非常激動(dòng)，然而，現(xiàn)實(shí)情況遇到了一點(diǎn)波折：雖預(yù)想到由于內(nèi)容豐富，場(chǎng)景復(fù)雜，交互頻繁，作品播放會(huì)有一定的卡頓，但在測(cè)試時(shí)，“寶船”每移動(dòng)一次就會(huì)卡一次，完全不能按照正常軌跡運(yùn)行，甚至出現(xiàn)了以前從來(lái)沒有發(fā)生過(guò)的閃退現(xiàn)象，用戶體驗(yàn)極差。

盡管“理想很豐滿，現(xiàn)實(shí)很骨感”，但我們并沒有氣餒，大家來(lái)不及吃完飯就開始分析原因，初步列舉出以下幾條：①內(nèi)容太繁雜，元素過(guò)多，單個(gè)元素的大小過(guò)大。②滑動(dòng)時(shí)間軸過(guò)長(zhǎng)。③搭建內(nèi)頁(yè)元素時(shí)間軸和需要加載的軌跡達(dá)到100條，而一般普通H5作品通常只需不到10條，致使負(fù)載過(guò)大。④粒子渲染的文字特效達(dá)到2.7M，占用資源過(guò)多。 ⑤元素太分散，需要分開加載的項(xiàng)目太多，其中一個(gè)項(xiàng)目包含的層級(jí)達(dá)到7層，而一般僅為3-4層。

針對(duì)以上問(wèn)題，長(zhǎng)江云制作組一一進(jìn)行了優(yōu)化，首先將每個(gè)超過(guò)100KB的素材都進(jìn)行了無(wú)損壓縮，這樣一下子就壓縮了60%的空間；其次將滑動(dòng)時(shí)間軸縮短，對(duì)齊前面的關(guān)鍵幀，調(diào)整好船的軌跡和頁(yè)面間的轉(zhuǎn)場(chǎng)；第三在多次壓縮粒子渲染文件無(wú)果后，選擇了刪除這個(gè)特效，從實(shí)際效果看，對(duì)作品內(nèi)容并無(wú)太大影響。第四采用了畫布加速，將同類型同層元素裝在一起，將加載層級(jí)由七層減到5層。完成了以上優(yōu)化后，再次進(jìn)行測(cè)試，作品流暢度得到很大提高，此時(shí)已是3月11日凌晨1點(diǎn)半。

3月11日 長(zhǎng)江云制作小組本著“一切為了提高用戶體驗(yàn)”的理念，對(duì)部分細(xì)節(jié)做了第十次優(yōu)化，例如內(nèi)頁(yè)的返回按鈕的放大，尾頁(yè)logo轉(zhuǎn)盤的放大，不同頁(yè)面之間疊加的優(yōu)化，尾頁(yè)增加分享頁(yè)面提示的按鈕等等，最后于當(dāng)天下午7點(diǎn)56由四省媒體同時(shí)發(fā)布，推送。作品一經(jīng)推送，就獲得了廣大用戶和同行的好評(píng)，大家普遍認(rèn)為，此作品立意高遠(yuǎn)，形式新穎，界面畫風(fēng)古樸明朗，操作手感平滑流暢。作品發(fā)出48小時(shí)內(nèi)，四省多個(gè)客戶端和兩微等端口上的轉(zhuǎn)發(fā)總量達(dá)到800萬(wàn)+，不到一個(gè)星期轉(zhuǎn)發(fā)總量已突破1010萬(wàn)。

通過(guò)這次H5制作，我們收獲良多：①對(duì)“預(yù)加載頁(yè)面”的制作和運(yùn)用更加自如，這會(huì)是一個(gè)很有用且討巧的小模塊。②用戶體驗(yàn)！用戶體驗(yàn)！用戶體驗(yàn)！重要的事情說(shuō)三遍，不管你效果有多華麗，交互有多炫酷，沒有流暢的用戶體驗(yàn)，一切都是白搭。③要做好內(nèi)容隨時(shí)會(huì)被修改的準(zhǔn)備，文件、元素一定要命名，尤其是在元素特別多的情況下。④畫布可以在一定程度上優(yōu)化加載速度。相信這些寶貴的收獲將給我們以后的創(chuàng)作帶來(lái)有益的啟迪。

（湖北廣播電視臺(tái)長(zhǎng)江云）