在H5的設(shè)計制作上，中國和美國的差距有多大?
大家知道國內(nèi)有很多輕便型的H5頁面制作工具，上手快、操作傻瓜式，卻不一定了解國內(nèi)外同類軟件或工具的最高水準。
先透露一下答案吧——這可能是你沒料到的，國內(nèi)技術(shù)水平已經(jīng)逼近美國，而且某些領(lǐng)域遠遠領(lǐng)先。不過客觀地說，老美設(shè)計的產(chǎn)品，用戶體驗還是非常了得的。
下面以國內(nèi)的iH5，美國的Tumult Hype、Adobe Animate為例，對比國內(nèi)外頂尖H5頁面制作工具或軟件的區(qū)別。
一、iH5、Hype和Animate的應用對比
首先，中美差異的根源在于市場環(huán)境：
(1)國內(nèi)由于微信H5廣告的盛行，現(xiàn)在對移動廣告制作有很高的市場需求。因此，國內(nèi)制作工具的各種功能與服務(wù)，最終落地的往往是完整的廣告頁面，隨之開辟出一條完整的生產(chǎn)線。
· (2)國外則是隨著多媒體巨頭Flash 的沒落，興起了一股HTML5的熱潮。Flash的主要用途就是動畫制作、廣告制作，因此國外的H5制作工具本質(zhì)上是整合了Flash和網(wǎng)頁制作的功能。
三個工具的基本差異如下——
比較后，你會發(fā)現(xiàn)iH5雖然是面向企業(yè)級服務(wù)的H5頁面制作工具，功能和服務(wù)是完全搭建在云端的。
Hype屬于輕量級的軟件(只有12M)，但因為是軟件，開發(fā)上也多了一套輪子，可能因為團隊精力有限，目前只出了Mac版。
Animate就不用說了，大牌Adobe的產(chǎn)品，實際上是Flash和Edge兩款軟件的合并升級版，界面功能什么的和Adobe 的PS、AI等老牌軟件很相似——所以也很龐大，高達1G多。
因此，國內(nèi)的iH5走的不是賣軟件的路線，而是包年的云服務(wù)、配套的工具培訓;而國外的Hype和Animate，賣的則是軟件的單次授權(quán)、永久使用，不會包辦發(fā)布網(wǎng)頁所需的服務(wù)器部署。
二、iH5、Hype和Animate的界面對比
以下是iH5、Hype和Animate的界面對比(已作標注處理):
(1)iH5的主界面
iH5在國內(nèi)的應用較廣泛，因為界面與功能基本都是可視化的操作，并支持網(wǎng)頁的發(fā)布，不需要二次開發(fā)。
它的結(jié)構(gòu)比較簡潔，只有5個分區(qū)。和Hype、Animate的界面有很多靜態(tài)選項卡不同，iH5的屬性面板是動態(tài)的，會根據(jù)用戶選中的組件類型進行更新，所以使用上比較簡便。
比較特別的是，它的資源面板(“對象樹”)充當素材、頁面、布局管理多種職責，設(shè)計思維傾向于把功能合而為一。
(2)Tumult Hype的主界面
Hype在15年的時候，在國內(nèi)小火過一把，但現(xiàn)在好像沒多少人在用，雖然它也是一款很厲害的軟件。
Hype的優(yōu)勢在于它支持一定的可視化交互動作，雖然不是非常多。此外，它能實現(xiàn)自動化的響應式布局，對比iH5的響應式布局需要逐一定義設(shè)備，Adobe還得去下載一個另外的軟件Muse來說，還是很方便的。
(3)Adobe Animate的主界面
Animate需要代碼基礎(chǔ)，屬于可視化動畫設(shè)計與便捷開發(fā)的結(jié)合，所以它其實全部為用戶提供了動畫、傳統(tǒng)、調(diào)試、設(shè)計人員、開發(fā)人員、基本功能、小屏幕7種不同的界面。
Animate有利于H5動畫或網(wǎng)頁開發(fā)源碼的快速生成與導出——而且不止HTML5格式，還包括Air、Flash等。所以它其實不是單純地面向H5頁面制作或動畫制作，從它支持的模板也可以看出它應用上的復雜性。
國內(nèi)一些成熟的開發(fā)團隊會利用Animate一些便捷的可視化功能，進行H5的動效設(shè)計與開發(fā)，簡化制作流程。
三、iH5、Hype和Animate的功能對比
從一個細節(jié)可以體現(xiàn)老美產(chǎn)品定位上和國內(nèi)的區(qū)別。
Hype 3.6分標準版(50美刀)、專業(yè)版(100美刀)兩種，其中專業(yè)版除了多一些制作功能外，操作界面的主題色比標準版多一種深色，還支持調(diào)整界面內(nèi)的面板大小。
換句話說，他們的軟件賣的不單單是功能，還有一種尊貴的身份、良好的體驗。下面的功能對比通過7個維度進行分析，可以大概看出三者區(qū)別——
上面的指標表示該軟件或工具支持的可視化操作，具體支持上會有一定差異，比如字體這一項，iH5支持平臺預設(shè)的中文字體，Hype支持Google、Monotype字體，Animate支持系統(tǒng)字體。不打勾表示需要代碼才能實現(xiàn)或完全不支持。
可以看出，三種工具都具備較強的多媒體編輯和動畫制作能力。
(1)iH5在高級控制、動作管理這種交互操作上有較大優(yōu)勢，支持720°全景、微信語音識別、表單采集與處理、數(shù)據(jù)運算等偏可視化邏輯的功能。
它多被用于H5廣告與交互式網(wǎng)頁制作，可以直接發(fā)布為網(wǎng)頁，也因為如此它主打的是云服務(wù)(出售網(wǎng)站流量)。
(2)Hype在頁面管理這種布局設(shè)計上有較大優(yōu)勢，支持響應式布局、可伸縮的布局等偏網(wǎng)頁設(shè)計的功能，可以讓導出的內(nèi)容具備良好的跨平臺顯示效果。
它多被用于交互式網(wǎng)頁和電子書的制作，主打制作工具(出售軟件授權(quán))。
(3)Animate在內(nèi)容管理這種圖像編輯上有較大優(yōu)勢，有很多和Adobe系列套件重疊的組件。
另外，因為上面表格是以不涉及代碼操作的功能為依據(jù)，所以可能看不出Animate在移動開發(fā)上的一些特性，實際上它的Action Script編輯器、Flash Builder 集成等功能對于頁面開發(fā)非常便捷。它多被用于復雜動畫、交互式網(wǎng)頁制作。
最后，它們也各有各的“硬傷”。iH5的弊端在于導出格式比較單一，只面向網(wǎng)頁制作;Hype的弊端在于缺乏組件化的高級功能，支持的元素和交互控制相對較少;Animate的弊端在于缺乏可視化的交互控制，很多高級功能需要開發(fā)人員介入。
四、小結(jié)
總的來說，國內(nèi)的產(chǎn)品擅長“合二為一”，國外的喜歡“一分為二”，兩者各有各的好壞吧。
(1)iH5這種“合而為一”的產(chǎn)品設(shè)計，有利于簡化用戶的學習與使用，去除很多視覺或理解上的干擾因素。但這也需要用戶有較強的綜合應用能力——比較符合中式教育擅長的概括總結(jié)性理念。
(2)Hype、Animate這種“一分為二”的產(chǎn)品設(shè)計，有利于功能的精細化，提升用戶體驗。但這也需要用戶花費較長時間去學習、使用復雜的面板設(shè)計。
如果團隊有比較成熟的開發(fā)者，用Animate省時省力;如果缺乏程序員或希望進一步縮減網(wǎng)頁制作時間，用iH5比較方便;至于Hype，照目前趨勢可能比較難有大的發(fā)展了。
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
