基于网络的交互式服装定制设计系统的开发

王 巍, 张皋鹏

(四川大学 轻纺与食品学院, 成都 610065)

研究与技术

基于网络的交互式服装定制设计系统的开发

王 巍, 张皋鹏

(四川大学 轻纺与食品学院, 成都 610065)

为适应服装大规模定制生产方式的发展需要,利用现代化计算机和网络技术,研制开发具有交互式定制功能的服装设计系统。通过系统,消费者可以在线参与到服装的设计活动中,与服装企业共同交互完成服装的定制和交易,并可以通过系统提供的服装试衣界面体验到在实体店购买服装的真实感;企业可以根据消费者的不同体型,以大批量生产低成本、高效率和高质量的服务生产出消费者定制的服装。

服装; 大规模定制; 网络; 交互式; 设计系统

传统的服装生产模式包括两种:一种是大规模生产,另一种是定制生产。随着人们物质和文化生活水平的不断提高,传统的大规模生产方式已越来越不能满足消费者着装的时尚化、多样化和个性化需要;而定制的服装生产模式虽极富个性化,但生产效率低、成本高,不符合现代工业化生产的特点。因此,服装市场迫切需要一种以低成本、高质量和短期交货的大批量生产的模式进行定制服装的生产,很多专家提出了“大规模定制”这一新型的生产模式[1-2]。

服装大规模定制综合了传统生产模式的优缺点,消费者可以参与到服装的设计活动中,与服装企业共同完成服装的定制,企业可以并根据消费者的不同体型,以大规模生产的低成本、高效率和高质量提供定制服装和服务的生产方式;它是一种可以应对市场需求变化的、能够做出快速反应的生产模式[3]。

在实践方面,国内外一些服装企业也开始利用现代化的计算机网络技术,研制开发适合于服装大规模定制生产模式的系统。例如:美国IC3D公司开发了网络定制生产牛仔裤系统,采用模块化设计技术,通过标准模块的组合形成了能够满足消费者需求的产品[4-5];在国内,以雅戈尔公司为代表的一些大型服装企业也开始着手研究大规模定制的生产模式,力图能够在服装的尺寸、规格、颜色和面料的选择等方面尽可能地满足消费者的个性化消费需要。

本文以服装的“大规模定制”理论为指导,利用计算机网络技术研制开发出“基于网络的交互式服装定制设计系统”,为实现人与人之间的信息交流,以及设计信息系统与生产信息系统的无缝集成打下了基础。消费者通过这一平台,可以点对点、面对面地参与到服装设计的过程中,而生产商在第一时间获得了消费者的定制需求后进行科学统筹并指导大规模生产,从而解除大批量生产与消费者个性化需求之间日益增长的矛盾。

1 系统的设计方法

1.1 系统的设计原理

服装的大规模定制需要建立在一些基本法则的基础上。服装具备的风格、款式、版型、面料和尺寸五个要素在一定程度上具备相似度和通用度,所以,相似性和通用性可以作为服装的大规模定制的基本法则。交互式服装定制系统是根据服装的相似性、通用性原理,利用相关的计算机软件制作数字化的服装款式库,然后通过网站开发工具建立消费者与服装企业的信息交流平台[6]。服装大规模定制的基本程式见图1。

图1 服装大规模定制的基本程式Fig.1 Basic program of mass customization of garments

在这样的平台中,用户可以通过系统所提供的款式库进行任意选择和设计,确定服装的款式、色彩、面料、尺寸、订购数量等产品规格;同时获得订购价格、交货期等信息,形成个性化定制单。针对客户所确定的工艺单,企业可以借助系统安排服装的生产及配送,从而完成远程化、交互式的商品交易。

1.2 系统的交互式技术

系统交互式功能的实现采用的主要技术是Flash ActionScript编程语言和JSP服务器语言。

Flash使用ActionScript给动画添加交互性。在简单动画中,Flash按顺序播放动画中的场景和帧,而在交互动画中,用户可以使用键盘或鼠标与动画交互。使用ActionScript可以控制Flash动画中的对象,创建导航元素和交互元素,扩展Flash创作交互动画和网络应用的能力。

JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离,支持可重用的基于组件的设计,使基于Web的应用程序的开发变得迅速和容易。

Web服务器在遇到访问JSP网页的请求时,首先执行其中的程序段,然后将执行结果连同JSP文件中的HTML代码一起返回给客户。插入的Java程序段可以操作数据库、重新定向网页等,以实现建立动态网页所需要的功能。

1.3 Web服务器技术

