交互式服裝定制平臺(tái)移動(dòng)端設(shè)計(jì)①

白瑩瑩,毋 濤

(西安工程大學(xué) 計(jì)算機(jī)科學(xué)學(xué)院,西安 710048)

隨著“互聯(lián)網(wǎng)+”的快速發(fā)展,國(guó)內(nèi)外許多服裝定制電子商務(wù)網(wǎng)站應(yīng)運(yùn)而生,但仍然以宣傳定制服裝為主.目前網(wǎng)絡(luò)的服裝定制展示模式絕大部分停留在服裝圖片展示與文字描述,服裝的尺寸也只是套用簡(jiǎn)單的算法或者消費(fèi)者自己提供[1].個(gè)別品牌廠商通過(guò)入住O2O商城或B2C商城實(shí)現(xiàn)客戶線上下單線下定制生產(chǎn)的模式,還有通過(guò)服裝定制管理系統(tǒng)[2]進(jìn)行線上定制,但是只能夠挑選款式,大小,顏色,可定制化的程度不高,本質(zhì)上仍然是通過(guò)互聯(lián)網(wǎng)宣傳服裝定制的模式,沒(méi)有實(shí)現(xiàn)用戶服裝的個(gè)性化需求與互聯(lián)網(wǎng)電子商務(wù)模式的深度融合.

同時(shí),移動(dòng)互聯(lián)也已經(jīng)隨著智能手機(jī)的普及,極大的促進(jìn)了人們的隨時(shí)隨地對(duì)信息資訊獲取和交流,微信以及APP的營(yíng)銷(xiāo)模式,也逐步跟隨著移動(dòng)互聯(lián)的發(fā)展而不斷增強(qiáng),手機(jī)營(yíng)銷(xiāo)必將成為今后一個(gè)重要的互聯(lián)網(wǎng)+的服裝銷(xiāo)售途徑.那么,面對(duì)這種新的模式,服裝企業(yè)怎樣才能“接得住”蓬勃的個(gè)性化需求?

首先是要調(diào)研總結(jié)出消費(fèi)者的感受,盡最大限度地向消費(fèi)者體現(xiàn)出方便快捷的定制模式.站在消費(fèi)者的角度考慮,將產(chǎn)品庫(kù)中的所有產(chǎn)品類(lèi)別均體現(xiàn)在一個(gè)可視化界面上,而且將靈活分類(lèi)以及快速的搜索手段提供給消費(fèi)者,令他們以最小的成本做出決定.其次,以銷(xiāo)定產(chǎn).在后端與供應(yīng)商銜接時(shí),系統(tǒng)把信息發(fā)給供應(yīng)商,供應(yīng)商接到訂單信息后,采用相應(yīng)的原料即可生產(chǎn).這樣既可以充分利用這些資源,同時(shí)還可以通過(guò)競(jìng)爭(zhēng)來(lái)控制成本.再次,把設(shè)計(jì)權(quán)交給消費(fèi)者.

1 基本理論與相關(guān)技術(shù)

1.1 WeX5介紹

WeX5是開(kāi)源并且免費(fèi)使用的APP開(kāi)發(fā)工具,一直堅(jiān)持采用H5+CSS3+JS標(biāo)準(zhǔn)技術(shù),使用AMD規(guī)范的requirejs、bootstrap、jquery等技術(shù).其中上百個(gè)組件框架,全部開(kāi)放,開(kāi)發(fā)者不但能夠自定義組件,并且可以集成第三方組件.采用MVC設(shè)計(jì)模式,數(shù)據(jù)和視圖分離,頁(yè)面描述和代碼邏輯分離,支持瀏覽器調(diào)試、真機(jī)調(diào)試、原生調(diào)試等多種調(diào)試模式,開(kāi)發(fā)者可掌握每一行代碼.能夠提高APP的開(kāi)發(fā)效率.其在Eclipse基礎(chǔ)上封裝了很多東西,提供豐富組件體系,方便快捷,是一款前端開(kāi)發(fā)工具,支持多種后臺(tái)開(kāi)發(fā)語(yǔ)言.

WeX5的框架如圖1所示.

圖1 WeX5 框架

目前,WeX5支持的前端有:

1)移動(dòng)APP(蘋(píng)果APP和安卓APP);

2)微信應(yīng)用(包括公眾號(hào)、服務(wù)號(hào)和企業(yè)應(yīng)用號(hào));

3)PC 瀏覽器;

4)其它輕應(yīng)用(如百度直達(dá)號(hào)).

