鐘黎明　吳昌錢

摘要：隨著移動互聯(lián)技術(shù)的發(fā)展，移動端應(yīng)用越來越多的涌現(xiàn)出來，這是IT行業(yè)發(fā)展的趨勢，也影響到了各行各業(yè)，室內(nèi)軟裝飾行業(yè)也同樣受到移動平臺的沖擊。基于android/ios平臺的室內(nèi)軟裝系統(tǒng)這是在移動互聯(lián)迅猛發(fā)展的基礎(chǔ)上提出的，目標(biāo)是建立一個以室內(nèi)軟裝飾設(shè)計為中心，用戶、設(shè)計人員能實時交流溝通的系統(tǒng)，讓用戶的房屋裝修設(shè)計方案能以更少的時間、更高的效率完成。

關(guān)鍵詞：Android；ios；軟裝；軟裝設(shè)計；移動互聯(lián)

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2017）18-0066-02

1背景

室內(nèi)軟裝設(shè)計，即軟裝修、軟裝飾。區(qū)別于傳統(tǒng)“硬裝”的室內(nèi)裝飾形式，其是在室內(nèi)墻面、頂面、地面完成一次空間建構(gòu)的基礎(chǔ)上，使用可以隨時更換的花瓶、陶器、書畫、綠植、地毯、布藝等進(jìn)行的二次空間裝飾。

當(dāng)前移動互聯(lián)網(wǎng)技術(shù)發(fā)展迅速，應(yīng)用移動端上網(wǎng)工作的人數(shù)日益增加，截止2016年12月，手機(jī)上網(wǎng)人數(shù)已達(dá)6.95億，占上網(wǎng)人數(shù)的95.1%。隨著消費(fèi)者向移動互聯(lián)轉(zhuǎn)移，相應(yīng)的，移動端應(yīng)用就越越來越多。在早期，設(shè)計師采用AutoCad軟件進(jìn)行裝修設(shè)計，這需要設(shè)計師學(xué)習(xí)掌握AutoCad軟件的復(fù)雜操作，效率不高。近年來，應(yīng)用平板電腦等移動平臺的室內(nèi)軟裝軟件問世了，但是這類軟件大多只是由設(shè)計師使用，缺乏和客戶實時交流的途徑，客戶要在設(shè)計時不便于提出自己的意見，導(dǎo)致客戶可能對設(shè)計方案不滿意而重復(fù)修改，浪費(fèi)了大量時間。因此，能和客戶實時交流，在設(shè)計過程中根據(jù)用戶對早期設(shè)計方案進(jìn)行調(diào)整，實際上可以大大提高效率。所以，本課題以移動互聯(lián)網(wǎng)為基礎(chǔ)，提出了移動互聯(lián)網(wǎng)+軟裝設(shè)計的系統(tǒng)模式，包括了裝飾材料商城、軟裝設(shè)計、客戶移動端等三個重要模塊，注重客戶、軟裝設(shè)計師和裝飾材料商之間的交流、為客戶家居的軟裝設(shè)計提供了一站式服務(wù)。

2系統(tǒng)總體結(jié)構(gòu)

從功能上看。系統(tǒng)可以分為以下幾個功能模塊：軟裝設(shè)計模塊、客戶模塊和裝飾材料商城模塊。軟裝設(shè)計模塊的前端打包為Web App，安裝在android或ios平板電腦上，平板電腦便于攜帶，設(shè)計師可在公司或家里都能進(jìn)行設(shè)計工作。軟裝模塊主要功能有設(shè)計師與客戶或材料供應(yīng)商實時交流的功能、軟裝設(shè)計功能、設(shè)計方案管理功能等?？蛻裟K的前端Web App可安裝到android或蘋果手機(jī)，客戶可瀏覽優(yōu)秀設(shè)計方案、申請裝修設(shè)計、和設(shè)計師進(jìn)行實時通訊、根據(jù)裝修設(shè)計方案在商城中購買裝飾材料、瀏覽裝飾材料及購買等。裝飾材料商城為客戶訂購裝飾材料服務(wù)，移動前端位于客戶移動端，后臺用于商城自身的管理，如商家管理，商品信息管理、訂單管理、物流管理等。

整個系統(tǒng)可分為移動前端和服務(wù)器端兩部分，系統(tǒng)架構(gòu)如圖1所示。

服務(wù)器端采用iavaweb開發(fā)技術(shù)，可分為三層，Dao層、Ser-vice層、Web層。Dao層為數(shù)據(jù)訪問層，由java實體類和相應(yīng)的數(shù)據(jù)訪問類構(gòu)成，應(yīng)用了Mybaties框架，實現(xiàn)數(shù)據(jù)持久化操作。Service層也叫業(yè)務(wù)邏輯層，實現(xiàn)了系統(tǒng)的服務(wù)組件，系統(tǒng)使用了Spring框架，springIoC容器負(fù)責(zé)向Web層的Action提供業(yè)務(wù)模型組件和該組件的協(xié)作對象數(shù)據(jù)處理（Dao）組件完成業(yè)務(wù)邏輯，并提供事務(wù)處理、緩沖池等容器組件以提升系統(tǒng)性能和保證數(shù)據(jù)的完整性。Web層應(yīng)用了Struts2框架，可將移動前端向服務(wù)器提交的請求映射到相應(yīng)的Action中，Action調(diào)用業(yè)務(wù)邏輯層中相應(yīng)組件對請求做處理，返回json格式的數(shù)據(jù)到移動客戶端，客戶端頁面根據(jù)ison格式數(shù)據(jù)做相應(yīng)的顯示。

