援藏總結(jié)(九)媒體單位低成本實現(xiàn)H5制作業(yè)務(wù)建議(h5作品支持的媒體形式有哪些)
【概述】這幾年有幸參與浙江日報、西藏日報新媒體中心建設(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ù)故灸0?,花費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é)別人才不會對你有看法。