基于Android/ios平臺(tái)的室內(nèi)軟裝系統(tǒng)的研究

鐘黎明　吳昌錢

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

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

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

1背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.2.1軟裝設(shè)計(jì)

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

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

3.2.2頁面即時(shí)通訊

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

3.3客戶模塊設(shè)計(jì)

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

4結(jié)束語

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