移動前端應(yīng)用PhoneGap框架和Jquery Mobile，CSS、Ajax，HTML5等技術(shù)開發(fā)。PhoneGap是一個用基于HTML，CSS和Ja-vaScript的創(chuàng)建移動跨平臺移動App的快速開發(fā)平臺，只使用簡單的Web技術(shù)即可獲得移動設(shè)備的原生特性。通過PhoneGap打包App，這樣編寫一次基礎(chǔ)代碼就可以將App部署到多個移動平臺上，如android、ios等。移動前端分成軟裝設(shè)計模塊app和客戶模塊app，裝飾材料商城前端用于客戶訂購裝飾材料，所以在客戶模塊端實現(xiàn)。裝飾材料商城后臺主要用于商城本身的管理，如商家人住、商品信息維護(hù)、訂單管理等，采用計算機(jī)操作方式要比在移動端快速、便捷，所以仍用jsp頁面管理操作界面。

3系統(tǒng)模塊設(shè)計

3.1裝飾材料商城設(shè)計

裝飾材料是客戶室內(nèi)裝修材料的來源，裝飾材料圖片也是軟裝設(shè)計師進(jìn)行設(shè)計的基礎(chǔ)。裝飾材料商品包括以下屬性：商品編號、商品名稱、商品型號、商品品牌、商品顏色、大小規(guī)格、商品單價、商品材料、商品類型、商品圖片等。商圖片為了在軟裝設(shè)計時使用，每種商品最多可具前、后、左、右、左前、右前、左后、右后等8個方向的圖片。

裝飾材料商城主要有以下功能：商家管理、商品信息管理、物流管理、訂單管理、購物管理、計費(fèi)管理等。商家管理用于商家人住、商家資料管理、商家訂單管理、商家管理人員的管理。商品信息管理由商家管理人員完成，用于發(fā)布商品、修改商品、商品下架、發(fā)布優(yōu)惠活動信息等。物流管理主要對物流公司資料管理、接單管理、物流查詢等。訂單管理用于管理訂單明細(xì)、訂單通知、訂單支付、訂單狀態(tài)、訂單成交、訂單撤消、訂單查詢等。購物管理用于商品瀏覽查詢、購物車的管理。計費(fèi)管理用于對商家計費(fèi)，通常按月交易額計算。

3.2軟裝設(shè)計模塊設(shè)計

軟裝設(shè)計模塊分為移動前端一軟裝設(shè)計App和服務(wù)器端。軟裝設(shè)計App通過PhoneGap框架打包，可安裝到Android平臺和ios平臺的平板電腦。軟裝設(shè)計App為設(shè)計師使用，App通過互聯(lián)網(wǎng)和服務(wù)器端相連，在設(shè)計過程中瀏覽選擇所需要的材料圖片信息，均由服務(wù)器取得。

在軟裝設(shè)計模塊中，軟裝設(shè)計師應(yīng)用商城中提供的材料商品圖片進(jìn)行家居軟裝飾設(shè)計，在設(shè)計過程中，可與用戶實時交流設(shè)計方案，根據(jù)用戶的意見對方案進(jìn)行修改，最后生成軟裝設(shè)計方案。設(shè)計方案由效果圖和裝飾材料、材料成本等組成。軟裝設(shè)計模塊主要功能有軟裝設(shè)計和頁面即時通訊。endprint

3.2.1軟裝設(shè)計

軟裝設(shè)計是本模塊最重要的功能，設(shè)計過程為：①查詢用戶裝修申請，確定用戶戶型、用戶偏好顏色、風(fēng)格。②接受用戶申請后，在進(jìn)入軟裝設(shè)計頁面，開啟方案設(shè)計，設(shè)置裝修材料的選擇條件。③在設(shè)計時，瀏覽相關(guān)裝飾材料商品，選擇合適的商品圖片并拖動到設(shè)計視圖中，在視圖中可對選取圖片，刪除圖片，調(diào)整圖片的位置、圖層及縮放、旋轉(zhuǎn)、鏡像、復(fù)制等操作。在選擇商品圖片后，把圖片信息保存到j(luò)son對象中，這些信息包括圖片編號、名稱、URL和圖片的CSS樣式以及對應(yīng)的商品信息。對圖片做操作后，要更新json對象中該圖片的CSS樣式信息。④重復(fù)第③步，直到達(dá)到理想的家居裝飾效果。⑤從第④步中json對象取出數(shù)據(jù)，使用html5 canvas控件創(chuàng)建效果圖，生成設(shè)計方案。保存json對象和效果圖、設(shè)計方案。⑥發(fā)送效果圖和方案中材料商品總金額給客戶，與用戶交流意見。⑦如果用戶不滿意，重新進(jìn)入設(shè)計視圖，載入json對象，恢復(fù)到上次設(shè)計狀態(tài)，進(jìn)入到步驟③；如果用戶滿意，設(shè)計師提交設(shè)計方案和效果圖，設(shè)計過程結(jié)束。

