王 巍, 張皋鵬

(四川大學 輕紡與食品學院, 成都 610065)

研究與技術

基于網絡的交互式服裝定制設計系統(tǒng)的開發(fā)

王 巍, 張皋鵬

(四川大學 輕紡與食品學院, 成都 610065)

為適應服裝大規(guī)模定制生產方式的發(fā)展需要,利用現代化計算機和網絡技術,研制開發(fā)具有交互式定制功能的服裝設計系統(tǒng)。通過系統(tǒng),消費者可以在線參與到服裝的設計活動中,與服裝企業(yè)共同交互完成服裝的定制和交易,并可以通過系統(tǒng)提供的服裝試衣界面體驗到在實體店購買服裝的真實感;企業(yè)可以根據消費者的不同體型,以大批量生產低成本、高效率和高質量的服務生產出消費者定制的服裝。

服裝; 大規(guī)模定制; 網絡; 交互式; 設計系統(tǒng)

傳統(tǒng)的服裝生產模式包括兩種:一種是大規(guī)模生產,另一種是定制生產。隨著人們物質和文化生活水平的不斷提高,傳統(tǒng)的大規(guī)模生產方式已越來越不能滿足消費者著裝的時尚化、多樣化和個性化需要;而定制的服裝生產模式雖極富個性化,但生產效率低、成本高,不符合現代工業(yè)化生產的特點。因此,服裝市場迫切需要一種以低成本、高質量和短期交貨的大批量生產的模式進行定制服裝的生產,很多專家提出了“大規(guī)模定制”這一新型的生產模式[1-2]。

服裝大規(guī)模定制綜合了傳統(tǒng)生產模式的優(yōu)缺點,消費者可以參與到服裝的設計活動中,與服裝企業(yè)共同完成服裝的定制,企業(yè)可以并根據消費者的不同體型,以大規(guī)模生產的低成本、高效率和高質量提供定制服裝和服務的生產方式;它是一種可以應對市場需求變化的、能夠做出快速反應的生產模式[3]。

在實踐方面,國內外一些服裝企業(yè)也開始利用現代化的計算機網絡技術,研制開發(fā)適合于服裝大規(guī)模定制生產模式的系統(tǒng)。例如:美國IC3D公司開發(fā)了網絡定制生產牛仔褲系統(tǒng),采用模塊化設計技術,通過標準模塊的組合形成了能夠滿足消費者需求的產品[4-5];在國內,以雅戈爾公司為代表的一些大型服裝企業(yè)也開始著手研究大規(guī)模定制的生產模式,力圖能夠在服裝的尺寸、規(guī)格、顏色和面料的選擇等方面盡可能地滿足消費者的個性化消費需要。

本文以服裝的“大規(guī)模定制”理論為指導,利用計算機網絡技術研制開發(fā)出“基于網絡的交互式服裝定制設計系統(tǒng)”,為實現人與人之間的信息交流,以及設計信息系統(tǒng)與生產信息系統(tǒng)的無縫集成打下了基礎。消費者通過這一平臺,可以點對點、面對面地參與到服裝設計的過程中,而生產商在第一時間獲得了消費者的定制需求后進行科學統(tǒng)籌并指導大規(guī)模生產,從而解除大批量生產與消費者個性化需求之間日益增長的矛盾。

1 系統(tǒng)的設計方法

1.1 系統(tǒng)的設計原理

服裝的大規(guī)模定制需要建立在一些基本法則的基礎上。服裝具備的風格、款式、版型、面料和尺寸五個要素在一定程度上具備相似度和通用度,所以,相似性和通用性可以作為服裝的大規(guī)模定制的基本法則。交互式服裝定制系統(tǒng)是根據服裝的相似性、通用性原理,利用相關的計算機軟件制作數字化的服裝款式庫,然后通過網站開發(fā)工具建立消費者與服裝企業(yè)的信息交流平臺[6]。服裝大規(guī)模定制的基本程式見圖1。

圖1 服裝大規(guī)模定制的基本程式Fig.1 Basic program of mass customization of garments

