VXPLO：網(wǎng)頁交互設(shè)計(jì)的大升級

當(dāng)鼠標(biāo)點(diǎn)到視頻中出現(xiàn)的金發(fā)女郎身上，她的裙子與包上會顯示其價格及購買場所——這款產(chǎn)品可以形成諸如此類的各種網(wǎng)頁設(shè)計(jì)交互效果。

文 | 夏宏

在以往，一位設(shè)計(jì)師如果要在自己設(shè)計(jì)的網(wǎng)頁上添加交互設(shè)計(jì)會非常麻煩：大量的交互代碼，多種設(shè)備，還需要自己的作品同時支持IE瀏覽器6/7/8版本，設(shè)計(jì)師與程序員之間需要耗費(fèi)很高的溝通成本，并且，最終呈現(xiàn)出來的效果未必能完全實(shí)現(xiàn)設(shè)計(jì)師的構(gòu)想。

此前有人用Flash制作動畫與交互設(shè)計(jì)，但它對HTML5的支持不夠理想，且不支持智能手機(jī)、平板電腦，因此這種方式逐漸被淘汰;Google與Mozilla也都發(fā)布過新的工具。業(yè)內(nèi)人士稱這些工具各有其長板與短板，功能點(diǎn)不一，一類主要是為網(wǎng)站做Banner(橫幅廣告)，通常只是簡單模仿了Flash的一些功能，還有一類想將此做得更具互動性，場景制作更大，但多數(shù)都只是離線工具。

VXPLO希望解決類似問題，其創(chuàng)始人孟智平將VXPLO稱為互聯(lián)網(wǎng)上出現(xiàn)的第一款基于云計(jì)算方式的交互式網(wǎng)頁設(shè)計(jì)工具，同時它也是一個互動作品分享平臺。作為一個在線工具，無論是設(shè)計(jì)師還是普通網(wǎng)友，想要制作網(wǎng)頁，或需要在網(wǎng)頁里放入視頻、音頻、動畫，無需寫代碼，通過可視化編輯便可以輕松實(shí)現(xiàn)。

一款純工具的誕生

VXPLO是如何幫助用戶實(shí)現(xiàn)這一切的?

孟智平介紹，首先它基于云的架構(gòu)，用戶的所有操作都在瀏覽器中進(jìn)行，其完成的作品支持HTML5、CSS3、Flash，一個作品能夠在所有主流瀏覽器中呈現(xiàn)。此外，VXPLO為用戶提供了大量的設(shè)計(jì)模板，用戶可以根據(jù)這些模板進(jìn)行可視化設(shè)計(jì)而無需寫代碼。除此之外，它還提供了二維碼與三維碼(已在美國獲得專利)掃描功能，使之生成的網(wǎng)頁能與瀏覽者產(chǎn)生互動關(guān)系等。

而通常情況下，一位設(shè)計(jì)師在一周內(nèi)便能夠比較熟練地使用這個工具，不必再與程序員為做一個簡單的交互設(shè)計(jì)而大量溝通。

VXPLO在深圳的辦公室不足一百平米。曾在愛立信等通信行業(yè)任職過的創(chuàng)始人孟智平對《創(chuàng)業(yè)邦》說，以往做一個相對復(fù)雜的交互案例是一個不小的工程。它需要為此匯集幾撥人，設(shè)計(jì)師，寫交互代碼的JS前端工程師，并且寫完代碼還要統(tǒng)計(jì)代碼、投放代碼等?，F(xiàn)在，一個人就可以搞定這一切。

孟智平帶領(lǐng)團(tuán)隊(duì)開發(fā)VXPLO的想法很明晰：“工具的使用驅(qū)動力就是幫助用戶提高效率，節(jié)約成本投入，使用起來便捷;以往自己做不了的東西，用這個工具可以實(shí)現(xiàn)。”

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

2009年這款技術(shù)產(chǎn)品研發(fā)完畢，孟智平發(fā)現(xiàn)這個B2B的生意要與國內(nèi)的電商公司、視頻網(wǎng)站一家一家談合作是一件挺費(fèi)周折的事。為此，他將原有的技術(shù)延伸到VXPLO這款產(chǎn)品里，把視頻、音頻、圖片、文字等都集成到一起，使之變身為一個交互式網(wǎng)頁設(shè)計(jì)工具。孟智平從去年開始正式研發(fā)這款產(chǎn)品，面向C端用戶，但還沒有在市場上進(jìn)行大規(guī)模的推廣。