在設(shè)計過程中，關(guān)鍵在于圖片的操作。移動設(shè)備中需用手勢來調(diào)整圖片，HTML5本身的手勢操作復(fù)雜，所以系統(tǒng)應(yīng)用了hammer.js，hammer.js是一個多點觸摸手勢庫，能夠為網(wǎng)頁加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多點觸摸事件。在圖片操作時，只需把圖片綁定到hammer.js對象上，然后定義手勢觸摸事件的處理函數(shù)，在函數(shù)中對圖片的CSS樣式做修改，從而實現(xiàn)圖片的操作。保存設(shè)計為效果圖時，應(yīng)用HTML5的Canvas元素來實現(xiàn)，Canvas支持2d形狀和圖片的繪制，對于圖片可實現(xiàn)縮放、通過坐標(biāo)轉(zhuǎn)換能實現(xiàn)圖片平移和旋轉(zhuǎn)。在繪制效果圖時，從json對象中取出圖片，按圖片圖層（用CSS中的zindex表示）順序從小到大分別繪制。所有圖片繪制好之后，效果圖也就完成了。

3.2.2頁面即時通訊

客戶和設(shè)計師之間的頁面即時通信對于設(shè)計師和客戶之間的交流十分重要，一方面，設(shè)計過程中客戶對設(shè)計方案提出修改意見，設(shè)計師及時修改，從而提高了工作效率。另一方面，客戶參與了設(shè)計過程，客戶對設(shè)計方案的認(rèn)同感會提高，讓客戶更加滿意，提高了客戶的體驗。頁面即時通信是基于Ajax技術(shù)實現(xiàn)，頁面實現(xiàn)了發(fā)送數(shù)據(jù)和接收數(shù)據(jù)的方法，需要發(fā)送數(shù)據(jù)時，指定接收數(shù)據(jù)的用戶ID，添加要發(fā)送的消息并發(fā)送到服務(wù)器，服務(wù)器接收后，保存到數(shù)據(jù)庫。接收消息采用了長輪詢的方式，頁面向服務(wù)器發(fā)出取得數(shù)據(jù)的請求，服務(wù)器啟動serv-let線程，如果數(shù)據(jù)庫沒有新數(shù)據(jù)，則線程進(jìn)人等待狀態(tài)，每隔一段時間查詢一次數(shù)據(jù)，直到有新的數(shù)據(jù)到達(dá)后或超時返回，結(jié)束連接。頁面接收到服務(wù)器返回的消息后，處理數(shù)據(jù)后，重新向服務(wù)器發(fā)送接收數(shù)據(jù)的請求，進(jìn)行下一輪的請求。

3.3客戶模塊設(shè)計

客戶模塊主要有以下功能：瀏覽優(yōu)秀軟裝設(shè)計效果圖、軟裝設(shè)計管理、即時通信、材料商城、購物車管理、訂單管理等。瀏覽優(yōu)秀軟裝設(shè)計效果圖可為用戶選擇自己喜歡家居軟裝的風(fēng)格和顏色，在設(shè)計申請時可提交給軟裝設(shè)計師，使設(shè)計方案更符合自己期望。軟裝設(shè)計管理分為軟件設(shè)計師信息瀏覽，軟裝設(shè)計申請、軟裝設(shè)計方案支付等，客戶可先瀏覽設(shè)計師信息及其相關(guān)作品，再決定向哪個設(shè)計師申請軟裝設(shè)計，當(dāng)軟裝設(shè)計方案完成后，支付設(shè)計師的設(shè)計費(fèi)用?？蛻艨筛鶕?jù)設(shè)計方案，一鍵直接生成訂單或把方案中的商品全部添加到購物車。即時通信功能用于客戶和設(shè)計師或客戶與商家交流。材料商城提供了客戶查詢、瀏覽裝飾材料商品功能、商品添加到購物車。購物車管理允許客戶對購物車中的商品查詢、刪除、修改數(shù)量、結(jié)算等。訂單管理可查詢訂單狀態(tài)，訂單支付，查看訂單物流。

4結(jié)束語

論文對軟裝設(shè)計系統(tǒng)進(jìn)行了研究和設(shè)計，把軟裝設(shè)計、客戶和裝飾材料商城結(jié)合起來，為用戶提供了很好的一站式服務(wù)。系統(tǒng)應(yīng)用了移動端web技術(shù)實現(xiàn)軟裝設(shè)計和客戶模塊的App，對軟裝設(shè)計的關(guān)鍵技術(shù)進(jìn)行了闡述。系統(tǒng)利用移動互聯(lián)的優(yōu)勢，能方便設(shè)計師工作，提高設(shè)計的效率，也為客戶提供了較好的體驗。endprint