2016年會成為HTML5的中國年嗎?

近日,H5研究院發布《2015年中國HTML5行業發展報告》。本文截取報告主要內容,解答三個問題:為什么是HTML5?不同HTML5平臺的本質區別是什么?今年HTML5行業有哪四大發展趨勢?

一、引言

2014年下半年,微信幫助捧火了HTML5小游戲,自此國內各行各業開始對HTML5保持持續高漲的關注。接著的2015年是國內HTML5行業迅速發展的一年,在媒體大肆渲染“互聯網寒冬”之際,HTML5作品的生產數量和傳播廣度卻居高不下,為寒冬增添一把柴火。

根據百度指數對關鍵詞“HTML5”搜索趨勢結果,2015年“HTML5”的指數約是2014年的1.5倍;而HTML5的簡單說法“H5”在2015年的檢索量是前一年的2倍多,直逼“HTML5”。


百度指數2014-2015年“HTML5”搜索趨勢

2015年,國內HTML5的傳播仍以移動端為主,但簡單的翻頁這種低層次的設計已經不再適應大部分受眾的需求,HTML5平臺也開始由簡單的工具應用逐步轉型。其中,發展得比較快的是面向商企用戶的iH5,自主研發引擎,并于2015年年底添加即時通訊功能和線上交易機制。

為什么是HTML5?

二、Web應用開發新標準

HTML5,第五版超文本標記語言,于2014年10月由萬維網聯盟(W3C)發布為正式推薦標準。它是HTML自1991年問世以來,最具變革價值的技術規范,歷經多年修訂與完善才制定完成。

過去,Web開發面臨兩種困境:

(1)不少人質疑Flash的安全性等問題,卻找不到替代它的合適插件;

(2)工程師們抱怨PC端和移動端應用的多次開發,仍舊得為微軟、蘋果、安卓等系統設計不同方案。

而HTML5提供了良好的解決方案。與JavaScript、CSS等緊密結合后,HTML5能使瀏覽器不需要類似Flash的插件也能實現桌面應用的交互效果,它的跨平臺可用性更令應用的一次開發成為可能。


Youtube在網頁中使用HTML5技術實現視頻播放

如上圖,Youtube使用HTML5的video元素進行標記后,網頁不需要第三方插件就能播放音視頻等。HTML5的興起具有非常深遠的意義,它已經從簡單的標記語言化身為Web應用開發的先驅。

三、HTML5應用現狀

從硬件角度來看,國內手機和平板兩種移動設備應用最廣,PC端次之,緊接著是電視和游戲設備。

從軟件角度來看,桌面瀏覽器對HTML5的支持高于移動瀏覽器,最高可達95%;而從整體上而言,移動瀏覽器對HTML5的支持卻優于桌面瀏覽器。

HTML5具有較好的瀏覽器向后兼容性,開發者能對瀏覽器不支持的情形設計各種各樣的回退方案。因此,HTML5頁面的實際顯示性能與開發者、制作平臺密切相關。

2015年,越來越多公司在HTML5品牌推廣上進行布局。6至7月份起,雞湯、自媒體等個人作品呈下降趨勢,商企用戶作品則保持高速增長。在商業需求的驅動下,HTML5頁面設計的目的性更強,獲得最好傳播效果的基本是經過一定時間策劃,在團隊操作下有針對性地進行投放的企業案例。

相對應地,原有HTML5平臺也進行了大面積升級。從平臺性質而言,HTML5平臺可分為輕營銷模板類、功能引擎類和基礎工具類三種,分別以易企秀、白鷺引擎和iH5為代表。


2015年傳播度較廣的三個HTML5作品,分別是杜蕾斯展館、吳亦凡入伍和網易娛樂頭條

三類HTML5平臺的特點如下——

(1)輕營銷模板類:提供類似PPT頁面切換的HTML5制作工具,通常面向C端(個人)用戶,部分為B端(企業)用戶。該類平臺的數量較大,只適用于輕度營銷,所能提供的頁面動態效果局限于翻頁。

(2)功能引擎類:提供HTML5網頁的開發引擎,通常面向B端用戶。該類平臺主要提供基于Canvas(畫布)的游戲引擎,適用于輕游戲的開發,依賴于開發者。

(3)基礎工具類:提供用于頁面交互的HTML5可視化編輯工具,主要面向B端用戶,部分為C端用戶。該類平臺只有iH5,采用自主研發的閉源引擎,應用領域廣泛,涵蓋輕度營銷、重度營銷、媒體電商內容應用、視頻、動畫、游戲等方面。

與瀏覽器多采用谷歌開源引擎的狀況相近,國內HTML5平臺基本使用國內外開源框架或引擎。但和瀏覽器面向網頁內容顯示,只需提供高性能的技術支持不同,HTML5平臺面向的是HTML5制作或開發,需要對網頁質量負責。因此,使用開源框架或引擎意味著這些HTML5平臺進一步拓展業務會比較被動,容易面臨同質化的困境。

四、三類HTML5平臺的對比

因為整體上移動端瀏覽器對HTML5的支持優于PC端,2015年HTML5平臺主要面向移動端網頁的制作和開發。


HTML5平臺定位與工具特征對比