在這樣的平臺中,用戶可以通過系統(tǒng)所提供的款式庫進行任意選擇和設計,確定服裝的款式、色彩、面料、尺寸、訂購數量等產品規(guī)格;同時獲得訂購價格、交貨期等信息,形成個性化定制單。針對客戶所確定的工藝單,企業(yè)可以借助系統(tǒng)安排服裝的生產及配送,從而完成遠程化、交互式的商品交易。

1.2 系統(tǒng)的交互式技術

系統(tǒng)交互式功能的實現采用的主要技術是Flash ActionScript編程語言和JSP服務器語言。

Flash使用ActionScript給動畫添加交互性。在簡單動畫中,Flash按順序播放動畫中的場景和幀,而在交互動畫中,用戶可以使用鍵盤或鼠標與動畫交互。使用ActionScript可以控制Flash動畫中的對象,創(chuàng)建導航元素和交互元素,擴展Flash創(chuàng)作交互動畫和網絡應用的能力。

JSP技術使用Java編程語言編寫類XML的tags和scriptlets,來封裝產生動態(tài)網頁的處理邏輯。網頁還能通過tags和scriptlets訪問存在于服務端的資源的應用邏輯。JSP將網頁邏輯與網頁設計和顯示分離,支持可重用的基于組件的設計,使基于Web的應用程序的開發(fā)變得迅速和容易。

Web服務器在遇到訪問JSP網頁的請求時,首先執(zhí)行其中的程序段,然后將執(zhí)行結果連同JSP文件中的HTML代碼一起返回給客戶。插入的Java程序段可以操作數據庫、重新定向網頁等,以實現建立動態(tài)網頁所需要的功能。

1.3 Web服務器技術

Web作為系統(tǒng)裝載服裝定制功能的容器,其兼容性和可擴展性是系統(tǒng)考慮的主要問題,因此系統(tǒng)選擇成熟的技術——J2EE。J2EE體系結構提供中間層集成框架用來滿足無需太多費用而又需要高可用性、高可靠性以及可擴展性的應用的需求。通過提供統(tǒng)一的開發(fā)平臺,J2EE降低了開發(fā)多層應用的費用和復雜性,同時提供對現有應用程序集成的強有力支持,完全支持Enterprise JavaBeans,有良好的向導支持打包和部署應用,添加目錄支持,增強了安全機制,提高了性能[7]。J2EE包括13種核心技術,在系統(tǒng)開發(fā)過程中,這些技術不一定全部用到,對于系統(tǒng)來說,用到的技術有:JSP、Servlet、JavaBean。

1)系統(tǒng)的動態(tài)信息由JSP頁面來表現,JSP頁面由安裝在Web服務器或者使用JSP的應用服務器上的JSP引擎執(zhí)行。JSP引擎接受客戶端對JSP頁面的請求,并且生成JSP頁面作為對客戶端的響應。系統(tǒng)包括15個jsp文件,這些jsp文件是擔任呈現網站功能界面的主要角色,比如用戶登陸、表單顯示、訂單展示等。

2)Servlet是一種獨立于平臺和協議的服務器端的Java應用程序,可以生成動態(tài)的Web頁面。Servlet是位于Web服務器內部服務器端的Java應用程序,與傳統(tǒng)的從命令行啟動的Java應用程序不同,Servlet由Web服務器進行加載,該Web服務器必須包含支持Servlet的Java虛擬機。Servlet具有安全方便、功能強大、可移植性好的優(yōu)勢,這也是系統(tǒng)選擇此技術的原因。在系統(tǒng)中,共有10個Servlet程序,分別負責用戶驗證、用戶信息修改、確認訂單等操作,主要跟數據庫訪問、修改功能相關。

3)JavaBean是一種用Java語言寫成的可重用組件?？梢允褂肑avaBean將功能、處理、值、數據庫訪問和其他任何可以用java代碼創(chuàng)造的對象進行打包,并且可以通過內部的JSP頁面、Servlet、其他JavaBean、applet程序或者應用來使用這些對象。JavaBean可以對業(yè)務邏輯進行封裝,在JSP頁面中或者Severlet中進行調用,這樣就大大地減少了代碼的重復和邏輯操作的重復。在系統(tǒng)中共編寫了4個JavaBean分別是:Good.Java(商品對象)、Order.Java(訂單對象)、ShopDB.Java(封裝有數據庫操作)、User.Java(用戶對象)。

