現在市面上的這麼多的h5交互設計軟體，到底有什麼差異？

01-14

作為去年三月就被特斯拉翻頁案例驚呆了然後立刻一周內花1萬大洋找技術團隊給某500強客戶做了一個同樣在當時看起來很屌但並沒有卵用的翻頁介紹之後又停不下來用了十幾款H5免費軟體的4A公司苦逼AE！看到這個題目還是決定在國慶節的最後一天回答一下

目前我所知道的H5設計軟體大致可以分成兩類，專業工具類和簡易模板類。

專業工具類：VXPLO（貌似改版為iH5了）, Epub360, Google Web Designer , Adobe Edge , Hype

簡易模板類：Maka , 易企秀，初頁，兔展，易傳單，品趣，點點客，秀製作，微雜誌，雲來，最酷輕應用，營銷雲，70度，Bluemp……

不過雖然軟體很多，但國內專業類只有VXPLO和Epub比較靠譜，谷歌 Adobe Hype那些因為不適合中國國情根本用不了，而模板類同質化嚴重，基本上用一兩個就夠了。

模板類的選擇很簡單，因為基本都是簡易自定義動畫（類似簡單PPT效果），加上用戶作品模板化。而自定義功能在這個層次的軟體基本沒有任何區別，唯一選擇的依據就是模板多不多，用戶體驗好不好。以本人閱軟體無數的經驗，用maka和易企秀就夠了，前者用戶體驗好些，易企秀廣告有點丑，不過模板多一些。

VXPLO和Epub的對比要有意思一些，都是國產良心之作，但軟體的設計完全是不同風格，以下僅從個人使用角度分析一下優劣：

1、動畫交互

VXPLO以「時間軸+軌跡」的方式組織動畫，頁面上每個動畫元素對應一個軌跡，多個元素的軌跡可對應同一時間軸。通俗來講就是，你用快播看電影，裡面的演員各自都在行動，但是你可以通過播放進度條控制他們的狀態，這裡的播放進度條就是時間軸，表演的演員就是動態元素。也可以用多個時間軸來控制多個軌跡，這樣各個元素的動作就是非同步的。

Epub用的是PPT模式，通過動效組合及排列的方式組織動畫，表達方式類似：A 動1→B 動1→C 動2→A 動3→C 動3→結束。

兩種方式有利有弊。Epub模仿PPT的模式對一般人而言要更容易上手，但是對於稍微複雜的動畫就有點效率低下，因為你要計算每個元素的動效相對上一個動效的時間差，這種方式在動畫元素較多且動效組合複雜的情況下會比較暈，如果比喻成導演就是，100個群眾演員，你每一個演員說完一句話都得告訴其他演員接下來要在什麼時間後做什麼，而且某個演員在時間上差錯可能會對整體有很大的影響。

VXPLO的處理方式比較特別，感覺上是一種抽象思維，相當於把元素的動效抽象成一個個軌跡，再把軌跡統一由時間軸管理，好處就是效率很高，壞處就是學習成本高一些。還是用導演的例子，100個演員，每個人都有一個劇本，他們只要按照劇本要求的時間點和相應的台詞動作執行，每個演員的表演相互獨立，但通過時間軸建立協同。這種模式只要想清楚劇本，後期調整方便，並且可以單個元素調整而不影響整體。當然，這種思維方式需要一定時間才能掌握。

2、資料庫應用

如果你的H5涉及評論、表單收集、微信登陸、排名這些功能，都屬於資料庫應用的範疇，這也是專業類軟體區分模板類的重要功能之一。

VXPLO靈活度較高，所有欄位以及表單的樣式都由用戶自己定義，模式是用戶建立一個包含所需欄位的空數據表單（可以認為是一個第一行是姓名手機郵箱的excel），然後在頁面畫幾個輸入框，把各個輸入框和表單的某一個欄位（比如姓名）綁定一起，用戶輸入的信息會自動添加到對應的表單的列和行。表單可以排序和讀取，於是實現評論、排名和登陸判斷的功能。

Epub則要更容易操作一些，但自由度較低，所有評論、表單功能都是組件化的，添加評論和表單組件是整體添加，用戶在提供的組件基礎上修改。這種方式的好處是比較省事，壞處就是只能用固定的樣式，欄位和評論數量有一定限制，登陸判斷暫時還沒有組件支持。

（好久沒登知乎，看在還有人點贊份上，再補充一些吧）

3、易用性和效率

其實所謂的易用性也是相對的，所謂「用」首先還是要滿足需求，如果你的需求就是做一個方便展示信息和收集報名的邀請函，可能易企秀就夠了，當然，像iH5這種較高級的工具也能做，但區別就是，很多時候你會用畫圖工具調整圖片尺寸而不是PS。

