【概述】這幾年有幸參與浙江日報、西藏日報新媒體中心建設，有幸與其他央媒、各省市黨媒新媒體中心從業人員一起碰撞交流。即將結束援藏工作之際，將工作過程中一些思考進行了匯總，總共分13篇，此為第9篇，其他見文章底部鏈接。

【作者】蔣濤，浙江日報新媒體中心規劃部主任、中宣部第一批組團式新媒體援藏組組長。

——————————

國內比較好的H5團隊有人民日報新媒體中心、新華社新媒體中心、網易H5團隊。網易堅持自己代碼開發不用第三方平臺工具，可惜了強大的策劃能力。浙江日報新媒體中心H5團隊也很厲害，只有3人兼顧其他業務的情況下也能每周流水線產出若干作品，有個爆款作品在獲得朋友圈發布50萬次、還有個爆款作品為公眾號拉粉幾萬。

用第三方平臺開發，不要代碼開發

曾看到過某省級黨媒新媒體中心的招聘H5開發人員啟示，崗位需求描述完全是錯誤的，招到了也開發不了H5。寫代碼開發需要前端、后端、測試各類人才配齊，缺一個技術角色都無法運轉，所以毫無疑問本來就缺人的新媒體中心開發H5要用第三方平臺開發。用第三方平臺開發H5，效率比寫代碼開發高起碼10倍，有什么新技術也難以快速拿來用，第一篇提到過建議新媒體中心重點做新媒體產品，少而精的力量做新媒體技術服務。H5業務并沒有核心到像網易那樣建大規模技術團隊。

兩個主流制作平臺介紹

各新媒體中心的H5作品制作工具，主要集中在iH5和木疙瘩兩家。主要原因有兩點：

1. 隨著優秀第三方平臺進化，H5的制作已不僅局限于前幾年那種PPT式上下翻頁、圖文飛滾的H5類型。更多的優秀作品為游戲、動畫特效類、外接第三方AI接口（如軍裝照）的H5（區別于傳統PPT式H5，一般稱為“互動H5”）。在此過程中一些沒有跟上的老牌H5制作平臺被邊緣化。

2. iH5和木疙瘩在開源共享方面做的比較好，并形成了產業鏈，好的作品可以在“作品市場”上免費共享或收費使用，使各種創新能以“技術眾籌”的模式下在全網的智慧下不斷完善、站在前人基礎上達到“一步步自己研究”不可能實現的一些應用高度（如仿支付寶VR搶紅包H5、仿“跳一跳”游戲播報新聞）。

1. iH5

把常規研發中的前端開發幾乎全部變成了零代碼的各種選項設置，基本覆蓋到了前端開發涉及到的大部分內容。（換句話說：前端開發能用代碼實現的，用iH5平臺基本都可以實現）

優點： 把常用、成熟的東西打包成了組件（比如3D模型、物體運動函數、仿VR、接口組件等），相比常規研發中心的前端開發省去了每一步自行研究，能觸達更高的應用層次。

缺點：為了追求零代碼，各種選項設置太多，調研時遇到一些場景：理解這些復雜的設置比理解不懂的代碼還要費勁。

2. 木疙瘩

我第一次看到此平臺的時候大吃一驚。我在2004~2008年做過上千個小時的FLASH。此平臺將10多年前流行的FLASH的操作界面及結構完全照搬了過來,連所有快捷鍵都沒換。編程語言用WEB中的JS代替了FLASH中的AS，把FLASH中的“場景”巧妙變成了“頁面”。

優點：操作界面及邏輯、結構是經過數十年驗證過的，比較科學、容易理解。比IH5容易上手。

缺點：動畫相關占了過多比重、互動方面不如IH5。

使用這些平臺的兩種不同方法

1. 模板二次開發

例如iH5官方在微信“跳一跳”熱點出現后，第一時間推出了面向媒體單位的“跳一跳”新聞展示模板，花費499元購買后即可下載下來，二次開發成自己需要的作品（主要是改視覺、改文案鏈接、改局部業務邏輯）。

利用模板可以達到較高的水平及時效性、學到更多全網智慧帶來的經驗。但存在“撞衫”風險，如果二次開發不徹底，申報“創新獎”等時底氣不足。

2. 自主定制

不借助外部模板，利用平臺自主進行策劃、設計、制作。

這種方式需要的人才類型及技能較多，且協作成本較高。詳見下面說明。

需要配備的人員

兩個平臺操作差異太大，需要選擇其中一個平臺為主，作一個比喻的話，木疙瘩平臺是文藝青年，IH5平臺是技術青年。如果人力不足，最多出一兩個人負責H5制作，那建議選擇木疙瘩平臺，產出一些簡單動畫、展示類H5。如果需要更復雜的效果、技術，需要使用IH5平臺，需要配備以下人員：

1. 產品經理

掌握科學決策方法，對熱點敏感，策劃及對接相關業務部門、產出產品原型或動畫腳本策劃，并協調其他人員分工、落地。

2. 技術工程師

除了背誦平臺各種快捷鍵、組件庫，更要清楚平臺能做到什么、不能做到什么，及升級趨勢。（需要一些前端開發基礎）。

這兩個平臺中的“互動”都是靠JS實現, WEB界面開發由外觀性開發（HTML/CSS）和功能性開發(JS)組成，引用一句話介紹JS：

軟件占據了世界，Web占據了軟件領域，JavaScript占據了Web。React框架占據JavaScript。

（此句中的“框架”就類似報告前面提到的3D模型、物體運動函數、仿VR、接口工具等把成熟穩定的東西打包成組件，常規的“前端開發工程師”一般所熟悉的jQuer等框架與互動H5所需的框架并不一致。初步調研看到iH5用了自創的“框架”、木疙瘩似乎還沒有“框架”。）

3. 動畫制作及手繪師

人員編制不夠也可不選此項，但平時遇到手繪或動畫時產出會不太專業。

4. 界面UI視覺設計

設計師建議掌握兩種UI風格：一是最普適的扁平動漫風（“飛碟說”那種），另外再掌握一種適合自己的簡約風格（非簡約風格容易吃力不討好。FLASH動畫流行時知名閃客都有自己顯著的風格且普遍以簡約為主）。

協作方式

不管什么開發，人員越少效率越高，但分工越細產出越精致。按上面的3~4人團隊，協作方式為：

1. 產品經理確定需求、策劃、產出原型，與業務需求方簽字確認原型。

2. UI設計根據原型產出設計稿，并與業務方確認。

3. 技術根據設計稿在第三方平臺進行開發、產品經理驗收測試后，發業務方驗收。

如果在這個階段業務方提出修改，等于前面工作都白做了，所以第一階段做原型時，一定要讓業務方簽字確認，同時也作為驗收時的依據。如果沒有這一步驟，很有可能后面要花幾倍的時候修改作品。

互動H5開發原型確認簽字書

這個簽字步驟千萬不要覺得不好意思——浪費了單位的開發資源才應該不好意思。也不要怕別人有想法而妥協——每次都不妥協別人才不會對你有看法。

互動H5常見類型匯總