當鼠標點(diǎn)到視頻中出現的金發(fā)女郎身上,她的裙子與包上會(huì )顯示其價(jià)格及購買(mǎi)場(chǎng)所——這款產(chǎn)品可以形成諸如此類(lèi)的各種網(wǎng)頁(yè)設計交互效果。
文 | 夏宏
在以往,一位設計師如果要在自己設計的網(wǎng)頁(yè)上添加交互設計會(huì )非常麻煩:大量的交互代碼,多種設備,還需要自己的作品同時(shí)支持IE瀏覽器6/7/8版本,設計師與程序員之間需要耗費很高的溝通成本,并且,最終呈現出來(lái)的效果未必能完全實(shí)現設計師的構想。
此前有人用Flash制作動(dòng)畫(huà)與交互設計,但它對HTML5的支持不夠理想,且不支持智能手機、平板電腦,因此這種方式逐漸被淘汰;Google與Mozilla也都發(fā)布過(guò)新的工具。業(yè)內人士稱(chēng)這些工具各有其長(cháng)板與短板,功能點(diǎn)不一,一類(lèi)主要是為網(wǎng)站做Banner(橫幅廣告),通常只是簡(jiǎn)單模仿了Flash的一些功能,還有一類(lèi)想將此做得更具互動(dòng)性,場(chǎng)景制作更大,但多數都只是離線(xiàn)工具。
VXPLO希望解決類(lèi)似問(wèn)題,其創(chuàng )始人孟智平將VXPLO稱(chēng)為互聯(lián)網(wǎng)上出現的第一款基于云計算方式的交互式網(wǎng)頁(yè)設計工具,同時(shí)它也是一個(gè)互動(dòng)作品分享平臺。作為一個(gè)在線(xiàn)工具,無(wú)論是設計師還是普通網(wǎng)友,想要制作網(wǎng)頁(yè),或需要在網(wǎng)頁(yè)里放入視頻、音頻、動(dòng)畫(huà),無(wú)需寫(xiě)代碼,通過(guò)可視化編輯便可以輕松實(shí)現。
一款純工具的誕生
VXPLO是如何幫助用戶(hù)實(shí)現這一切的?
孟智平介紹,首先它基于云的架構,用戶(hù)的所有操作都在瀏覽器中進(jìn)行,其完成的作品支持HTML5、CSS3、Flash,一個(gè)作品能夠在所有主流瀏覽器中呈現。此外,VXPLO為用戶(hù)提供了大量的設計模板,用戶(hù)可以根據這些模板進(jìn)行可視化設計而無(wú)需寫(xiě)代碼。除此之外,它還提供了二維碼與三維碼(已在美國獲得專(zhuān)利)掃描功能,使之生成的網(wǎng)頁(yè)能與瀏覽者產(chǎn)生互動(dòng)關(guān)系等。
而通常情況下,一位設計師在一周內便能夠比較熟練地使用這個(gè)工具,不必再與程序員為做一個(gè)簡(jiǎn)單的交互設計而大量溝通。
VXPLO在深圳的辦公室不足一百平米。曾在愛(ài)立信等通信行業(yè)任職過(guò)的創(chuàng )始人孟智平對《創(chuàng )業(yè)邦》說(shuō),以往做一個(gè)相對復雜的交互案例是一個(gè)不小的工程。它需要為此匯集幾撥人,設計師,寫(xiě)交互代碼的JS前端工程師,并且寫(xiě)完代碼還要統計代碼、投放代碼等?,F在,一個(gè)人就可以搞定這一切。
孟智平帶領(lǐng)團隊開(kāi)發(fā)VXPLO的想法很明晰:“工具的使用驅動(dòng)力就是幫助用戶(hù)提高效率,節約成本投入,使用起來(lái)便捷;以往自己做不了的東西,用這個(gè)工具可以實(shí)現。”
VXPLO的誕生,源于孟智平2008年創(chuàng )辦“世云多媒體”時(shí)的技術(shù)延伸。當時(shí),他在上海做一款視頻交互產(chǎn)品的研發(fā)。用戶(hù)點(diǎn)擊視頻里出現的汽車(chē)、衣服、背包等便可以顯示物品的相關(guān)信息。“我們看一個(gè)視頻,會(huì )覺(jué)得里面的物品很好看,卻發(fā)現得不到直接的信息,例如在哪里可以購買(mǎi)到它,價(jià)格是多少,等等。”他想把這一塊的商業(yè)價(jià)值挖掘出來(lái)。
2009年這款技術(shù)產(chǎn)品研發(fā)完畢,孟智平發(fā)現這個(gè)B2B的生意要與國內的電商公司、視頻網(wǎng)站一家一家談合作是一件挺費周折的事。為此,他將原有的技術(shù)延伸到VXPLO這款產(chǎn)品里,把視頻、音頻、圖片、文字等都集成到一起,使之變身為一個(gè)交互式網(wǎng)頁(yè)設計工具。孟智平從去年開(kāi)始正式研發(fā)這款產(chǎn)品,面向C端用戶(hù),但還沒(méi)有在市場(chǎng)上進(jìn)行大規模的推廣。
盡管VXPLO具有較強的編輯功能,可以對不同介質(zhì)的媒體進(jìn)行交互設計,但是當一個(gè)集合了視頻、音頻、圖片等各種元素的作品生成后,其文件的大小通常能限制在100K左右,這使得它的加載速度非???,不會(huì )成為用戶(hù)瀏覽它的一個(gè)障礙。“它不像我們去看一個(gè)用Flash做出來(lái)的東西,從1%加載到100%需要等上一分鐘時(shí)間。”
通過(guò)VXPLO,用戶(hù)還可以實(shí)現一個(gè)作品的多種交互方式,例如多點(diǎn)觸摸,支持超大屏或超大拼接屏;多點(diǎn)通信,通過(guò)iPad或iPhone等遙控其它大屏幕;掃碼交互、視頻交互、動(dòng)態(tài)網(wǎng)頁(yè)等。
VXPLO除了具有工具的屬性外,還希望成為一個(gè)互動(dòng)作品分享平臺。孟智平介紹,用戶(hù)可以通過(guò)VXPLO的云存儲空間生成URL向朋友分享,也可以將一行JS代碼嵌入到一些站點(diǎn),如網(wǎng)站、博客、空間等,此外,還可以把作品發(fā)送給站內其他用戶(hù)。
不著(zhù)急變現
蘇寧、淘寶、天貓都曾上線(xiàn)視頻購物平臺,但在孟智平看來(lái)其形式比較守舊:“無(wú)非就是拍一段視頻,視頻下面放一段對商品介紹性的信息。最終,它們上線(xiàn)沒(méi)幾個(gè)月就下線(xiàn)了。”有人對他建議,VXPLO的底層技術(shù)完全可以支撐起一個(gè)電商細分領(lǐng)域里的視頻購物網(wǎng)站,不如自己去做一個(gè)這樣的網(wǎng)站。但孟智平說(shuō)自己“比較煩這事兒”。他還是想把VXPLO做成一個(gè)平臺,成為各類(lèi)需要交互設計的用戶(hù)的技術(shù)提供商與服務(wù)商。
就VXPLO的應用而言,它的視頻交互功能不僅可以服務(wù)于電商領(lǐng)域,同時(shí)也可以應用于視頻網(wǎng)站,譬如一些電視節目在視頻網(wǎng)站上需要二次傳播和二次營(yíng)銷(xiāo),運用VXPLO的交互設計相當于對節目再次進(jìn)行包裝和策劃。
此外孟智平說(shuō),利用VXPLO也完全可以制作出一款被他稱(chēng)之為“智能媒體”的新型媒體。“以往一個(gè)網(wǎng)頁(yè)上的各種元素都是相對獨立、不交互的?,F在,你可以讓圖片、視頻、聲音等東西都具有交互性,通過(guò)這個(gè)工具的控件加入各種事件。”
他為此在辦公室里打開(kāi)了用戶(hù)上傳到Youtube的一段視頻。當這個(gè)視頻播放到一個(gè)時(shí)間點(diǎn),窗口便彈出了一段用戶(hù)設計的動(dòng)畫(huà),并且讓整個(gè)網(wǎng)頁(yè)都運動(dòng)了起來(lái)。他打開(kāi)的另一段視頻是,一個(gè)時(shí)髦的金發(fā)女郎穿著(zhù)一套粉色的職業(yè)裝,拎著(zhù)一個(gè)包走在大街上,當鼠標點(diǎn)到她的裙子與包上的時(shí)候,屏幕里便會(huì )分別顯示其價(jià)格及購買(mǎi)場(chǎng)所等相關(guān)信息。
孟智平并不急著(zhù)讓VXPLO去變現:“我們可擴展的商業(yè)模式很多。”他把業(yè)務(wù)重點(diǎn)放在了B2C上:一部分是免費用戶(hù),另一部分是付費用戶(hù);后者每月收費30元與90元不等,分別獲得不同的存儲空間和站外流量。“在這一塊,我們主要靠用戶(hù)為站外流量付費而盈利。”孟智平的理由是,現在流量很貴。“假如我們把用5毛錢(qián)買(mǎi)進(jìn)來(lái)的流量以10塊錢(qián)的價(jià)格賣(mài)給用戶(hù),他們可能不在意,但在這一塊我們如果不賺錢(qián)的話(huà),對于平臺來(lái)講是一個(gè)巨大的壓力。”
相關(guān)閱讀