中美在H5的設(shè)計(jì)和生產(chǎn)上差距有多大？
大家都知道國內(nèi)有很多便攜的H5頁面制作工具，使用起來很快，操作起來也很傻，但不一定了解國內(nèi)外同類軟件或工具的最高水平。
先揭曉答案——這可能是你沒想到的，國內(nèi)技術(shù)水平已經(jīng)逼近美國，有些領(lǐng)域遙遙領(lǐng)先。但客觀地說，老美設(shè)計(jì)的產(chǎn)品的用戶體驗(yàn)還是很不錯(cuò)的。
下面以國內(nèi)iH5、美國Hype和Adobe為例，比較一下國內(nèi)外頂級H5頁面創(chuàng)建工具或軟件的區(qū)別。
一、iH5、炒作和應(yīng)用比較
首先，中美差異的根源在于市場環(huán)境：
（1)由于微信H5廣告在中國的火爆，現(xiàn)在市場對移動(dòng)廣告制作的需求很高。因此，國內(nèi)制作工具的各種功能和服務(wù)往往以完整的廣告頁面結(jié)束，其次是開辟一條完整的生產(chǎn)線。
·(2)在國外，隨著多媒體巨頭Flash的沒落，出現(xiàn)了HTML5的熱潮。Flash的主要用途是動(dòng)畫制作和廣告制作，所以國外的H5制作工具本質(zhì)上是集成了Flash和網(wǎng)頁創(chuàng)作功能。
三種工具的基本區(qū)別如下：
對比之后你會發(fā)現(xiàn)，雖然iH5是一款企業(yè)級服務(wù)的H5頁面創(chuàng)建工具，但它的功能和服務(wù)完全是在云端構(gòu)建的。
Hype是一個(gè)輕量級的軟件（只有12M），但是因?yàn)槭且粋€(gè)軟件，所以多了一套開發(fā)的輪子?？赡芤?yàn)閳F(tuán)隊(duì)精力有限，目前只有mac版本。.
不用說，Adobe的大牌產(chǎn)品其實(shí)就是軟件 Flash和Edge這兩個(gè)合并升級版，界面功能和Adobe的PS、AI等老牌軟件很相似——所以它也很大，最多1G以上。
所以，國產(chǎn)iH5并沒有走賣軟件的路線，而是包年包云服務(wù)和配套工具培訓(xùn)；而國外Hype和是軟件的單一授權(quán)，永久使用，不會安排發(fā)布網(wǎng)頁所需的服務(wù)器部署。
二、iH5、Hype和IH的界面對比
以下是iH5、Hype和（已標(biāo)注）的界面對比：
(1)iH 5主界面
iH 5在國內(nèi)應(yīng)用比較廣泛，因?yàn)榻缑婧凸δ芑径际强梢暬僮?，并且支持網(wǎng)頁發(fā)布，無需二次開發(fā)。
它的結(jié)構(gòu)比較簡單，只有5個(gè)分區(qū)。與 Hype 的界面有很多靜態(tài)選項(xiàng)卡不同，iH 5 的屬性面板是動(dòng)態(tài)的，會根據(jù)用戶選擇的組件類型進(jìn)行更新，因此使用起來相對容易。
比較特別的是，它的資源面板（“對象樹”）作為素材、頁面、布局管理，多重職責(zé)，設(shè)計(jì)思維傾向于將功能合二為一。
(2) Hype的主界面
Hype 在中國流行了 15 年，但現(xiàn)在使用的人似乎不多，雖然它也是一個(gè)非常強(qiáng)大的軟件。
Hype 的優(yōu)勢在于它支持一定數(shù)量的視覺交互，雖然不是很多。此外，它還可以實(shí)現(xiàn)自動(dòng)響應(yīng)式布局。與iH 5的響應(yīng)式布局相比，需要對設(shè)備進(jìn)行一一定義。Adobe得去下載另一個(gè)軟件Muse，很方便。
(3)Adobe 的主界面
它需要一個(gè)代碼庫，屬于可視化動(dòng)畫設(shè)計(jì)和便捷開發(fā)相結(jié)合的，所以它實(shí)際上為用戶提供了7種不同的界面：動(dòng)畫、傳統(tǒng)、調(diào)試、設(shè)計(jì)器、開發(fā)者、基礎(chǔ)功能、小屏。
有利于H 5動(dòng)畫或者網(wǎng)頁開發(fā)源碼的快速生成和導(dǎo)出——不僅是HTML 5格式，還有Air、Flash等。所以它不是單純的H 5頁面制作或者動(dòng)畫制作，還有從其支持的模板也可以看出其應(yīng)用的復(fù)雜性。
國內(nèi)一些成熟的開發(fā)團(tuán)隊(duì)會使用一些方便的可視化功能來設(shè)計(jì)和開發(fā)H 5運(yùn)動(dòng)效果，以簡化制作過程。
三、iH5、炒作與功能對比
從一個(gè)細(xì)節(jié)上就可以反映出老美的產(chǎn)品定位與國內(nèi)的不同。
Hype 3.6 分為標(biāo)準(zhǔn)版（50 美元）和專業(yè)版（100 美元）。其中，專業(yè)版的制作功能較多，操作界面的主題顏色比標(biāo)準(zhǔn)版要深一些。還支持在界面內(nèi)調(diào)整面板的大小。
也就是說設(shè)計(jì)網(wǎng)站的軟件adobe，他們的軟件不僅賣功能，還有尊貴的身份和良好的體驗(yàn)。下面通過7個(gè)維度分析功能對比，大致可以看出三者的區(qū)別——
以上指標(biāo)表示軟件或工具支持的可視化操作，具體支持會有一些差異，如字體、iH 5支持平臺預(yù)設(shè)中文字體、Hype支持、字體、系統(tǒng)字體等。未選中意味著代碼需要實(shí)現(xiàn)或根本不受支持。
可以看出，這三款工具都具備強(qiáng)大的多媒體剪輯和動(dòng)畫制作能力。
（1)iH 5在高級控制和動(dòng)作管理等交互操作方面具有很大優(yōu)勢，支持720°全景、微信語音識別、表單采集處理、數(shù)據(jù)操作等功能。
多用于H 5廣告和互動(dòng)網(wǎng)頁制作，可以直接發(fā)布為網(wǎng)頁，也正因如此，主要以云服務(wù)（賣網(wǎng)站流量）為主。
(2)Hype在頁面管理的布局設(shè)計(jì)上有很大的優(yōu)勢，支持響應(yīng)式布局、可伸縮布局等部分網(wǎng)頁設(shè)計(jì)功能，可以讓導(dǎo)出的內(nèi)容有很好的跨平臺展示效果。
多用于交互網(wǎng)頁和電子書的制作，是主要的制作工具（出售軟件）。
（3)在內(nèi)容管理等圖像編輯方面有很大優(yōu)勢，有很多組件與Adobe系列套件有重疊。
另外，由于上表是基于不涉及代碼操作的功能設(shè)計(jì)網(wǎng)站的軟件adobe，在移動(dòng)開發(fā)中可能看不到一些特性。其實(shí)它的編輯器、Flash集成等功能對于頁面開發(fā)來說是非常方便的。它主要用于復(fù)雜的動(dòng)畫和交互式網(wǎng)頁制作。
最后，他們也有自己的“硬傷”。iH 5的缺點(diǎn)是導(dǎo)出格式比較簡單，只用于網(wǎng)頁制作；Hype的缺點(diǎn)是缺乏高級的組件化功能，支持的元素和交互控件相對較少；缺點(diǎn)是缺乏可視化交互控制，很多高級功能需要開發(fā)人員干預(yù)。
四、總結(jié)
總的來說，國內(nèi)的產(chǎn)品擅長“二合一”，而國外的“一分為二”，各有優(yōu)缺點(diǎn)。
（1)iH 5的“一體式”產(chǎn)品設(shè)計(jì)有利于簡化用戶的學(xué)習(xí)和使用，去除了很多視覺或理解上的干擾因素。但也需要用戶有很強(qiáng)的綜合應(yīng)用能力——它更符合中國教育擅長的總體概念。
（2)炒作，這種“一對二”的產(chǎn)品設(shè)計(jì)有利于功能的細(xì)化和用戶體驗(yàn)的提升。但是，復(fù)雜的面板設(shè)計(jì)也需要用戶花很長時(shí)間去學(xué)習(xí)和使用。
如果團(tuán)隊(duì)有比較成熟的開發(fā)者，會省時(shí)省力；如果缺少程序員或者想進(jìn)一步減少網(wǎng)頁制作時(shí)間，使用iH 5會更方便；至于Hype，按照現(xiàn)在的趨勢，可能很難有大的發(fā)展。