1.2 WebGL理論

WebGL[3](全寫(xiě) Web Graphics Library)是一種 3D繪圖標(biāo)準(zhǔn),這種繪圖技術(shù)標(biāo)準(zhǔn)允許把JavaScript和OpenGL ES 2.0 結(jié)合在一起,通過(guò)增加 OpenGL ES 2.0的一個(gè) JavaScript綁定,WebGL 可以為 HTML5 Canvas提供硬件3D加速渲染,這樣Web開(kāi)發(fā)人員便能借助系統(tǒng)顯卡更流暢地在瀏覽器中展示3D場(chǎng)景和模型了,還可以建立復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺(jué)化.

WebGL完美地解決了現(xiàn)有的Web交互式三維動(dòng)畫(huà)的兩個(gè)問(wèn)題:

(1)通過(guò)HTML腳本本身實(shí)現(xiàn)Web交互式三維動(dòng)畫(huà)的制作,無(wú)需任何瀏覽器插件支持;

(2)利用底層的圖形硬件加速功能進(jìn)行的圖形渲染,是通過(guò)統(tǒng)一的、標(biāo)準(zhǔn)的、跨平臺(tái)的OpenGL接口實(shí)現(xiàn)的.

1.3 Three.js概述

Three.js是JavaScript編寫(xiě)的WebGL第三方庫(kù),是一款運(yùn)行在瀏覽器中的 3D引擎,可以用它創(chuàng)建各種三維場(chǎng)景,包括了攝影機(jī)、光影、材質(zhì)等各種對(duì)象.可以在它的主頁(yè)上看到許多精彩的演示.它封裝了底層的圖形接口,使得程序員能夠在無(wú)需掌握繁冗的圖形學(xué)知識(shí)的情況下,也能用簡(jiǎn)單的代碼實(shí)現(xiàn)三維場(chǎng)景的渲染.

Three.js的6個(gè)基本步驟:

(1)設(shè)置 three.js渲染器;

(2)設(shè)置攝像機(jī) camera;

(3)設(shè)置場(chǎng)景 scene;

(4)設(shè)置光源 light;

(5)設(shè)置物體 object;

(6)書(shū)寫(xiě)主函數(shù)執(zhí)行以上5步.

1.4 虛擬試衣技術(shù)

3D虛擬試衣技術(shù)[4]旨在為品牌服裝、服飾、飾品添加高端3D虛擬購(gòu)物動(dòng)效,提升用戶感官體驗(yàn)和交互體驗(yàn).該技術(shù)目前所實(shí)現(xiàn)的系統(tǒng)功能有:

(1)純Web/HTML5版本,無(wú)需用戶安裝任何插件,跨平臺(tái)跨設(shè)備終端,只要是支持WebGL規(guī)范的現(xiàn)代瀏覽器就可以運(yùn)行;

(2)360°瀏覽模特和衣服,支持交互式縮放、旋轉(zhuǎn)、平移;

(3)可修改模特參數(shù),以匹配自己的身材體型;

(4)可選擇不同的衣服進(jìn)行試穿;

(5)可選擇模特的膚色;

(6)可選擇環(huán)境參數(shù),如光照顏色、是否有風(fēng)、是否需要聚光效果、舞臺(tái)是否需要自動(dòng)旋轉(zhuǎn)等.

2 系統(tǒng)設(shè)計(jì)

2.1 開(kāi)發(fā)環(huán)境與工具

(1)開(kāi)發(fā)語(yǔ)言:Java(JDK1.7).

(2)開(kāi)發(fā)平臺(tái):VMware Workstation.

(3)開(kāi)發(fā)工具:WeX5.

(4)操作系統(tǒng):Microsoft Windows 8.1.

(5)數(shù)據(jù)庫(kù)管理工具:Navicat for MySQL.

(6)Web 服務(wù)器:Tomcat 7.0.

2.2 功能設(shè)計(jì)

要將傳統(tǒng)的線下定制遷移到互聯(lián)網(wǎng)的線上定制,那么這種模式就必須對(duì)客戶要有吸引力.簡(jiǎn)潔美觀的購(gòu)物APP和便捷的服裝定制流程,以及可交互性強(qiáng)的定制體驗(yàn)都是必不可少的.消費(fèi)者的用戶體驗(yàn)直接關(guān)系到消費(fèi)者是否愿意下單,并且要讓消費(fèi)者越來(lái)越傾向于接受并且享受線上定制服務(wù)需要的時(shí)間,才能使客戶體驗(yàn)的滿意度得到提高[5].

