基于Android/ios平臺的室內軟裝系統的研究

鐘黎明　吳昌錢

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

關鍵詞：Android；ios；軟裝；軟裝設計；移動互聯

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2017）18-0066-02

1背景

室內軟裝設計，即軟裝修、軟裝飾。區別于傳統“硬裝”的室內裝飾形式，其是在室內墻面、頂面、地面完成一次空間建構的基礎上，使用可以隨時更換的花瓶、陶器、書畫、綠植、地毯、布藝等進行的二次空間裝飾。

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

2系統總體結構

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

整個系統可分為移動前端和服務器端兩部分，系統架構如圖1所示。

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

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

3系統模塊設計

3.1裝飾材料商城設計

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

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

3.2軟裝設計模塊設計

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

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

3.2.1軟裝設計

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

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

3.2.2頁面即時通訊

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

3.3客戶模塊設計

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

4結束語

論文對軟裝設計系統進行了研究和設計，把軟裝設計、客戶和裝飾材料商城結合起來，為用戶提供了很好的一站式服務。系統應用了移動端web技術實現軟裝設計和客戶模塊的App，對軟裝設計的關鍵技術進行了闡述。系統利用移動互聯的優勢，能方便設計師工作，提高設計的效率，也為客戶提供了較好的體驗。endprint