一、體驗環(huán)境

體驗產(chǎn)品：www.ih5.cn

評測時間：16年11月

瀏覽器：Google Chrome 53（PC端）

二、行業(yè)概述

行業(yè)背景

HTML5于2014年底定稿，此后世界各大互聯(lián)網(wǎng)巨頭以實際行動表示對新一代Web編寫標(biāo)準(zhǔn)的支持。借助HTML5的跨平臺、高拓展性等優(yōu)勢，近兩年涉及互聯(lián)網(wǎng)的產(chǎn)品或多或少依賴于HTML5，甚至稱霸多媒體領(lǐng)域逾20年的Flash也不得不為HTML5讓位。

需求分析

隨著微信社交廣告的興起，國內(nèi)很多企業(yè)都借助H5引發(fā)朋友圈的刷屏熱潮，騰訊穿越故宮來看你、淘寶造物節(jié)、網(wǎng)易畫小人、百度種太陽等等。越來越多企業(yè)希望利用H5廣告實施新的線上營銷戰(zhàn)略，同時催生了大量互動廣告公司、H5頁面制作工具或平臺的誕生。

隨著國內(nèi)網(wǎng)絡(luò)廣告市場規(guī)模的增長，HTML5被很多人認為是互聯(lián)網(wǎng)的下一個風(fēng)口。但因為HTML5概念的普及、應(yīng)用的加強，H5頁面開始出現(xiàn)大面積同質(zhì)化的現(xiàn)象。各行各業(yè)對H5廣告的產(chǎn)量和質(zhì)量的要求越來越高，大家都在等一個和Adobe Flash一樣兼具專業(yè)性與實用性的平臺出現(xiàn)。

三、產(chǎn)品概述

產(chǎn)品定位：專業(yè)的H5創(chuàng)作工具與服務(wù)平臺

產(chǎn)品服務(wù)

iH5背后的設(shè)計邏輯其實是要提供一套完整H5廣告制作解決方案，構(gòu)造H5制作的生態(tài)鏈。藍圖的構(gòu)建上，主要分四個部分——

（1）H5廣告展示平臺

表面上看，H5廣告展示平臺就是一個行業(yè)優(yōu)質(zhì)H5的聚集地，展示作品為平臺用戶制作的H5。

這些廣告的效果、來源都是公開的，包括作者、關(guān)注、點擊量、點贊數(shù)等信息，隱藏3個目的——

a. 社交：用戶可以關(guān)注特定的設(shè)計師并與他們發(fā)起對話，為特定的作品點贊，實際是為了打通社交聯(lián)系，加強用戶粘性。

b. 資源池：公開設(shè)計師用戶的主頁信息，有利于買手與設(shè)計師進行交流，培養(yǎng)H5制作行業(yè)的專業(yè)作者資源。

c. 權(quán)威性：首頁選擇的作品，大多數(shù)是比較知名的品牌，以及體現(xiàn)工具差異化的H5，實際上是為了加強品牌與工具的權(quán)威性。

（2）H5可視化編輯工具

提供H5的在線可視化制作與發(fā)布，包括全景組件、畫布、物理引擎、畫圖、付費點等高級組件。

從界面上看，工具分為菜單欄、工具欄、屬性欄、工作臺、資源區(qū)5個部分，隱含工具用戶、開發(fā)邏輯、操作邏輯三個方面。

a. 菜單欄：包括PSD導(dǎo)入、模板、在線課堂、LOGO等按鈕，看起來簡單，卻涵蓋工具面向的不同群體。專業(yè)設(shè)計師需要依靠PSD分層進行設(shè)計，初學(xué)者需要依賴于模板和在線課堂，商業(yè)用戶重視的是自定義LOGO的加載。

b. 工具欄：提供的組件大部分是比較基礎(chǔ)的多媒體對象，諸如畫布、輸入框、變量、文本、全景容器等，幾乎沒有像表單、圖表等組合程度較高的套件，說明工具提供的是底層元素的交互，開發(fā)初衷是要確保設(shè)計的靈活性與拓展性。

c. 工作臺：支持拖拽上傳、拖拽改變屬性等動作，屬于可視化編輯的方向之一，圖形化的可操作界面。

d.?屬性欄&資源區(qū)：以參數(shù)的設(shè)定為主，屬于可視化編輯的方向之二，文字化的屬性配置。

（3）工具教學(xué)與培訓(xùn)中心

提供針對平臺工具的H5制作教學(xué)，包括線上的QQ群咨詢、直播間、教學(xué)視頻、教學(xué)手冊，以及線下的課程培訓(xùn)。

本質(zhì)上，采用的是線上免費教學(xué)、線下付費指導(dǎo)的模式。

Photoshop等軟件剛興起的時候，沒有這么多教程，也沒有太多案例，大多數(shù)人也需要自己摸索進行學(xué)習(xí)。但等待用戶群體自發(fā)地成熟，過程是十分緩慢的。

因此iH5采取的措施就是先做賠本生意，組織大量人力去設(shè)計案例、開發(fā)教程，提高工具實用性的形象；隨著業(yè)務(wù)的擴張、用戶的增長，再推出專業(yè)化的培訓(xùn)課程，維持免費培訓(xùn)的成本，體系成熟后還能成為盈利的重要來源。

（4）數(shù)據(jù)監(jiān)控中心

提供H5投放后的訪問情況與傳播路徑追蹤，這些數(shù)據(jù)目前只有基礎(chǔ)的訪問增長、數(shù)據(jù)庫后臺數(shù)據(jù)開放給用戶，路徑追蹤、事件監(jiān)測等高級功能應(yīng)該是面向商業(yè)用戶的。自建數(shù)據(jù)監(jiān)控中心有兩大益處：