服裝定制平臺(tái)移動(dòng)端就是為了方便消費(fèi)者進(jìn)行線上定制,在互聯(lián)網(wǎng)+模式快速發(fā)展的今天,人們更趨向于移動(dòng)端的購(gòu)物.本文設(shè)計(jì)開(kāi)發(fā)的服裝定制移動(dòng)端主要包括服裝展示、服裝定制、企業(yè)中心以及個(gè)人中心4大功能模塊.移動(dòng)端的功能模塊如圖2所示.

圖2 服裝定制平臺(tái)移動(dòng)端功能模塊設(shè)計(jì)圖

(1)首頁(yè)展示.從服裝款式、面料、工藝以及行業(yè)資訊四個(gè)發(fā)個(gè)面出發(fā),向用戶全方位,更形象地展示了服裝定制的魅力所在.

(2)服裝定制.移動(dòng)端最重要的模塊,分為品牌定制和個(gè)性定制兩個(gè)等級(jí),品牌定制的定位是高端客戶,由國(guó)際或國(guó)內(nèi)知名的服裝定制企業(yè)進(jìn)行設(shè)計(jì)加工;個(gè)性定制則是消費(fèi)者根據(jù)自己的需求和服裝款式選擇成衣定制[6].

(3)企業(yè)中心.主要為了拓展服裝定制企業(yè),分為企業(yè)展示、企業(yè)入駐以及量體師入駐三大模塊.通過(guò)展示已入駐企業(yè)的品牌數(shù)量和影響力來(lái)吸引新的企業(yè)加入,由企業(yè)人員提出申請(qǐng),服裝定制平臺(tái)的管理人員進(jìn)行雙方的溝通了解,在達(dá)到企業(yè)入駐的相關(guān)標(biāo)準(zhǔn)后,就可以成功入駐平臺(tái)為消費(fèi)者提供良好的服務(wù).

(4)個(gè)人中心.為了存儲(chǔ)客戶在服裝高級(jí)定制平臺(tái)的個(gè)人信息.比如個(gè)人的基本信息和量體數(shù)據(jù)、已提交的服裝定制訂單信息和狀態(tài),收藏的服裝或品牌信息,以及購(gòu)物車(chē)中的服裝產(chǎn)品,還有獲得的優(yōu)惠券信息.

2.3 數(shù)據(jù)庫(kù)設(shè)計(jì)

本文的移動(dòng)端與整個(gè)服裝定制平臺(tái)的企業(yè)端、后臺(tái)管理端共用一套數(shù)據(jù)庫(kù),因此進(jìn)行數(shù)據(jù)庫(kù)設(shè)計(jì)時(shí)包含的數(shù)據(jù)表眾多,表之間的關(guān)系較為復(fù)雜,于是針對(duì)移動(dòng)端,本文主要從客戶、訂單以及服裝產(chǎn)品3個(gè)方面對(duì)數(shù)據(jù)庫(kù)的表關(guān)系進(jìn)行展示.

(1)客戶信息關(guān)系表

客戶信息表是整個(gè)客戶信息的基礎(chǔ)和紐帶,它記載了客戶的基本信息以及相關(guān)信息的外鍵,可以詳細(xì)展示該客戶的信息.它們之間的數(shù)據(jù)表關(guān)系如圖3所示.

圖3 客戶信息關(guān)系

圖3中客戶信息表(Cu_customer)是整個(gè)客戶信息的基礎(chǔ)和紐帶,它記載了客戶的基本信息以及相關(guān)信息的外鍵,可以詳細(xì)展示該客戶的信息.它的數(shù)據(jù)表結(jié)構(gòu)的主要字段設(shè)計(jì)如附錄表A1所示.

(2)客戶服裝訂單關(guān)系表

客戶在提交訂單后,該訂單中可能會(huì)包含多個(gè)產(chǎn)品,因此需要記載訂單的信息,并且由訂單詳情表記載服裝產(chǎn)品的面料信息、服裝板型[7]、服裝設(shè)計(jì)的定制數(shù)據(jù)以及所屬的訂單.它們之間的數(shù)據(jù)表關(guān)系如圖4所示.

圖4 服裝產(chǎn)品信息關(guān)系圖

其中訂單基本信息表和訂單詳情信息表是整個(gè)服裝訂單的基礎(chǔ),通過(guò)訂單數(shù)據(jù)企業(yè)才能設(shè)計(jì)完成訂單的生產(chǎn)過(guò)程.它的主要數(shù)據(jù)表結(jié)構(gòu)設(shè)計(jì)如附錄表A2和表A3所示.

