語：為研發(fā)這款零代碼的動態(tài)網(wǎng)頁工具，花了整整8年時間。不懂代碼的用戶想制作網(wǎng)頁或需在網(wǎng)頁里放入視頻、音頻、動畫，通過VXPLO便可輕松實現(xiàn)。

文 | 周艷清

不懂代碼，想要做出動態(tài)作品就要借助工具。VXPLO互動大師創(chuàng)始人孟智平介紹，國內(nèi)國外做動態(tài)產(chǎn)品的工具，如演示文稿軟件Prezi、動畫開發(fā)工具Mugeda(木疙瘩)、谷歌的HTML5動畫與互動設(shè)計工具Web Designer等等，都是相對小方向的工具。而VXPLO包含以上工具的所有功能，還有很多它們做不到的功能。

VXPLO是一款交互的在線開發(fā)工具。無論是設(shè)計師還是普通網(wǎng)友，想要制作網(wǎng)頁，或需要在網(wǎng)頁里放入視頻、音頻、動畫，無需寫代碼，通過VXPLO的可視化編輯便可以輕松實現(xiàn)。

以往，一位設(shè)計師如果要在自己設(shè)計的網(wǎng)頁上添加交互設(shè)計會非常麻煩，需要一整個團隊去執(zhí)行：大量的交互代碼，多種設(shè)備，還需要自己的作品同時支持IE瀏覽器6/7/8版本，設(shè)計師與程序員之間需要耗費很高的溝通成本。而現(xiàn)在，用戶只要登錄網(wǎng)頁就可以使用VXPLO;通過簡單的3～4個窗口，一個人就可以創(chuàng)造出所有動態(tài)的效果。這讓孟智平認為自己在做一件非常牛的事情。

走不通B2B，化身為免費的基礎(chǔ)性工具

孟智平一直對計算機非常感興趣。進入中山大學(xué)后，他被分配的專業(yè)是大氣科學(xué)，隨后選修了計算機專業(yè)。

畢業(yè)后，他先是去了著名的電訊設(shè)備供應(yīng)商北電網(wǎng)絡(luò)，后來跳槽到瑞典的移動通訊設(shè)備商愛立信。然而北歐舒適的生活無法留住27歲的他，他覺得年輕人需要做點事，最后辭職回國創(chuàng)業(yè)了。

當時他對通信行業(yè)的判斷是：它一定會被互聯(lián)網(wǎng)行業(yè)擠壓。以前打跨國電話一分鐘20多元，現(xiàn)在不到0.2元，這是互聯(lián)網(wǎng)發(fā)展對通信行業(yè)的影響。于是他瞄準了互聯(lián)網(wǎng)行業(yè)。

VXPLO的誕生，源于孟智平2008年創(chuàng)辦“世云多媒體”時的技術(shù)延伸。當時，他在上海做一款視頻交互產(chǎn)品的研發(fā)。用戶點擊視頻里出現(xiàn)的汽車、衣服、背包等便可以看到物品的相關(guān)信息。“我們看一個視頻，會覺得里面的物品很好看，卻發(fā)現(xiàn)得不到直接的信息，例如在哪里可以購買到它，價格是多少等等。”他想把這一塊的商業(yè)價值挖掘出來。

最初，VXPLO的方向是B2B，針對設(shè)計師和企業(yè)，但這條路完全是“血淚史”：與多家視頻網(wǎng)站合作，有些談好了但隔幾天領(lǐng)導(dǎo)換了，有些認為自己也能做好????。B2B無法走通并未讓孟智平放棄對VXPLO的研發(fā)，他堅信VXPLO會是一款非常牛的產(chǎn)品：“零代碼的工具對設(shè)計師來說是非常大的福利。而一個工具好不好，主要看這個東西功能是否強大。VXPLO是全球做交互功能最強大的一款，是純云端工具，支持HTML5和Flash，能實現(xiàn)很好的效果，還可以一鍵好友和朋友圈里面。”

既然面向企業(yè)的路走不通，那就走向用戶。VXPLO開啟了B2C之路，將自身定位為一款免費的基礎(chǔ)性工具。

