交互式服裝定制平臺移動端設(shè)計①

白瑩瑩,毋 濤

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

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

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

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

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

1.1 WeX5介紹

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

WeX5的框架如圖1所示.

圖1 WeX5 框架

目前,WeX5支持的前端有:

1)移動APP(蘋果APP和安卓APP);

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

3)PC 瀏覽器;

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

1.2 WebGL理論

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

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

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

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

1.3 Three.js概述

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

Three.js的6個基本步驟:

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

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

(3)設(shè)置場景 scene;

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

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

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

1.4 虛擬試衣技術(shù)

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

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

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

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

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

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

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

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

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

(1)開發(fā)語言:Java(JDK1.7).

(2)開發(fā)平臺:VMware Workstation.

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

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

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

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

2.2 功能設(shè)計

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

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

圖2 服裝定制平臺移動端功能模塊設(shè)計圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3 功能實現(xiàn)

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

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

圖5 移動端首頁

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

4 總結(jié)與思考

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

圖6 服裝在線定制頁面

圖7 用戶個人中心

(1)面對的使用人群

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

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

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

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

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

(4)安全性能

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

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

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

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

3 李海波.基于WEBGL的3D試衣系統(tǒng)的設(shè)計與實現(xiàn)[碩士學(xué)位論文].廈門:廈門大學(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è)計系統(tǒng)的開發(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)系