(3)服裝產(chǎn)品信息關(guān)系表

服裝產(chǎn)品信息是服裝高級(jí)定制平臺(tái)要展示的服裝產(chǎn)品數(shù)據(jù),主要包括服裝產(chǎn)品的基本信息、產(chǎn)品分類(lèi)、商品編號(hào)、商品規(guī)格、服裝面料和服裝板型等信息.通過(guò)訂單詳情中記錄的產(chǎn)品編號(hào)找到相應(yīng)的產(chǎn)品,企業(yè)設(shè)計(jì)師根據(jù)服裝產(chǎn)品的信息數(shù)據(jù)設(shè)計(jì)和生產(chǎn)服裝產(chǎn)品們之間的數(shù)據(jù)表關(guān)系如附錄圖A1所示.

附錄圖A1中服裝產(chǎn)品基本信息表是整個(gè)服裝產(chǎn)品信息的基礎(chǔ),它記載了產(chǎn)品的基本信息以及相關(guān)信息的外鍵,可以詳細(xì)展示該產(chǎn)品的信息.它的數(shù)據(jù)表結(jié)構(gòu)設(shè)計(jì)如附錄表A4所示.

3 功能實(shí)現(xiàn)

服裝定制移動(dòng)端是消費(fèi)者在線服裝定制的重要方式,因此系統(tǒng)不僅要有完善的服裝定制功能,而且還要有美觀和便捷的界面,增強(qiáng)用戶與系統(tǒng)的交互性,以提高用戶的購(gòu)物體驗(yàn).

系統(tǒng)主要分為首頁(yè)、專(zhuān)題、預(yù)約量體服務(wù)、服務(wù)、購(gòu)物車(chē)、個(gè)人中心6部分,首先消費(fèi)者在移動(dòng)端可以直觀地看到服裝定制的效果展示圖以及相關(guān)的服裝最新資訊,其次可以根據(jù)自身需求進(jìn)行量體預(yù)約和服裝定制,在選擇定制時(shí)確定要定制的服裝類(lèi)型,例如西裝、西褲、襯衣、夾克、大衣、休閑褲等,在條件允許的情況下還可以選擇較為高端的品牌定制.除此之外,消費(fèi)者可以根據(jù)自己的要求對(duì)服裝進(jìn)行個(gè)性化定制,不同的服裝類(lèi)型提供的可供定制的項(xiàng)目各不相同,例如西裝的定制項(xiàng)目包括板型、領(lǐng)型、杈型、紐扣、面料等,在選擇完成定制項(xiàng)目后提交訂單,完善訂單信息付款后就完成了整個(gè)在線服裝定制流程.下面主要展示了移動(dòng)端的首頁(yè)如圖5和在線服裝定制頁(yè)面如圖6.

圖5 移動(dòng)端首頁(yè)

在此移動(dòng)端中,用戶可以在“我的”這個(gè)菜單中管理自己個(gè)人的信息,如圖7所示,包括我的訂單、我的預(yù)約、我的錢(qián)包、我的地址、我的專(zhuān)員、我的收藏、我的消息、投訴建議以及我的身份.

4 總結(jié)與思考

首先,運(yùn)用可交互式的線上服裝定制系統(tǒng),不僅解決了消費(fèi)者線下實(shí)體店定制的繁瑣,而且讓消費(fèi)者在虛擬世界中具有真實(shí)體驗(yàn)的定制過(guò)程,減少了設(shè)計(jì)、打樣周期.本文所研究的服裝定制平臺(tái)移動(dòng)端,利用WeX5開(kāi)發(fā)工具,結(jié)合3D展示技術(shù),實(shí)現(xiàn)了系統(tǒng)的4大功能模塊,但尚未有成熟的經(jīng)驗(yàn)可借鑒,還有待深入學(xué)習(xí)與改進(jìn),例如在服裝定制頁(yè)面中的三維展示效果有點(diǎn)單調(diào),沒(méi)有加入相應(yīng)的服裝穿著場(chǎng)景進(jìn)行襯托,這樣會(huì)影響消費(fèi)者的定制體驗(yàn)與選擇.其次,移動(dòng)端包括安卓開(kāi)發(fā)和IOS開(kāi)發(fā),本文只涉及到基于WeX5的安卓移動(dòng)端開(kāi)發(fā),并未有IOS開(kāi)發(fā),兩者之間的開(kāi)發(fā)還是有很大區(qū)別的,兩者可以說(shuō)平行發(fā)展,但又相輔相成.