而這背后是孟智平的自信與堅持。2008年時，孟智平去西藏墨脫徒步，當時條件險峻，路途艱險，隨時可能面臨死亡。他發(fā)現(xiàn)：“接近死亡的體驗，可能使堅持一件事情更容易些，不容易被別的事情打斷，不容易走偏，更愿意集中精神去做一些事情。這些東西和性格相關(guān)。”

目前，VXPLO開放注冊不到20天已有8000多位注冊用戶，每天增加300位注冊用戶，整個平臺每天會產(chǎn)生五六百件作品，留存率高，活躍度高。

研發(fā)歷程長達8年

“別人不覺得我們像國內(nèi)的公司，(覺得我們)有點像外國的團隊，因為(我們)一直悶頭做，不太曝光。”其實，外界對VXPLO的評價也能讓人感受到這個團隊的性格。

VXPLO的CTO在孟智平眼中“不喜歡在外溝通，只寫代碼和玩游戲，技術(shù)非常厲害”。而孟智平自己也沒有對媒體曝光的熱情：“如果(將研發(fā)比作)搞宗教，我就屬于是搞密宗的。”

另外，孟智平一直覺得只有產(chǎn)品完美了才愿意拿出來，因此產(chǎn)品面市前有長達8年的研發(fā)歷程，和抗戰(zhàn)的時間有得一拼。在《創(chuàng)業(yè)邦》的采訪中，孟智平用“根本停不下來”來形容VXPLO互動大師的研發(fā)節(jié)奏。“當時沒想那么復(fù)雜。最初只想做視頻交互的東西，發(fā)現(xiàn)這個領(lǐng)域太小了，就擴展到所有的元素，視頻、音頻、文字、動畫，網(wǎng)頁、圖片等全部交互。”

多年的悶頭研發(fā)之后，孟智平想讓VXPLO發(fā)展快一點，而且他擔(dān)心在資金方面會出現(xiàn)問題，畢竟當前的融資環(huán)境相對好一點。于是孟智平“自我犧牲”，參加諸多活動，開始小規(guī)模推廣。

對于同類產(chǎn)品或者競爭對手，孟智平認為：“國內(nèi)凡是和我們有點像的產(chǎn)品，它們的底層架構(gòu)或者底層的東西都是國外開源的，只有我們是自主研發(fā)的。我們的運營效率、可擴展性、結(jié)構(gòu)等各方面都比他們強，也能做更多的事情。”他以Adobe AE、谷歌Web Designer舉例：功能有限，且需要下載安裝包安裝成本地應(yīng)用程序;另外商業(yè)模式上，VXPLO互動大師是在線的，可分享，可連接社交產(chǎn)品。設(shè)計上，其他產(chǎn)品是想用HTML5去替代Flash，而VXPLO不是以Flash為參考原型，而是以交互的解決方案去做的。

對此，孟智平頗有些自豪：“我們還是挺牛逼的，安裝在網(wǎng)頁上，比安裝在本地的東西還要牛。現(xiàn)階段而言，無論功能、商業(yè)模式、更新、對軟件的理解，包括以后的分享等，類似產(chǎn)品都離我們挺遠。我們的整個架構(gòu)，對產(chǎn)品的理解，都比其他產(chǎn)品更深。”

目前VXPLO互動大師以培育生態(tài)環(huán)境為主。孟智平認為自己原本是做內(nèi)容的形式，在這個過程中把做內(nèi)容的工具一塊做了，而這有利于傳播。“我們可以非常迅速地把一些復(fù)雜的小游戲和交互效果直接實現(xiàn)出來，不需要寫任何代碼。像臉萌需要一個團隊做兩三個月，上百萬的投入，我們可能一個人兩三天就把這些東西做好了。(用戶)還可以在視頻里面點擊視頻對象，這(種效果)是我們公司第一個實現(xiàn)的。”

而涉及到商業(yè)上的前景，VXPLO互動大師將可能成為一個內(nèi)容平臺，允許用戶在上面做、看、玩，未來甚至可能會有點像YouTube和Pinterest。

前，你需要掌握復(fù)雜的軟件才能制作HTML5動畫，現(xiàn)在無需代碼，Hype可以把設(shè)計變成動畫，像設(shè)計幻燈片一樣輕松，趕快讓你的創(chuàng)意動起來！