不過只要你的需求稍微需要一些交互和邏輯，可能maka、易企秀就變得很煩人了，處處都是限制。具體到epub和iH5，兩者還是差異挺大的，我的感覺就是epub其實介於易企秀和iH5之間，形象點而言就是帶交互的PPT，具體實現邏輯參考第1點動畫交互的描述，總之給人感覺就是還行，不過可能因為基於PPT邏輯的關係，所以感覺很多複雜交互的東西還是實現不了。

iH5近似編程思維，感覺產品經理應該也是計算機出身，對類和繼承的體現還是很明顯的（好吧，如果你沒學過計算機就忽略吧），能把編代碼的工作可視化到這種程度，說實話個人還是比較佩服的，雖然還是比較複雜，但一般邏輯比較好的人還是很容易學會，好處就是一旦掌握了基本什麼效果都能做出來，而且iH5把所有元素的動畫的對象化處理也對製作效率有比較大的幫助，可以很方便的在不同案例之間複製。

說句題外話，個人感覺這類工具市場還是非常大的，它其實是把編程平民化了。舉個例子，幾十年前可能做一張圖片都要程序員編代碼實現，但後來PS之類的工具出現了，普通人也能做很漂亮的圖片，記得中學剛接觸PS的時候也是覺得挺興奮的。現在其實iH5這種工具就是把做網頁的這種原本要編代碼實現的事情平民化了，區別就是會用PS的人比會編代碼的人要多得多得多，以後做網頁就跟做一張圖片那樣簡單。說實話，本來程序邏輯能解決的事就應該是能被機器替代的，個人覺得程序員遲早都是要失業的

跟iH5比較類似的主要是國外的軟體，Adobe Animate CC、谷歌 Web designer ，還有蘋果員工出來創業的Hype，其中Hype個人覺得是做的最好的，功能齊全，體驗佳，不過就是離線的不太方便。有興趣可以試試

補充一下一樓，VXPLO和EPUB使用上的一些區別。

聲明：因為這兩個工具都是在線平台，會隨時更新功能，以下對比僅限於此此時此刻

使用範圍：VX在同作品裡可以設置支持多種屏幕設備，通過簡單修改就能同時支持移動端的豎屏和桌面橫屏。EPUB主要支持移動設備，另有COOLSITE以供製作自適應屏幕的項目。

視覺設計和排版操作：EPUB比較人性化，編輯狀態默認以50%面積顯示畫布，有輔助對齊指示線和貼合功能，便於快速組合設計元素。VX有輔助線，但無法精確定位，比較雞肋，這對一個嚴謹的設計師來說，真的很折磨。另外很想問一下VX的開發者，滿大街的顯示器都是1080，滿大街的筆記本都是768解析度，默認畫布都無法全屏顯示，你們是想拒絕這部分用戶嗎？

對象管理：VX有強大的對象樹，一切對象包括分頁、素材、事件、動畫統統囊括，而且可以直接複製剪切粘貼對象（包括事件），便於統籌管理，但製作大項目的時候必須要有好的命名習慣，否則容易眼暈。EPUB則把各個對象分配到不同的面板，依據視覺元素》動畫》事件的順序排列，也比較合理，但是做小項目時幾個面板繞來繞去也是比較麻煩。

動畫效果：VX預置了時間軸、運動、緩動、動效等幾種組件，其中動效里有幾十個預設動畫可選；用時間軸可以做細緻的動畫，另外還可以用視距參數做強大的三維動畫，小白不詳細學習的話估計會眼暈。而EPUB的動效集中在元素屬性面板上添加，還有N個看得眼暈的加速度選項，可以在動畫面板里統一管理，參數化操作，勝在快捷。

頁面過度動效：EPUB集合了幾種常用的頁面過度效果，包括較炫的三維翻轉。而VX那些強大的動效不能用在頁面對象上，過渡效果只是一些加速度變化，聊勝於無。

特色組件：兩家都在不定期的更新上線新組件。EPUB有地圖導航（接入騰訊地圖）路徑動畫，剛又上線了SVG動畫。VX則有橫幅、視頻交互控制、多屏互動、、

外圍設計(如作品管理分享)：VX比較簡單明了，沒什麼限制。EPUB比較冗餘，且限制較多，但勝在有用戶自定義素材庫。

總的來說，EPUB全部模塊化參數化，適合小白快速出活。而VX更像是EPUB的底層，適合大拿深度研究。不過，具體項目上還得依據需求取捨。

H5我只服iH5互動大師。

我原先也認為iH5學習成本高，常用易企秀、雲來、人人秀、百度H5、易派360，用了兩年多，最後發現，還是iH5最好。