盡管VXPLO具有較強(qiáng)的編輯功能，可以對不同介質(zhì)的媒體進(jìn)行交互設(shè)計(jì)，但是當(dāng)一個集合了視頻、音頻、圖片等各種元素的作品生成后，其文件的大小通常能限制在100K左右，這使得它的加載速度非?？?，不會成為用戶瀏覽它的一個障礙。“它不像我們?nèi)タ匆粋€用Flash做出來的東西，從1%加載到100%需要等上一分鐘時間。”

通過VXPLO，用戶還可以實(shí)現(xiàn)一個作品的多種交互方式，例如多點(diǎn)觸摸，支持超大屏或超大拼接屏;多點(diǎn)通信，通過iPad或iPhone等遙控其它大屏幕;掃碼交互、視頻交互、動態(tài)網(wǎng)頁等。

VXPLO除了具有工具的屬性外，還希望成為一個互動作品分享平臺。孟智平介紹，用戶可以通過VXPLO的云存儲空間生成URL向朋友分享，也可以將一行JS代碼嵌入到一些站點(diǎn)，如網(wǎng)站、博客、空間等，此外，還可以把作品發(fā)送給站內(nèi)其他用戶。

不著急變現(xiàn)

蘇寧、淘寶、天貓都曾上線視頻購物平臺，但在孟智平看來其形式比較守舊：“無非就是拍一段視頻，視頻下面放一段對商品介紹性的信息。最終，它們上線沒幾個月就下線了。”有人對他建議，VXPLO的底層技術(shù)完全可以支撐起一個電商細(xì)分領(lǐng)域里的視頻購物網(wǎng)站，不如自己去做一個這樣的網(wǎng)站。但孟智平說自己“比較煩這事兒”。他還是想把VXPLO做成一個平臺，成為各類需要交互設(shè)計(jì)的用戶的技術(shù)提供商與服務(wù)商。

就VXPLO的應(yīng)用而言，它的視頻交互功能不僅可以服務(wù)于電商領(lǐng)域，同時也可以應(yīng)用于視頻網(wǎng)站，譬如一些電視節(jié)目在視頻網(wǎng)站上需要二次傳播和二次營銷，運(yùn)用VXPLO的交互設(shè)計(jì)相當(dāng)于對節(jié)目再次進(jìn)行包裝和策劃。

此外孟智平說，利用VXPLO也完全可以制作出一款被他稱之為“智能媒體”的新型媒體。“以往一個網(wǎng)頁上的各種元素都是相對獨(dú)立、不交互的?，F(xiàn)在，你可以讓圖片、視頻、聲音等東西都具有交互性，通過這個工具的控件加入各種事件。”

他為此在辦公室里打開了用戶上傳到Y(jié)outube的一段視頻。當(dāng)這個視頻播放到一個時間點(diǎn)，窗口便彈出了一段用戶設(shè)計(jì)的動畫，并且讓整個網(wǎng)頁都運(yùn)動了起來。他打開的另一段視頻是，一個時髦的金發(fā)女郎穿著一套粉色的職業(yè)裝，拎著一個包走在大街上，當(dāng)鼠標(biāo)點(diǎn)到她的裙子與包上的時候，屏幕里便會分別顯示其價格及購買場所等相關(guān)信息。

孟智平并不急著讓VXPLO去變現(xiàn)：“我們可擴(kuò)展的商業(yè)模式很多。”他把業(yè)務(wù)重點(diǎn)放在了B2C上：一部分是免費(fèi)用戶，另一部分是付費(fèi)用戶;后者每月收費(fèi)30元與90元不等，分別獲得不同的存儲空間和站外流量。“在這一塊，我們主要靠用戶為站外流量付費(fèi)而盈利。”孟智平的理由是，現(xiàn)在流量很貴。“假如我們把用5毛錢買進(jìn)來的流量以10塊錢的價格賣給用戶，他們可能不在意，但在這一塊我們?nèi)绻毁嶅X的話，對于平臺來講是一個巨大的壓力。”