交互式服裝定制平臺移動端設計①

2018-02-07 02:41:17白瑩瑩

計算機系統應用 2018年1期

白瑩瑩,毋濤

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

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

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

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

1 基本理論與相關技術

1.1 WeX5介紹

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

WeX5的框架如圖1所示.

圖1 WeX5 框架

目前,WeX5支持的前端有:

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

2)微信應用(包括公眾號、服務號和企業應用號);

3)PC 瀏覽器;

4)其它輕應用(如百度直達號).

1.2 WebGL理論

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

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

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

(2)利用底層的圖形硬件加速功能進行的圖形渲染,是通過統一的、標準的、跨平臺的OpenGL接口實現的.

1.3 Three.js概述

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

Three.js的6個基本步驟:

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

(2)設置攝像機 camera;

(3)設置場景 scene;

(4)設置光源 light;

(5)設置物體 object;

(6)書寫主函數執行以上5步.

1.4 虛擬試衣技術

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

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

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

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

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

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

(6)可選擇環境參數,如光照顏色、是否有風、是否需要聚光效果、舞臺是否需要自動旋轉等.

2 系統設計

2.1 開發環境與工具

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

(2)開發平臺:VMware Workstation.

(3)開發工具:WeX5.

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

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

(6)Web 服務器:Tomcat 7.0.

2.2 功能設計

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

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

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

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

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

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

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

2.3 數據庫設計

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

(1)客戶信息關系表

客戶信息表是整個客戶信息的基礎和紐帶,它記載了客戶的基本信息以及相關信息的外鍵,可以詳細展示該客戶的信息.它們之間的數據表關系如圖3所示.

圖3 客戶信息關系

圖3中客戶信息表(Cu_customer)是整個客戶信息的基礎和紐帶,它記載了客戶的基本信息以及相關信息的外鍵,可以詳細展示該客戶的信息.它的數據表結構的主要字段設計如附錄表A1所示.

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

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

圖4 服裝產品信息關系圖

其中訂單基本信息表和訂單詳情信息表是整個服裝訂單的基礎,通過訂單數據企業才能設計完成訂單的生產過程.它的主要數據表結構設計如附錄表A2和表A3所示.

(3)服裝產品信息關系表

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

附錄圖A1中服裝產品基本信息表是整個服裝產品信息的基礎,它記載了產品的基本信息以及相關信息的外鍵,可以詳細展示該產品的信息.它的數據表結構設計如附錄表A4所示.

3 功能實現

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

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

圖5 移動端首頁

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

4 總結與思考

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

圖6 服裝在線定制頁面

圖7 用戶個人中心

(1)面對的使用人群

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

(2)APP 開發的應用設備

iOS系統主要是應用在iPhone、iPad、iTouch設備上,而安卓系統主要是應用在安卓智能手機上.相對來說,安卓系統的智能設備類型更多,沒有嚴格的統一標準規定.

(3)開發的難度

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

(4)安全性能

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

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

1 上官王娜.基于遠程高級定制的計算機服裝設計系統研究[碩士學位論文].杭州:浙江理工大學,2015.

2 云慧潔.服裝定制管理系統的設計與實現[碩士學位論文].長春:吉林大學,2015.

3 李海波.基于WEBGL的3D試衣系統的設計與實現[碩士學位論文].廈門:廈門大學,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 王巍,張皋鵬.基于網絡的交互式服裝定制設計系統的開發.絲綢,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.

附錄: