3月的某一天需求同學說：我們想做一個爆款的迴流H5。

好的事實上並沒有這麼誇張。

不過我們確實是第一次真正意義上做這樣一個以互動展示為主要形式、以傳播和拉回流為主要目的的H5。

雖然最後也沒有成為真正意義上的爆款，但也有一些實施過程中的經驗和教訓。

人員配置上：

運營粥同學提需求；

編輯玥同學整理需求和分鏡；

設計師xuxu負責全部人設和背景；

動畫師大師完成了全部序列幀動畫；

前端同學晨晨摸索引擎並完成頁面製作；

QA木木進行測試並提出了各種優化意見；

同時還有產品駿駿同學提供遊戲內的支援與音訊組的傅同學提供BGM支援。

用時：

大家手頭都有幾個並行專案的情況下，大約用時一個半月。

一、時間安排

1.3.16初步給到的規劃

參照之前的幾個爆款H5進行了改良

2.3.22給到了細化的方案

就方案製作了原型並且和設計師、動畫師、開發進行了溝通

3.3.26按照原規劃計劃出了一版火柴人風格的素材

同時我在動畫師的建議下細化了分鏡文件

4.3.28設計細化

在廣泛蒐集素材進行參考後，設計師對小人風格進行了細化，並陸續完成了小人的多個狀態

5.4.8技術同學完成了長按小人走動的demo

6.4.9-4.11陸續細化完成所有頁面設計

為增加戲劇性，我腦洞了新的劇情過程，但礙於製作時間緊張最終沒有采用

7.4.12-18更新文案素材，動畫陸續完成，逐步迭代demo中的原始素材

8.4.19BGM確認並新增

9.4.20、4.23-4.25，結合遊戲元素增加了部分有遊戲特色的設計元素，製作測試優化

10.4.26測試投放，同時優化了埋。

二、製作的推進

1.畫面實現的現實——以文代圖

在缺少現成素材的情況下，為了減少設計師的工作量，我們採取了以文字和簡單的圖形來代替場景的設計思路。

（迴歸熱愛H5人設初稿——xuxu）

這是很多H5珠玉在前的一種成功形式。使用文字來設計主要場景簡化了部分設計工作，更重要的是同時豐富了場景中所蘊含的資訊量。

比如網易雲音樂的《尋找夢想之旅》與網易新聞的《愛的形狀》。以文載意，又以簡單的操作形式、巧妙的動畫效果去強化文字的表現力。

雖然以文代圖提供了主要的設計思路，但在細節上也更加考驗著參與同事的想象力。一開始大家只有一個以文字來設計成文字山的想法，但如何讓玩家在文字山間“翻山越嶺”的同時不感到枯燥，成為了一個新難題。

在我們尋求參考的幾個成功案例中，無不通過設計細節、互動方式的多樣性去削弱純文字帶來的單調感。

而這也是我們在此次嘗試中做得還不夠的一點。

2.人設的進化史

感謝神奇的設計師和動畫師，我們有了此次可愛的人設。

在最初的構想中，主角人設的設計思路是火柴人，很容易讓人聯想到小時候看的火柴人系列FALSH動畫，同時造型相對簡單，便於設計延伸和動畫製作。　

（迴歸熱愛H5人設初稿——xuxu）

但漸漸的我們覺得純粹的火柴人顯然更適合早期FLASH動畫風，在目前的頁面當中有一些違和；

而水墨筆觸雖然有一種定格動畫的趕腳，但似乎更偏向惡搞風格，與迴歸熱愛這樣的文藝氣質不相符。

最終，我們在神祕力量廣泛蒐集案例後，設計師和動畫師相互啟發，最終設計出了一套文藝而且不失新意的人設~

（迴歸熱愛H5人設——xuxu）

（迴歸熱愛H5小人動畫——大師）

隨後我們還在另一位主要角色“師父”的造型設計上犯了難，在歷經了天屎、長者、阿薩辛的種種腦洞之後，終於確定了一位圍脖飄飄的師父造型~

（迴歸熱愛H5人設B——xuxu）

3.戲還不夠，再戲精一點

我們整個H5可以分為四個部分，平路→下山→平路→上山。

在完成分鏡文件後我們發現了……戲好像不太夠，並且試圖增加一些戲劇性。

原先指令碼就是一個非常簡單的欲抑先揚，最後再揚的過程。

為了讓抑的部分更加催淚煽情顯得更加慘兮兮，我們又腦洞了一種以文字實現的墜落雲端的方式。

（迴歸熱愛H5分鏡設計——xuxu）

然而礙於時間有限，最終放棄了這一“新增劇情”。

4.遊戲元素的見縫插針

雖然文字山內容全部建立在運營同學提供的《倩女幽魂》手遊玩家的各種論壇回帖基礎上。但文字量一多，玩家的閱讀門檻相對就提高了，所體現的遊戲特色還是顯得有些單薄。

之後我們為了加強遊戲特色的展示，見縫插針地在許多地方增加了遊戲元素

下山的時候飛過的甲魚爸爸的盾牌

（迴歸熱愛H5甲士盾牌設計——xuxu）

路過的平地由倩女十大職業logo組成

（迴歸熱愛H5場景地面設計——xuxu）