a. 精準(zhǔn)量化廣告效果：讓用戶可以了解廣告的投放與傳播質(zhì)量、不同渠道的投放與傳播效果。

b. 大數(shù)據(jù)報告：通過長期的數(shù)據(jù)收集、統(tǒng)計與處理，有利于輸出專業(yè)的行業(yè)數(shù)據(jù)報告。

四、用戶分析

根據(jù)網(wǎng)站展示的作品類型，可以看出產(chǎn)品主要用戶是企業(yè)、媒體、廣告公司的營銷人員，也有一定數(shù)量的獨立設(shè)計師。

用戶需求與痛點

• 想要做幾個H5來推廣，應(yīng)該怎么做？
• 想要做出720°全景、物理碰撞這些復(fù)雜效果，可是不會代碼！
• 想要獨立制作H5廣告，可以去哪學(xué)？
• 想要為公司做幾個H5廣告，可以找誰？
• 想要接一些H5的設(shè)計單，可是編程太耗時間了！

用戶反饋

根據(jù)公開的用戶群、百度貼吧等地方的用戶評論收集，也可以看出無論是企業(yè)還是個人，用戶都是希望在提高制作效率的同時，保證制作質(zhì)量。

從根本上，用戶需求是要簡單、快速地做出專業(yè)水平高的H5。

五、功能分析

iH5遵循“圖形化+事件+配置”的工作流程，用事件控制不同對象/元素的交互，相比其他工具在實際操作上對多媒體的控制比較靈活多樣。

（1）基礎(chǔ)多媒體組件

一般的H5頁面制作工具都具備的組件，比如中文字體、圖片、音頻、視頻、地圖等。

（2）高級多媒體組件

包括720度全景、物理引擎、時間軸、付費點等特色組件，屬于HTML5網(wǎng)頁支持的復(fù)雜功能，可能涉及外部js的應(yīng)用。

（3）數(shù)據(jù)應(yīng)用組件

與數(shù)據(jù)庫相關(guān)的功能組件，主要涉及對字段、輸入框與變量的控制，屬于HTML5網(wǎng)頁表單相關(guān)的控件，拓展性較強。

（4）容器組件

用于多媒體對象的中高層級控制，包括設(shè)備、屏幕、面板等組件，屬于HTML5網(wǎng)頁支持的頂層功能。

（5）其他功能

主要是一些外部js的應(yīng)用，包括微信紅包、微信設(shè)定內(nèi)容、語音識別等。

六、盈利模式分析

免費平臺

指工具使用、內(nèi)容發(fā)布不收取費用，面向設(shè)計師和開發(fā)者。設(shè)計師可以完全用工具可視化的功能進行創(chuàng)作，不需要學(xué)網(wǎng)頁編程；開發(fā)者可以利用工具提供的開放接口、開放組件，進行二次開發(fā)，省時省力。

功能完全免費，根據(jù)企業(yè)CEO孟智平的說法，是因為他希望能讓更多人體驗到專業(yè)的H5制作服務(wù)、開展更廣泛的創(chuàng)作，而不是讓好的功能淪為商業(yè)的傀儡。

但從產(chǎn)品的長遠發(fā)展來看，這樣的確也能留住更多做優(yōu)質(zhì)內(nèi)容的創(chuàng)作者，而非生產(chǎn)商業(yè)廣告的執(zhí)行者。

付費平臺

指工具去廣告服務(wù)與用于培訓(xùn)的線下課程。

因為iH5發(fā)布的網(wǎng)頁在移動端都會出現(xiàn)3秒左右的品牌標(biāo)識加載頁，頁面域名后綴也為ih5.cn。對于商業(yè)用戶而言，他們想要完全去除第三方工具的品牌特征，就需要購買一定的增值服務(wù)。這一塊也是iH5盈利的主要來源，作為功能免費的取舍。

線下課程班，目前在國內(nèi)開展的城市不多，主要還停留在北上廣這些大城市，課程定位在于讓用戶在短期內(nèi)掌握工具的使用。這種模式比較傳統(tǒng)，實際上吸引到的更多是企業(yè)用戶，通過培訓(xùn)的方式為公司人員儲備知識技能，可以節(jié)省外包的成本。

另外有一種比較少人知道的是多屏交互演示系統(tǒng)的技術(shù)解決方案，本質(zhì)上也是通過工具授權(quán)獲利。

七、結(jié)語

總的來說，iH5面向的是企業(yè)和專業(yè)用戶。企業(yè)就是公司市場部、媒體公司和4A廣告公司這些，專業(yè)用戶主要指設(shè)計師、開發(fā)者，主要特點有3個：

（1）工具的開發(fā)把引擎盡量做得輕量級，完全搭建在云端；

（2）制作流程傾向于對多媒體元素進行底層控制，圖形化界面+配置的模式，接近程序可視化的思維，能留給創(chuàng)作者較大的設(shè)計余地；

（3）擁有一套完整的行業(yè)解決方案，包括培訓(xùn)、制作、廣告展示、數(shù)據(jù)監(jiān)控等方面。

需要注意的是，國內(nèi)外其實都出過很多H5頁面制作工具，但適用于商用的大多是國外的大牌軟件，比如Adobe Animate、Google Webdesigner、Tumult Hype等；國內(nèi)平臺很多做的是組合套件，這樣帶給創(chuàng)作者發(fā)揮的空間很少。

目前，絕大部分工具生產(chǎn)的H5廣告制作成本都控制在5萬之內(nèi)，而開發(fā)類的H5廣告可能開發(fā)成本本身都超過5萬。H5的工具化生產(chǎn)應(yīng)該是未來網(wǎng)絡(luò)廣告制造業(yè)提高制作效率的一大出路。

作者：種子，專攻HTML5、交互設(shè)計

本文由 @種子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。