1.4 系統(tǒng)的其他主要開發(fā)工具

系統(tǒng)的開發(fā)主要包括四個方面:服裝款式素材的設計制作、網站數據庫的建立、網站頁面的設計制作、網站框架結構的研制。

1)在服裝款式庫的建立階段,根據服裝的款式特點進行了歸納、設計和制作。制作的工具主要應用了Adobe Illustrator CS6,原因是該軟件繪制出的服裝款式易于修改、表現力強、文件小、制圖規(guī)范、便于傳送和識別,同時也適應于網絡上的動畫展示。

2)網站數據庫采用MySQL進行建立。MySQL是一個小型關系型數據庫管理系統(tǒng),由于其體積小、速度快、總體擁有成本低,尤其是開放源碼這一特點,是系統(tǒng)數據庫建立的首選工具。

3)系統(tǒng)網頁主要通過Adobe Dreamweaver進行設計制作。它是集網頁制作和管理網站于一身的網頁編輯器,是針對專業(yè)網頁設計師開發(fā)的可視化網頁開發(fā)工具,利用它可以輕而易舉地制作出跨平臺、跨瀏覽器、充滿動感的網頁。

4)網站開發(fā)采用的是MyEclipse。它是功能豐富的J2EE集成開發(fā)環(huán)境,包括了完備的編碼、調試、測試和發(fā)布功能,完整支持Html、Struts、JSF、CSS、JavaScript、SQL、Hibernate。

2 系統(tǒng)的核心技術與功能

2.1 采用JavaBean處理邏輯業(yè)務

系統(tǒng)采用面向對象思想進行設計,將系統(tǒng)首重劃分為管理員和客戶兩個角色。按照角色的工作場景分析每個角色的工作,按照工作的內容設計每個角色的操作界面[8]。

針對客戶,系統(tǒng)提供了登陸、注冊、設計款式、調整色彩、選擇面料、輸入身體尺寸及定制數量、查看訂單或修改、確認訂單并付款等功能,用戶操作流程圖如圖2所示。

圖2 用戶操作流程Fig.2 User operation flow chart

對于管理員來講,系統(tǒng)要實現的功能是幫助管理員查看所有用戶訂單信息、處理訂單、安排生產、發(fā)貨,從而方便完成遠程化交易。管理員操作流程圖如圖3所示。

圖3 管理員操作流程Fig.3 Administrator operation flow chart

系統(tǒng)在處理邏輯業(yè)務時使用JavaBean,用類(class)封裝了用戶(User)、商品(good)訂單(Order)、數據庫操作(ShopDB)等信息,每個類中都有一定的屬性和方法:set方法是用來修改對象屬性的,get方法則是用來獲取對象屬性的,這樣便于控制模塊(Severlet)來處理客戶請求。在業(yè)務邏輯操作時,只需要生成這些類的對象,就可以調用它的方法來實現功能性操作。

2.2 采用ActionScript3.0實現換裝功能

系統(tǒng)的核心功能是實現用戶交互式選擇服裝款式、顏色和面料的操作程序設計。系統(tǒng)采用的是Action Script并結合了Adobe Flash CS4 Professional進行開發(fā)[9]。

以鼠標響應為例說明交互式操作程序的基本技術。如圖4所示的流程圖,先將服裝模型裝載到主場景中以供用戶選擇,并為模特的著裝狀態(tài)設定若干狀態(tài)值,假設把當前模特只穿著上衣、只穿著下衣、或者套裝,分別標識為1、2、3。當有鼠標事件觸發(fā)時,調用一定的函數初始化鼠標事件,并根據此時模特的著裝狀態(tài),正確地響應用戶的操作。當用戶點擊數據庫中服裝的款式、調整色彩及選擇面料時,屏幕即可顯示相應的效果圖,用戶即可通過形象化的途徑判別、選擇和定制,同時系統(tǒng)在后臺形成對應的生產工藝單。

圖4 鼠標響應事件流程Fig.4 Mouse response event flow chart

