一、體驗環境

體驗產品：www.ih5.cn

評測時間：16年11月

瀏覽器：Google Chrome 53（PC端）

二、行業概述

行業背景

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

需求分析

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

隨著國內網絡廣告市場規模的增長，HTML5被很多人認為是互聯網的下一個風口。但因為HTML5概念的普及、應用的加強，H5頁面開始出現大面積同質化的現象。各行各業對H5廣告的產量和質量的要求越來越高，大家都在等一個和Adobe Flash一樣兼具專業性與實用性的平臺出現。

三、產品概述

產品定位：專業的H5創作工具與服務平臺

產品服務

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

（1）H5廣告展示平臺

表面上看，H5廣告展示平臺就是一個行業優質H5的聚集地，展示作品為平臺用戶制作的H5。

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

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

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

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

（2）H5可視化編輯工具

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

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

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

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

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

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

（3）工具教學與培訓中心

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

本質上，采用的是線上免費教學、線下付費指導的模式。

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

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

（4）數據監控中心

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

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

b. 大數據報告：通過長期的數據收集、統計與處理，有利于輸出專業的行業數據報告。

四、用戶分析

根據網站展示的作品類型，可以看出產品主要用戶是企業、媒體、廣告公司的營銷人員，也有一定數量的獨立設計師。

用戶需求與痛點

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

用戶反饋

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

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

五、功能分析

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

（1）基礎多媒體組件

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

（2）高級多媒體組件

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

（3）數據應用組件

與數據庫相關的功能組件，主要涉及對字段、輸入框與變量的控制，屬于HTML5網頁表單相關的控件，拓展性較強。

（4）容器組件

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

（5）其他功能

主要是一些外部js的應用，包括微信紅包、微信設定內容、語音識別等。

六、盈利模式分析

免費平臺

指工具使用、內容發布不收取費用，面向設計師和開發者。設計師可以完全用工具可視化的功能進行創作，不需要學網頁編程；開發者可以利用工具提供的開放接口、開放組件，進行二次開發，省時省力。

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

但從產品的長遠發展來看，這樣的確也能留住更多做優質內容的創作者，而非生產商業廣告的執行者。

付費平臺

指工具去廣告服務與用于培訓的線下課程。

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

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

另外有一種比較少人知道的是多屏交互演示系統的技術解決方案，本質上也是通過工具授權獲利。

七、結語

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

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

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

（3）擁有一套完整的行業解決方案，包括培訓、制作、廣告展示、數據監控等方面。

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

目前，絕大部分工具生產的H5廣告制作成本都控制在5萬之內，而開發類的H5廣告可能開發成本本身都超過5萬。H5的工具化生產應該是未來網絡廣告制造業提高制作效率的一大出路。

作者：種子，專攻HTML5、交互設計

本文由 @種子 原創發布于人人都是產品經理。未經許可，禁止轉載。