Web作为系统装载服装定制功能的容器,其兼容性和可扩展性是系统考虑的主要问题,因此系统选择成熟的技术——J2EE。J2EE体系结构提供中间层集成框架用来满足无需太多费用而又需要高可用性、高可靠性以及可扩展性的应用的需求。通过提供统一的开发平台,J2EE降低了开发多层应用的费用和复杂性,同时提供对现有应用程序集成的强有力支持,完全支持Enterprise JavaBeans,有良好的向导支持打包和部署应用,添加目录支持,增强了安全机制,提高了性能[7]。J2EE包括13种核心技术,在系统开发过程中,这些技术不一定全部用到,对于系统来说,用到的技术有:JSP、Servlet、JavaBean。

1)系统的动态信息由JSP页面来表现,JSP页面由安装在Web服务器或者使用JSP的应用服务器上的JSP引擎执行。JSP引擎接受客户端对JSP页面的请求,并且生成JSP页面作为对客户端的响应。系统包括15个jsp文件,这些jsp文件是担任呈现网站功能界面的主要角色,比如用户登陆、表单显示、订单展示等。

2)Servlet是一种独立于平台和协议的服务器端的Java应用程序,可以生成动态的Web页面。Servlet是位于Web服务器内部服务器端的Java应用程序,与传统的从命令行启动的Java应用程序不同,Servlet由Web服务器进行加载,该Web服务器必须包含支持Servlet的Java虚拟机。Servlet具有安全方便、功能强大、可移植性好的优势,这也是系统选择此技术的原因。在系统中,共有10个Servlet程序,分别负责用户验证、用户信息修改、确认订单等操作,主要跟数据库访问、修改功能相关。

3)JavaBean是一种用Java语言写成的可重用组件。可以使用JavaBean将功能、处理、值、数据库访问和其他任何可以用java代码创造的对象进行打包,并且可以通过内部的JSP页面、Servlet、其他JavaBean、applet程序或者应用来使用这些对象。JavaBean可以对业务逻辑进行封装,在JSP页面中或者Severlet中进行调用,这样就大大地减少了代码的重复和逻辑操作的重复。在系统中共编写了4个JavaBean分别是:Good.Java(商品对象)、Order.Java(订单对象)、ShopDB.Java(封装有数据库操作)、User.Java(用户对象)。

1.4 系统的其他主要开发工具

系统的开发主要包括四个方面:服装款式素材的设计制作、网站数据库的建立、网站页面的设计制作、网站框架结构的研制。

1)在服装款式库的建立阶段,根据服装的款式特点进行了归纳、设计和制作。制作的工具主要应用了Adobe Illustrator CS6,原因是该软件绘制出的服装款式易于修改、表现力强、文件小、制图规范、便于传送和识别,同时也适应于网络上的动画展示。

2)网站数据库采用MySQL进行建立。MySQL是一个小型关系型数据库管理系统,由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,是系统数据库建立的首选工具。

3)系统网页主要通过Adobe Dreamweaver进行设计制作。它是集网页制作和管理网站于一身的网页编辑器,是针对专业网页设计师开发的可视化网页开发工具,利用它可以轻而易举地制作出跨平台、跨浏览器、充满动感的网页。

4)网站开发采用的是MyEclipse。它是功能丰富的J2EE集成开发环境,包括了完备的编码、调试、测试和发布功能,完整支持Html、Struts、JSF、CSS、JavaScript、SQL、Hibernate。

2 系统的核心技术与功能

2.1 采用JavaBean处理逻辑业务

系统采用面向对象思想进行设计,将系统首重划分为管理员和客户两个角色。按照角色的工作场景分析每个角色的工作,按照工作的内容设计每个角色的操作界面[8]。

针对客户,系统提供了登陆、注册、设计款式、调整色彩、选择面料、输入身体尺寸及定制数量、查看订单或修改、确认订单并付款等功能,用户操作流程图如图2所示。

图2 用户操作流程Fig.2 User operation flow chart

对于管理员来讲,系统要实现的功能是帮助管理员查看所有用户订单信息、处理订单、安排生产、发货,从而方便完成远程化交易。管理员操作流程图如图3所示。

图3 管理员操作流程Fig.3 Administrator operation flow chart

系统在处理逻辑业务时使用JavaBean,用类(class)封装了用户(User)、商品(good)订单(Order)、数据库操作(ShopDB)等信息,每个类中都有一定的属性和方法:set方法是用来修改对象属性的,get方法则是用来获取对象属性的,这样便于控制模块(Severlet)来处理客户请求。在业务逻辑操作时,只需要生成这些类的对象,就可以调用它的方法来实现功能性操作。

2.2 采用ActionScript3.0实现换装功能

系统的核心功能是实现用户交互式选择服装款式、颜色和面料的操作程序设计。系统采用的是Action Script并结合了Adobe Flash CS4 Professional进行开发[9]。