在系統(tǒng)中,將采用矢量圖工具Adobe Illustrator設計的服裝素材(后綴名為.ai的文件)導入到Adobe Flash CS4 Professional工具中,由于二者都是Adobe公司的產品,格式上完全兼容。將服裝分為多個圖層,上衣和下衣分開,用AS腳本控制圖層色彩的變化及顯隱從而響應用戶的動作。

此外,系統(tǒng)使用了Action Script給動畫添加交互性。在簡單動畫中,Flash按順序播放動畫中的場景和幀,而在交互動畫中,用戶可以使用鍵盤或鼠標與動畫交互。

2.3 交互式網頁界面開發(fā)

為了方便用戶和管理員的交流,網頁設計是網站開發(fā)過程中必不可少的環(huán)節(jié),在系統(tǒng)中,采用JavaScript和AJAX技術來實現交互式界面的設計。

采用JavaScript可以實現用戶注冊輸入驗證、動態(tài)顯示圖片等功能,在系統(tǒng)中,使用了JavaScript技術生成效果圖[10]。

AJAX是一種創(chuàng)建交互式網頁應用的網頁開發(fā)技術。使用AJAX的最大優(yōu)點是能在不更新整個頁面的前提下維護數據,這使得Web應用程序更為迅捷地回應用戶動作,并避免了在網絡上發(fā)送那些沒有改變過的信息。在系統(tǒng)中,使用了AJAX技術來實現用戶登陸、驗證、返回結果的功能,并實現了局部刷新的效果[11]。

3 系統(tǒng)的運行效果

系統(tǒng)的運行和調試需要事先運行MySQLAdministrator和Monitor Tomcat兩個程序。使用MySQL Administrator可以導出數據庫,在運行MySQL Administrator時輸入服務器主機H、端口及用戶名和密碼,以定義系統(tǒng)網站的IP。運行Monitor Tomcat開啟服務器,然后在IE中輸入網址即可進入系統(tǒng)網頁[12]。

進入系統(tǒng)后用戶首先需要進行注冊,填寫在大規(guī)模定制生產過程中生產方所必需的客戶信息,以便在服裝生產完畢之后向用戶發(fā)貨。

注冊完畢之后返回主頁即可進入交互式定制階段。用戶可以在系統(tǒng)提供的服裝數據庫中任意搭配服裝款式及部件,并選擇色彩和面料完成第一步定制(圖5)。

圖5 第一步定制過程Fig.5 First customization step

接著用戶可以根據系統(tǒng)提供的人體尺寸測量示意圖填寫身體的尺寸和定購的數量(圖6),完成第二步定制。

圖6 第二步定制過程Fig.6 Second customization step

最后用戶需要再次核對以上的定制信息,并補充其他的特殊定制需求,然后點擊購物車付款(圖7),完成第三步定制。

圖7 第三步定制過程Fig.7 Third customization step

完成上述操作后,客戶的個人信息及定制信息將存儲在服務器中。網站管理員可以在系統(tǒng)中查閱和調用客戶的相關信息(表1),根據訂單統(tǒng)籌安排大規(guī)模定制生產。

表1 客戶定制信息匯總

4 結 論

通過交互式服裝定制設計系統(tǒng)的開發(fā)與應用,可以達到如下目標:

首先,實現了服裝的遠程化定制,可以滿足服裝的個性化設計和生產,從而提高服務水平和質量。

其二,基于網絡的服裝定制系統(tǒng)不僅可以節(jié)省開設店面的費用,還方便了消費者,消費者足不出戶即可親自參與服裝的個性化設計和定制過程。

其三,對于服裝生產商而言,通過匯集各個網點的訂單即可組成一定規(guī)模的生產量,使服裝的定制化大批量生產成為可能。

其四,“以單定產”的經營模式避免了服裝的庫存,可以降低服裝企業(yè)的經營風險。

總之,基于網絡的交互式服裝定制設計系統(tǒng)充分利用了現代計算機技術和網絡技術的優(yōu)點,為服裝大規(guī)模定制生產方式的實現創(chuàng)造了必要的技術條件。

但是系統(tǒng)還存在一些不足之處,比如:在服裝的數據庫制作中,雖然已經總結并制作出了很多服裝款式,但是在Flash的制作階段,由于每編程一件服裝都要耗費很長的時間,沒能把制作出的服裝素材都加入其中;另外,系統(tǒng)在核查用戶信息的時候偶爾會出現亂碼。針對這些問題,筆者將作深入研究,希望能將此系統(tǒng)加以完善,最終更好地指導服裝的大規(guī)模定制生產。