你會從一個空白的“場景”開始，它可以是一個網(wǎng)頁、一章電子書，或是一個橫幅廣告。

在 App 中添加文字、圖片、多媒體素材以及插畫后，你就可以將它們重新排列組合，也可以讓它們平滑地變成別的形狀。制作過程中的技術(shù)問題，《Hype》都會為你代勞。

而你要做的，就是盡情創(chuàng)作。例如，你可以為網(wǎng)站制作動態(tài)的介紹頁面；也可以設(shè)計一個小測驗，答對問題會有彩紙飄落的效果；你還可以在你用《iBooks Author》設(shè)計的電子童書中添加互動元素。當然，《Hype》能做的還遠遠不止這些。下方為你羅列具體功能，看完你會驚訝，竟如此強大~

1、快速動畫設(shè)計：

? 簡單易用的、基于關(guān)鍵幀的動畫系統(tǒng)

? 記錄模式可監(jiān)測您的每次移動，從而根據(jù)需要自動創(chuàng)建關(guān)鍵幀

? 創(chuàng)作貝塞爾路徑的自然運動曲線

? 輕松在矢量形狀之間變換形狀（即便有不同數(shù)量的路徑點也能做到）

? 為組織和工作流制作場景

? 利用多個同時時間線的功能來運行動畫

2、添加互動性：

? 操作句柄啟動和時間線控制，場景切換，或是運行自定義的 JavaScript

? 可視化地構(gòu)建操作句柄來響應(yīng)輕觸、點按和動畫事件

3、創(chuàng)作絕妙的內(nèi)容：

? 基于 WebKit 的“所見即所得”式場景編輯

? 智能導(dǎo)引、排列和縮放工具

? 輕松集成視頻和音頻，得到出色的多媒體文稿

? 最前衛(wèi)的效果：模糊、圖像濾鏡、背景幕濾鏡、縮放、傾斜、倒影和 3D 變換

? 添加 Google 字體或使用自己的 Web 字體

? 設(shè)置輔助功能備用文本、角色和標簽頁索引

? 支持 Retina 分辨率的圖像

4、完美契合移動設(shè)備：

? Hype 的 HTML5 輸出可在移動設(shè)備上高效運行

? 具有可調(diào)布局系統(tǒng)，可縮放內(nèi)容以適合屏幕大小

? 輕松添加掃動、觸摸和翻頁操作

? 將拖動事件綁定到時間線位置，實現(xiàn)豐富的交互效果

? 在 iPhone 和 iPad 上，利用免費的 Hype Reflect 伙伴 iOS 應(yīng)用程序預(yù)覽您的項目

? Hype Reflect 的鏡像模式可在您編輯的時候?qū)崟r顯示出編輯的效果

5、可編碼進行擴展：

? 編輯任何元素的 InnerHTML

? 集成的 JavaScript 編輯器用于編寫由用戶操作觸發(fā)的功能

? 使用 API 控制場景、時間線以及更多內(nèi)容

6、導(dǎo)出為 HTML：

? 輸出最新的 HTML5、CSS3 樣式和 JavaScript

? 內(nèi)容可在包括從 IE 6 到最新版的 Chrome 在內(nèi)的所有瀏覽器上運行

? 自包含目錄包括您文稿的所有資源和代碼

? 通過復(fù)制和粘貼 HTML 的 3 行添加到現(xiàn)有頁面中

7、特別適合廣告：

? 最小文稿僅 24 KB（自托管、經(jīng)壓縮）或在使用官方 CDN 時僅為 1.5 KB

? 導(dǎo)出腳本插件擴展 Hype 以支持常見的廣告系統(tǒng)

? 高級導(dǎo)出對要交付的產(chǎn)品進行微調(diào)

8、Hype 還可以導(dǎo)出：

? iBooks Author 小組件

? 視頻

? 動畫 GIF 和 PNG

HTML5動畫很難制作嗎？在以前也許，但是有了這款《Hype》，無需代碼，就可以把設(shè)計變成動畫，讓你的創(chuàng)意動起來。