以鼠标响应为例说明交互式操作程序的基本技术。如图4所示的流程图,先将服装模型装载到主场景中以供用户选择,并为模特的着装状态设定若干状态值,假设把当前模特只穿着上衣、只穿着下衣、或者套装,分别标识为1、2、3。当有鼠标事件触发时,调用一定的函数初始化鼠标事件,并根据此时模特的着装状态,正确地响应用户的操作。当用户点击数据库中服装的款式、调整色彩及选择面料时,屏幕即可显示相应的效果图,用户即可通过形象化的途径判别、选择和定制,同时系统在后台形成对应的生产工艺单。

图4 鼠标响应事件流程Fig.4 Mouse response event flow chart

在系统中,将采用矢量图工具Adobe Illustrator设计的服装素材(后缀名为.ai的文件)导入到Adobe Flash CS4 Professional工具中,由于二者都是Adobe公司的产品,格式上完全兼容。将服装分为多个图层,上衣和下衣分开,用AS脚本控制图层色彩的变化及显隐从而响应用户的动作。

此外,系统使用了Action Script给动画添加交互性。在简单动画中,Flash按顺序播放动画中的场景和帧,而在交互动画中,用户可以使用键盘或鼠标与动画交互。

2.3 交互式网页界面开发

为了方便用户和管理员的交流,网页设计是网站开发过程中必不可少的环节,在系统中,采用JavaScript和AJAX技术来实现交互式界面的设计。

采用JavaScript可以实现用户注册输入验证、动态显示图片等功能,在系统中,使用了JavaScript技术生成效果图[10]。

AJAX是一种创建交互式网页应用的网页开发技术。使用AJAX的最大优点是能在不更新整个页面的前提下维护数据,这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。在系统中,使用了AJAX技术来实现用户登陆、验证、返回结果的功能,并实现了局部刷新的效果[11]。

3 系统的运行效果

系统的运行和调试需要事先运行MySQLAdministrator和Monitor Tomcat两个程序。使用MySQL Administrator可以导出数据库,在运行MySQL Administrator时输入服务器主机H、端口及用户名和密码,以定义系统网站的IP。运行Monitor Tomcat开启服务器,然后在IE中输入网址即可进入系统网页[12]。

进入系统后用户首先需要进行注册,填写在大规模定制生产过程中生产方所必需的客户信息,以便在服装生产完毕之后向用户发货。

注册完毕之后返回主页即可进入交互式定制阶段。用户可以在系统提供的服装数据库中任意搭配服装款式及部件,并选择色彩和面料完成第一步定制(图5)。

图5 第一步定制过程Fig.5 First customization step

接着用户可以根据系统提供的人体尺寸测量示意图填写身体的尺寸和定购的数量(图6),完成第二步定制。

图6 第二步定制过程Fig.6 Second customization step

最后用户需要再次核对以上的定制信息,并补充其他的特殊定制需求,然后点击购物车付款(图7),完成第三步定制。

图7 第三步定制过程Fig.7 Third customization step

完成上述操作后,客户的个人信息及定制信息将存储在服务器中。网站管理员可以在系统中查阅和调用客户的相关信息(表1),根据订单统筹安排大规模定制生产。

表1 客户定制信息汇总

4 结 论

通过交互式服装定制设计系统的开发与应用,可以达到如下目标:

首先,实现了服装的远程化定制,可以满足服装的个性化设计和生产,从而提高服务水平和质量。

其二,基于网络的服装定制系统不仅可以节省开设店面的费用,还方便了消费者,消费者足不出户即可亲自参与服装的个性化设计和定制过程。

其三,对于服装生产商而言,通过汇集各个网点的订单即可组成一定规模的生产量,使服装的定制化大批量生产成为可能。

其四,“以单定产”的经营模式避免了服装的库存,可以降低服装企业的经营风险。

总之,基于网络的交互式服装定制设计系统充分利用了现代计算机技术和网络技术的优点,为服装大规模定制生产方式的实现创造了必要的技术条件。

但是系统还存在一些不足之处,比如:在服装的数据库制作中,虽然已经总结并制作出了很多服装款式,但是在Flash的制作阶段,由于每编程一件服装都要耗费很长的时间,没能把制作出的服装素材都加入其中;另外,系统在核查用户信息的时候偶尔会出现乱码。针对这些问题,笔者将作深入研究,希望能将此系统加以完善,最终更好地指导服装的大规模定制生产。

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

[2]祁国宁.大批量定制技术及其应用[M].北京:机械工业出版社,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]吴迪冲,顾新建.服装大规模定制特性分析[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]晏强.基于过程的计算机辅助设计模型及原型系统的研究[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引擎在动态网页采集技术中的应用[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动态管理中的应用[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