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