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

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

——————————

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

用第三方平臺開發(fā)，不要代碼開發(fā)

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

兩個主流制作平臺介紹

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

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

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

1. iH5

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

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

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

2. 木疙瘩

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

優(yōu)點：操作界面及邏輯、結(jié)構(gòu)是經(jīng)過數(shù)十年驗證過的，比較科學(xué)、容易理解。比IH5容易上手。

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

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

1. 模板二次開發(fā)

例如iH5官方在微信“跳一跳”熱點出現(xiàn)后，第一時間推出了面向媒體單位的“跳一跳”新聞?wù)故灸０?，花費499元購買后即可下載下來，二次開發(fā)成自己需要的作品（主要是改視覺、改文案鏈接、改局部業(yè)務(wù)邏輯）。

利用模板可以達(dá)到較高的水平及時效性、學(xué)到更多全網(wǎng)智慧帶來的經(jīng)驗。但存在“撞衫”風(fēng)險，如果二次開發(fā)不徹底，申報“創(chuàng)新獎”等時底氣不足。

2. 自主定制

不借助外部模板，利用平臺自主進(jìn)行策劃、設(shè)計、制作。

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

需要配備的人員

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

1. 產(chǎn)品經(jīng)理

掌握科學(xué)決策方法，對熱點敏感，策劃及對接相關(guān)業(yè)務(wù)部門、產(chǎn)出產(chǎn)品原型或動畫腳本策劃，并協(xié)調(diào)其他人員分工、落地。

2. 技術(shù)工程師

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

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

軟件占據(jù)了世界，Web占據(jù)了軟件領(lǐng)域，JavaScript占據(jù)了Web。React框架占據(jù)JavaScript。

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

3. 動畫制作及手繪師

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

4. 界面UI視覺設(shè)計

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

協(xié)作方式

不管什么開發(fā)，人員越少效率越高，但分工越細(xì)產(chǎn)出越精致。按上面的3~4人團(tuán)隊，協(xié)作方式為：

1. 產(chǎn)品經(jīng)理確定需求、策劃、產(chǎn)出原型，與業(yè)務(wù)需求方簽字確認(rèn)原型。

2. UI設(shè)計根據(jù)原型產(chǎn)出設(shè)計稿，并與業(yè)務(wù)方確認(rèn)。

3. 技術(shù)根據(jù)設(shè)計稿在第三方平臺進(jìn)行開發(fā)、產(chǎn)品經(jīng)理驗收測試后，發(fā)業(yè)務(wù)方驗收。

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

互動H5開發(fā)原型確認(rèn)簽字書

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

互動H5常見類型匯總