在功能和技術上，說說我的使用體驗。

易派360：功能上僅次於互動大師，界面不錯，但是略卡，仍然是非常好的平台。

易企秀：功能少，僅能做展示型使用，勝在用戶多，模板多，操作也簡單，也是很好的平台。

MAKA：和易企秀差不多，最近增加了一些抽獎之類的功能。

人人秀：功能組件較多，在這個平台可以使用口令紅包等促銷組件。

百度H5：唯一免費無廣告的平台，計數器操作簡單，做小測試很好用。

雲來：功能組件也比較多，獨有的分享後轉跳設置，非常適合做推廣。

最酷：功能較多，但是我打開一直無法使用，諮詢官方無果。

屏面：一個廣告公司搞的，界面比較牛，可能是最早能導入PSD的平台。

木疙瘩：嘗試過，功能強，案例少，個人用不習慣。

所以，要我選，複雜的功能首推iH5（很多功能是獨有的，比如全景，專業版的價格也適中），小測試用百度H5（計數器好用，且無廣告，免費）。

最後給iH5提個建議：很多人認為學習難度高，是因為99%的平台一打開，左邊或右邊就會出現《頁面》面板，頁數是從上到下的順序。而iH5的頁面藏在對象樹裡面，默認沒有頁面，且是頁數是從下到上的順序，這個和大多數的習慣不適應，會感到無所適從。不過一但理解了，也沒有問題的。建議iH5在新手宣傳中，首先點明這個不同點。

上面有人提到的Cellz看起來也不錯，能做APP，可是只能MAC用。

有圖，我看了一下，還是以展示為主，不過真的以線下PPT的方式來做。

利益相關：Cellz員工

第一頁David已經說的很詳細了，正好提到了hype，我就順便提一下Cellz這個工具。

http://Cellz.cn

業內目前最有轟動性的H5還有很大一部分是用編程實現的，無他原因，這種實現的可能性最廣。那有沒有辦法用工具做出來類似寶馬M2、吳亦凡即將入伍、韓寒最新微博：我說的比唱的好聽等等極具轟動效應的H5呢，答案是可以。

這種H5一方面是需要極具創意和想像，還有一方面是極強的交互和素材整合能力。

Cellz和Hype恰好是針對這個領域，兩者均具備很強大音視頻、動畫、圖文編輯、大多數文件格式的兼容整合能力。兩個軟體都只運行於MAC系統，也恰好各自位於中國區和北美區APPstore H5搜索排行榜第一名。

讓我們先看第一個時尚先生的案例，

核心：動畫+狀態集完美融合，播放速度和背景音樂節奏始終一致

第二個案例北京現代-領新而動

核心：動效交互，類似遊戲方式帶入體驗領動隨附兩者教程：

Cellz 幫助中心 - Cellz--美上，最好的內容創作者社區

Hype Tumult Hype

因為老大說要做h5，就沒辦法百度了一下幾款軟體，身為設計師的，可以不需要學習代碼就製作各種交互的h5效果，一下子逼格就高了。下面我談談幾個我所使用過的h5編輯軟體，可能不夠全面，勿噴。

vxplo互動大師：靈活度高，可以自定義各種效果，功能強大，效果炫酷，對象的位置精確到像素，適合專業一點的設計師或者是逼格高的人使用。不足是新用戶的引導做得還不夠好，有點不知道要從哪裡開始。看了幾段視頻之後才摸到點門道。不過工具確實足夠強大，花一些時間學習後，什麼交互效果都能做；技術做到這樣，h5剩下的真的是拼創意了；不過小吐槽就是對設計師來說，少了排版功能，比如我想某個元素想在舞台上居中，客服回答說要自己根據坐標算一下，所以數學差一點的童鞋們暫時就繞路吧。

易企秀：簡單易用，短時間就能上手，適合做展示，以及邀請函，最後一頁是易企秀的尾頁，商業做的話不太適合，後期沒再使用了，不過貌似說現在可以買秀豆去尾頁，具體的價格我不太清楚。但是缺點是自定義程度低，效果單一，做多了幾個案例就膩了，統計數據的準確性需要進一步確認，有遺漏數據的現象，

maka，秀米等，其實我自己覺得他們跟易企秀都挺像的，不知道這幾個產品具體的定位差異是什麼。秀米功能對我來說太少了，maka就是網站不是太穩定。

暫時就用過這些。還有什麼好介紹的？歡迎推薦。

頁面狀態還是組件？到底什麼才是交互的中心？

