如何創(chuàng)作一部點擊量高的H5作品

柴之琪+鄒敏+成雨靜

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

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

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

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

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

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

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

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

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

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

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

（湖北廣播電視臺長江云）