[1]BRANNON L E. Fashion Forecasting[M]. New York: Fairchild Publications, INC,2000:233.

[2]祁國寧.大批量定制技術及其應用[M].北京:機械工業(yè)出版社,2003:269. QI Guoning. Mass Customization Technology and Its Applications[M]. Beijing: Machinery Industry Press,2003:269.

[3]FIORE A M, LEE S E, KUNZ G, et al. Relationships between optimum stimulation level and willingness to use mass customisation options[J]. Journal of Fashion Marketing and Management: An International Journal,2001,5(2):99-107.

[4]CONNIE CMAY, LIU W. Is the internet an effective marketing tool to “Generation X” on fashion[J]. Journal of China Textile University,1999(3):96-100.

[5]TSENGMM, JIAO J. Mass Customization[C]//Handbook of Engineering, Technology and Operation Management. New York : Wiley,2001:126-155.

[6]吳迪沖,顧新建.服裝大規(guī)模定制特性分析[J].紡織學報,2005,26(3):150-152. WU Dichong, GU Xinjian. Analysis on the character of mass customization of costume[J]. Journal of Textile Research,2005,26(3):150-152.

[7]陸榮幸,郁洲,阮永良,等.J2EE平臺上MVC設計模式的研究與實現[J].計算機應用研究,2003,20(3):144-146. LU Rongxing, YU Zhou, RUAN Yongliang, et al. Study and implementation of MVC design pattern on J2EE platform[J]. Application Research of Computers,2003,20(3):144-146.

[8]晏強.基于過程的計算機輔助設計模型及原型系統(tǒng)的研究[D].成都:四川大學,2003. YAN Qiang. Research of a Process-based CAD Model and Prototype System[D]. Chengdu: Sichuan University,2003.

[9]章精設,胡登濤.Flash ActionScript 3.0從入門到精通[M].北京:清華大學出版社,2008:72-84. ZHANG Jingshe, HU Dengtao. Flash ActionScript 3.0 From Entry to the Master[M]. Beijing: Tsinghua University Press,2008:72-84.

[10]王映,于滿泉,李盛韜,等.JavaScript引擎在動態(tài)網頁采集技術中的應用[J].計算機應用,2004,24(2):33-36. WANG Ying, YU Manquan, LI Shengtao, et al. Extracting dynamic URLs using JavaScript engine[J]. Journal of Computer Applications,2004,24(2):33-36.

[11]呂林濤,萬經華,周紅芳.基于AJAX的Web無刷新頁面快速更新數據方法[J].計算機應用研究,2006,23(11):199-200,223. Lü Lintao, WAN Jinghua, ZHOU Hongfang. Research of not refurbishing and updating data method in AJAX Web application[J]. Application Research of Computers,2006,23(11):199-200,223.

[12]劉玲霞,王凌,周斌,等.MVC模式在Tomcat動態(tài)管理中的應用[J].計算機工程,2005,31(6):216-217. LIU Lingxia, WANG Ling, ZHOU Bin, et al. Application of MVC pattern to dynamic management of tomcat[J]. Computer Engineering,2005,31(6):216-217.

Development of Interactive Garment Customization Design System Based on Network

WANG Wei, ZHANG Gaopeng

(College of Light Textile and Food Engineering, Sichuan University, Chengdu 610065, China)

To adapt to the development need of mass customization production mode of garments, a garment design system with interactive customization function is developed with modern computer and network technology. Consumers can participate in design activities of garments online, interact with garment enterprises to complete garment customization and trade and experience the sense of reality of buying clothes in physical stores through the fitting interface provided by the system. Enterprises can produce customized garments for consumers with low-cost, high-efficiency and high-quality service of mass production according to different body types of consumers.

garments; mass customization; network; interactive; design system

doi.org/10.3969/j.issn.1001-7003.2015.05.009

2014-10-27;

2015-03-10

四川省科技廳科技支撐資助項目(2010GZ0162)

TS941.2

A

1001-7003(2015)05-0047-05 引用頁碼: 051109