隨著信息行業的日益發展，軟體的開發設計得到了更多人的重視，軟體的原型設計也同樣的變得原來越重要。我們目前使用的原型設計工具中，設計的模式普遍為兩種，一種是以頁面狀態為中心來設置交互，比如Flinto for Mac和Principle。另一種模式則是以組件為中心，這種工具也很多，比如大家常用的Axure和Mockplus。那麼這兩種方式哪一種才是最好的呢？我們這裡來做一下具體的分析。

一、以頁面狀態為中心

Flinto for Mac和Principle這類原型設計工具有一個共同點，那就是它們本身幾乎不具有任何產生組件的能力，基本都是通過使用導入其它圖形工具導出文件而獲取組件和頁面的。Flinto敏感的抓住了一個現象，那就是Sketch的崛起。它果斷用一種可以說是與Sketch捆綁的方式開發了Flinto for Mac的版本。通過以頁面狀態為中心來設置交互，在狀態羅列在頁面後，簡單的鏈接就會自動產生動畫效果，而且動效還很逼真。這對於開發後期的UI演示來說，幫助是極大的。Principle的工作原理和Flinto for Mac基本相同。

這種以頁面狀態為中心設置的方式確實受到了很多人的追捧，但是問題也是確實存在的。當一個頁面中有大量的組件需要實現交互的時候，這個依靠不同的頁面狀態來實現交互設置的方式就面臨了一個巨大的挑戰，那就是如何來顯示大量的狀態。Flinto和Principle的方法想必也是出於無奈，它們只能把各個層級按照某種順序排列在地面上。

二、以組件為中心

Axure、Justinmind以及Mockplus這類原型設原型設計工具本身是具有產生組件的能力，很自然地，組件就成了這類工具軟體設置交互的中心。多數的交互都是通過改變組件的屬性來實現的，使得整個設計過程變得靈活起來。而也正是這種靈活的設計方式在軟體開發的前期需求表述上可以真正的做到快捷、有效。

相信很多用戶在升級了Axure新版本之後並沒有收穫原有的期待，不過Axure仍然是用戶最多的原型設計工具。它的設計操作模式也為很多同類的工具提供了借鑒，甚至可以說，有很多原型設計工具是在模仿Axure。Mockplus在設置上通過高度可視化減少了設置步驟，在面對大量的交互設置時，仍然能夠實現敏捷迅速。

然而，當交互的設置對象為組件而不是頁面狀態的時候，那麼這個項目顯示出來的整體篇幅就小了很多。Axure對於交互功能的支持更加豐富。Mockplus也不甘示弱，尤其是它對可視化程度的把握。它採用的拖拽方式是設計過程變得可視化，而設置結束之後鏈接線就會隱藏，所以即使頁面內部的交互設置多達幾十個，也並不會影響整體的視覺效果。

不管是以頁面狀態為中心，還是以組件為中心，最好的原型設計方式只存在與相對的人群之中。開發前期的需求表述方面，Axure和Mockplus很明顯是佔有優勢的。而Flinto for Mac和Principle則在後期的演示中能夠呈現出更好的效果。結合需求才能選擇正確的工具。

各位的評價都很贊，個人覺得VXPLO是靈活度較高的，實現的效果也多多的，還可以做很多牛逼的小遊戲。例如： http://www.ih5.cn/idea/qlNd7hO

說到區別，有一個比較乾貨的文章，是討論HTML5製作工具怎麼做屏幕自適應的，不同工具方法不同吧。大家可以去圍觀一下哦~~html5製作工具怎麼做屏幕自適應？ - flying 的回答

在網上看到談來談去的都是這幾款，其實也有一些實用的功能強大又容易上手的H5動畫工具。

像有圖、木疙瘩這些，它們在營銷推廣上投入不大，所以名氣相對較小，但是在體驗和功能上並不遜色。

有興趣的朋友請自行去試用，花費不了多少時間成本。

1. 有圖

http://www.360youtu.com

很容易上手的H5頁面製作工具，完全不需要編程基礎；我比較喜歡的是它除了在線版本外還有離線版本，可以在本地編輯完成後再上傳發布，對於擔心網路狀況的朋友其實是福音。

整體的動畫製作思路和PPT動畫很接近，容易上手，培訓成本低，基本上30分鐘就可以讓新手來試做了。

報名表單、一鍵撥打電話等常見功能也都模塊化，傻瓜實現，不需要懂編程。

2. 木疙瘩

http://www.mugeda.com

相比於互動大師，其實我覺得mugeda給我的感覺更接近於flash。總體來說兩者有相似也有不同，不過都是屬於學習成本相對較高的，有一定的flash動畫製作經驗的用戶更容易上手。

抱著分享的態度，不是打廣告，也不是和誰爭論孰優孰劣；歡迎探討，共同找到更好用的工具。

評價很中肯，我們努力服務好專業客戶的同時也會開發更多地模版讓新手也能更快上手，期待關注。