5.技術實現：踩坑與避坑

在參考了其他H5的實現形式後，我們最終決定採用前景序列幀，背景迴圈播放的形式。

一個結果是包體大了很多，也曾想過改用視訊，但一想到我們本來就不多的互動（……）以及部分瀏覽器和安卓機型造型的視訊播放形式（獨立彈窗播放），最終還是放棄了。

在實際的製作過程中也有幾點問題。

①安卓自帶瀏覽器的體驗效果一般

實際製作過程中發現，安卓自帶瀏覽器在播放序列幀的時候卡頓嚴重，受機型配置和瀏覽器影響較大。微信瀏覽器的展示效果相對較好，但因為此次H5也會通過簡訊渠道投放遂還是要儘量適配預設瀏覽器。

②iOS9適配

雖然這年頭大部分人都已經更新到了iOS11，但總有些人倔強地懶得升級（沒錯就是我）。於是總是能發現很多讓技術崩潰的適配問題。

比如這次在製作測試中就發現了該H5沒法在iOS9中全屏的問題。感謝技術大大最後成功解決了。

③動畫序列幀在整個畫面中的位置控制全由技術實現，這個細節的除錯過程非常花費時間，需要留出足夠的時間。（這個小人位置沒對準啊，這個序列幀播放速度太快呀諸如此類的問題，還需邊體驗邊除錯）

6.組間配合

此次H5不僅得益於組內小夥伴的創造發揮，也仰賴於其他組同事的全力支援。

運營同事深耕玩家社群，提供了各種感人的玩家故事、有趣的神回覆，搭建起了H5的畫面主內容。

音訊組的同事也提供了多個可供選擇的BGM，為這個意圖抒情的H5添上了最能引起共鳴的聲音。

產品同事也為H5在遊戲內的投放提供了各種幫助。

三、日常經驗教訓

1.主題設定在貼近遊戲內容的同時也要有普適性

通常來說傳播型H5，以形式吸引人，以內容感動人，重點是讓觀看者對內容產生共鳴。

此次我們在內容的深挖上是做的不夠的。

一方面，與雲音樂、新聞這樣的產品相比，遊戲的普適性相對較低。誠然這個H5主要面向流失老玩家，但同時作為一支傳播H5，我們也希望它能儘量感染更多普通使用者。在如何保持遊戲特色的前提下更具有廣泛的感染力，較難以取得平衡。

另一方面，時間有限，在策劃過程中，我們意識到了目前的流程有些平，缺少情感的高潮起伏，所以增加了一個小人跌落的橋段，並且完成了初步的分鏡和設計。但最終囿於製作時間緊張，放棄了。

但從最後的埋點資料來看，把高潮安排較後其實不一定有玩家能堅持到那，所以並不明智。還是要儘量把最精彩的安排在靠前位置，吸引玩家繼續看下去。

作為替代，我們在第一段下山的過程中增加了一些有遊戲特色的小動效。但因為是後加的，與整體的背景畫風還是有一些差異。

2.對頁面的入口並不瞭解

①此次H5在遊戲中只提供了一個分享連結，通過獎勵鼓勵玩家進行分享。缺少直接在遊戲內開啟的途徑。玩家僅以完成任務的心態去進行分享，對於內容的關注度不大。

②本次H5在製作中因考慮到簡訊渠道投放的需要花了較長時間相容了自帶瀏覽器，但事實上簡訊渠道的PV僅佔總量的0.8%，建議下次就優先在微信瀏覽器中開啟，其他瀏覽器做引導頁處理，節省適配各類瀏覽器的時間。

3.文字類H5要注意文字內容和畫面的結合

因為文字內容由運營同事精選論壇精彩發言整合而來。但大段的文字閱讀門檻較高，吸引力有限，雖然我們在設計時有目的的突出了其中的重要文字，但似乎較《尋找夢想的旅程》而言還是有一些榮昌了，文字和畫面的結合還可以進一步推敲。

4.精彩場景還需前置

①此次在迴歸熱愛H5中設定了部分埋點，以全服投放的4月29日為例，到達第一次下山位置的人數在總瀏覽人數的20%左右，走完全程的人數在總瀏覽人數的15%左右。

從而得出的一個教訓是，此類展示型H5開始部分的鋪墊不宜過長，劇情上的高潮不應放在過於靠後的位置。

②根據結束頁面的分享埋點來看本次H5的分享比例也較低，這一方面也是與該分享按鈕較為靠後有關（目前僅能監測點選該分享按鈕進行分享的次數）。或也可以考慮增加分享的隨機性，刺激玩家進行分享。

5.使用者友好的操作形式

此次H5採取長按畫面右側正常播放，長按畫面左側倒播的形式，主要是為了方便玩家隨時可以倒退檢視每個細節。

但實際操作中發現，部分場景轉換和動作進行中倒播會很鬼畜，最後改為了部分場景可以操作播放、倒播，部分場景自動播放的形式。

網易雲免費體驗館，0成本體驗20+款雲產品！ 

更多網易技術、產品、運營經驗分享請點選。

相關文章：
【推薦】 一招搞定簡訊驗證碼服務不穩定
【推薦】 用scrapy資料抓取實踐
【推薦】 InnoDB recovery過程解析