圖6 服裝在線定制頁(yè)面

圖7 用戶個(gè)人中心

(1)面對(duì)的使用人群

iOS系統(tǒng)是面向中高層收入群體,安卓系統(tǒng)的較為平民化,主要面向的是中低的收入群體.收入直接影響著用戶使用的智能手機(jī)類(lèi)型,同時(shí)也影響著人們對(duì)APP的選擇和購(gòu)買(mǎi)能力.

(2)APP 開(kāi)發(fā)的應(yīng)用設(shè)備

iOS系統(tǒng)主要是應(yīng)用在iPhone、iPad、iTouch設(shè)備上,而安卓系統(tǒng)主要是應(yīng)用在安卓智能手機(jī)上.相對(duì)來(lái)說(shuō),安卓系統(tǒng)的智能設(shè)備類(lèi)型更多,沒(méi)有嚴(yán)格的統(tǒng)一標(biāo)準(zhǔn)規(guī)定.

(3)開(kāi)發(fā)的難度

蘋(píng)果的開(kāi)發(fā)環(huán)境更加完善,iOS版本之間是通用的.蘋(píng)果開(kāi)發(fā)一款產(chǎn)品,蘋(píng)果的所有產(chǎn)品都能使用,它的硬件非常強(qiáng)大,讓開(kāi)發(fā)者省去了很多麻煩.相對(duì)于蘋(píng)果來(lái)說(shuō)安卓的開(kāi)發(fā)環(huán)境就有待完善,有些開(kāi)發(fā)的產(chǎn)品不兼容,大家的安卓APP開(kāi)發(fā)者需要做很多繁重?zé)o味的工作.由此而導(dǎo)致安卓的開(kāi)發(fā)市場(chǎng)顯得有點(diǎn)紊亂繁雜.

(4)安全性能

在開(kāi)放性方面,安卓系統(tǒng)做得更好一些.安卓比iOS開(kāi)發(fā)了更多的應(yīng)用接口,用戶可以隨意安裝輸入法、點(diǎn)擊任何瀏覽器的鏈接等,而iOS系統(tǒng)不越獄就做不到.凡事利弊相生,由于iOS具有封閉性質(zhì),因而安全性要好很多.再者,iOS 的性能更加強(qiáng)大,使用起來(lái)更暢順.但是安卓系統(tǒng)方面則會(huì)有惡意的插件自動(dòng)運(yùn)行,系統(tǒng)漏洞比較多,較為容易導(dǎo)致用戶的隱私泄漏,其安全性相對(duì)比較低.

在研究的過(guò)程中,針對(duì)以上問(wèn)題,筆者將繼續(xù)作進(jìn)一步深入改善,希望能將本套系統(tǒng)得以完善,最終能更加全面地為消費(fèi)者的服裝定制服務(wù).

1 上官王娜.基于遠(yuǎn)程高級(jí)定制的計(jì)算機(jī)服裝設(shè)計(jì)系統(tǒng)研究[碩士學(xué)位論文].杭州:浙江理工大學(xué),2015.

2 云慧潔.服裝定制管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[碩士學(xué)位論文].長(zhǎng)春:吉林大學(xué),2015.

3 李海波.基于WEBGL的3D試衣系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[碩士學(xué)位論文].廈門(mén):廈門(mén)大學(xué),2013.

4 Song D,Tong RF,Chang J,et al.3D body shapes estimation from dressed-human silhouettes.Computer Graphics Forum,2016,35(7):147–156.

5 王巍,張皋鵬.基于網(wǎng)絡(luò)的交互式服裝定制設(shè)計(jì)系統(tǒng)的開(kāi)發(fā).絲綢,2015,52(5):47–51,58.

6 Dong B,Jia HM,Li Z,et al. Implementing mass customization in garment industry. Systems Engineering Procedia,2012,(3):372–380.

7 Liu L,Wang RM,Su Z,et al. Automatic 3D garment modeling by continuous style description.SIGGRAPH Asia 2013 Posters.Hong Kong,China.2013.

附錄:

表A1 客戶信息表(Cu_customer)主要結(jié)構(gòu)

待續(xù)

接上表

表A2 訂單基本信息表(orders)主要結(jié)構(gòu)

表A3 訂單詳情信息表(orderitem)主要結(jié)構(gòu)

表A4 服裝產(chǎn)品基本信息表(pd_productions)主要結(jié)構(gòu)

圖A1 客戶服裝訂單關(guān)系