如上表,三種HTML5平臺以PC網站、APP和軟件三種形式提供制作或開發工具,成品為網頁或HTML5源碼。由表可見:

(1)輕營銷模板類HTML5平臺只能做輕度營銷,能實現翻頁等簡單動效,分為場景展示、電子出版和動畫制作三種。如下圖為易企秀桌面編輯界面,該類平臺最大的共同點在于工具結構以頁面為基礎,與軟件PowerPoint架構相近,能通過增減頁面、使用功能組件和點擊快捷菜單來調整內容。


易企秀的桌面編輯工具界面

(2)功能引擎類HTML5平臺的用戶專指性很強,主要是有開發經驗的技術人員。下圖為Egret Wing軟件設計師視圖下的基本架構,使用HTML5引擎把基礎代碼流程化,再借助第三方集成開發環境Adobe Air構建可視化工具,就能通過讓用戶使用軟件組件來簡化開發過程。


Egret Wing的桌面編輯工具界面

(3)基礎工具類HTML5平臺提供底層交互型產品,開發目的、設計原理和實現思路都以交互為基礎,國內只有iH5。iH5于2015年9月上線,提供HTML5制作工具、工具培訓和作品交易等服務。它本質上封裝了DOM(文檔對象模型)引擎的一個集成開發環境,使用者以設計師為主,適合廣告公司、大型媒體公司和公司市場部等使用。


iH5的桌面編輯工具界面

如上圖,iH5提供的是舞臺、屏幕、頁面、多媒體素材、事件、數據庫等對象組件,而不是構建好的??樽榧?。在提供可視化編輯的前提上,它最大程度還原了HTML5頁面的開發過程,具有較高的拓展性。由于提供底層交互功能,它的應用領域較廣泛,能用于微信推廣、網站建設、輕游戲設計、輕APP開發和視頻交互等多個方面。

同樣是HTML5規范,對HTML5技術與性能的取舍成為國內HTML5平臺工具定位和提供服務的差別所在。

五、HTML5行業發展的趨勢

伴隨著HTML5興起的是Flash的沒落,HTML5能打敗在多媒體領域稱霸多年的Flash,除了移動設備的跨平臺性和較好的多媒體支持外,它的應用范圍也廣于Flash。比如,Flash動畫作品的復用性極低,基本沒有模板市場,而HTML5卻能作為基礎填充材料,用來制作報紙圖文等模板。

參考Flash發展的演化路徑并結合HTML5的新特性,HTML5近幾年會在重度內容、網頁游戲、垂直領域解決方案和內容直接填充四個方面有所突破。


(1)內容往重度化方向發展。

重度營銷并不完全意味著大項目、高預算、長周期、大團隊,而是相對輕度營銷以用戶生產內容為主,它更注重專業內容的生產。在用戶對頁面交互能力和HTML5拓展功能的要求提高之際,輕度營銷的市場份額會逐漸降低,往重度營銷內容轉化。

(2)網頁游戲往交互游戲方向發展。

盡管HTML5游戲具備無需下載、包含社交屬性、開發成本低等優勢,但如果沒有充分利用HTML5的新特性,加強移動游戲的交互能力,它很難在游戲市場中異軍突起。由此,網頁游戲未來更有可能結合HTML5優良的通信功能,往跨屏互動等交互特征更明顯的形式發展。

(3)垂直領域解決方案往在線應用方向發展。

與HTML5行業密切相關的垂直行業主要包括在線教育、電商和流媒體三種類型。

以世界最大的在線課程平臺Coursera為例,授課視頻即使用HTML5實現“課間小測”。如下圖,在Coursera網站上,當視頻播放到特定節點時會出現與課程相關的問題,提供用戶選擇答案,記錄答題情況并反饋答題結果。


Coursera教學視頻播放部分的課間測試

(4)傳媒業往內容直接填充方向發展。

國內HTML5制作工具基本都提供模板服務,這與HTML5網頁較強的復用性有關。網頁基礎架構設計完成后,修改源碼中各元素的參數便能替換素材、改變對象屬性,因此HTML5網頁能用于制作基礎填充材料。在HTML5模板的幫助下,新媒體內容能通過應用母版進行編輯,用戶只需后期進行圖文內容的替換,因此很有可能成為傳媒業轉型的契機。

反觀國內不同類型的HTML5平臺,只有以HTML5提供的新特性為根本,著眼于底層交互才可能適應各行各業對網頁開發的需求。因此,基于HTML5元素和屬性進行設計的基礎工具,未來更有機會占領盡可能多的市場份額。



文/seedheart(簡書作者)

上一篇: 一條時間線看HTML5與Flash十年興衰

下一篇: H5三個設計方向的自我定位

分享到: 更多
买3d只赚不亏的方法 云南时时兑奖期限 凤凰时时彩平台 网络百人牛牛能赢吗 任选一怎么算中奖 组六组三全包技巧 怎样玩五分彩才能赚钱 不倍投稳赚方案 广东快乐十分稳赚技巧 手机购彩最新消息 送本金一天稳赚500 投注单打印 时时彩稳赚不赔之定胆技巧 买分分彩稳赚的技巧 龙虎和是谁控制的 扎金花看牌神器手机版