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

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

——————————

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

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

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

兩個(gè)主流制作平臺介紹

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

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

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

1. iH5

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

援藏總結(jié)（九）媒體單位低成本實(shí)現(xiàn)H5制作業(yè)務(wù)建議（h5作品支持的媒體形式有哪些）

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

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

2. 木疙瘩

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

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

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

援藏總結(jié)（九）媒體單位低成本實(shí)現(xiàn)H5制作業(yè)務(wù)建議（h5作品支持的媒體形式有哪些）

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

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

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

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

2. 自主定制

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

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

需要配備的人員

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

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

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

2. 技術(shù)工程師

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

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

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

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

3. 動畫制作及手繪師

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

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

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