UIDesigner是騰訊用戶研究與體驗設(shè)計部（CDC）設(shè)計研發(fā)的一款設(shè)計類軟件，打造一款可以讓設(shè)計師統(tǒng)一平臺和團隊協(xié)作的平臺型設(shè)計工具，經(jīng)過1.0和2.0版本的經(jīng)驗沉淀，我們決定對3.0版本進行全新的架構(gòu)設(shè)計。

開發(fā)一個軟件系統(tǒng)，前期的架構(gòu)設(shè)計承載著整個軟件的設(shè)計思想和關(guān)鍵決策，可以說是重中之重。

根據(jù)軟件架構(gòu)設(shè)計思想，關(guān)注分割和交互，好的架構(gòu)必須使每個關(guān)注點相互分離。我們進行了最基本的需求分析，得出兩個關(guān)注點：一是工具，二是設(shè)計繪圖，關(guān)系如圖1所示。

得到最基本的兩個關(guān)注點后，接著將提取關(guān)鍵需求（包括：關(guān)鍵功能需求、關(guān)鍵質(zhì)量需求和關(guān)鍵商業(yè)需求），根據(jù)兩個關(guān)注點進行架構(gòu)的細化設(shè)計。

一、關(guān)注點——工具

這里我們結(jié)合UIDesigner的實際需求，提取出屬于“工具”范疇的關(guān)鍵功能需求、關(guān)鍵質(zhì)量需求和關(guān)鍵商業(yè)需求。

首先，“工具”的關(guān)鍵功能需求，必須包括：磁盤文件讀寫、異常捕捉、日志記錄、安全性管理；非工具所必須，但是UIDesigner本身所要求的，包括：配置管理、緩存管理、線程服務(wù)、服務(wù)器和客戶端通訊管理、國際化服務(wù)。

其次，“工具”的關(guān)鍵質(zhì)量需求，質(zhì)量需求包括開發(fā)期質(zhì)量需求和運行期質(zhì)量需求兩部分，經(jīng)過分析和權(quán)衡，UIDesigner的性能主要取決于設(shè)計繪圖，而穩(wěn)定性、可擴展性和可維護性才是決定“工具”本身發(fā)展的質(zhì)量需求，因此，對“工具”的質(zhì)量需求設(shè)計將以穩(wěn)定性、可擴展性和可維護性為主。

最后，“工具”的關(guān)鍵商業(yè)需求，因為UIDesigner本身并沒有很復(fù)雜的業(yè)務(wù)需求，因此關(guān)鍵商業(yè)需求是在設(shè)計流程的優(yōu)化和規(guī)范上得到體現(xiàn)，這方面的設(shè)計已經(jīng)屬于高層模塊和使用流程的設(shè)計，對架構(gòu)的影響非常小，可以暫時性的忽略。

經(jīng)過關(guān)鍵需求的提取，我們得到了“工具”的設(shè)計目標——可以提供通用功能（關(guān)鍵功能需求）的高穩(wěn)定性、擴展性和維護性的客戶端應(yīng)用。根據(jù)此目標，我們采取了DI（Dependency-Injection）和MVP（Model-View-Presenter）結(jié)合的架構(gòu)，概念架構(gòu)設(shè)計如圖2所示。

1、將上層功能進行模塊劃分，每個模塊內(nèi)部都依賴于MVP架構(gòu)，通過Model（繼承至BaseModel）定義和注冊模塊，通過觀察者模式，每個模塊的View都可以通過Presenter（繼承至BasePresenter）進行消息的發(fā)布和訂閱，進行模塊間的通信和交互。

2、定義集成了關(guān)鍵功能需求的PlatformService，并在BasePresenter中提供PlatformService的服務(wù)調(diào)用，這樣每個功能模塊都可以使用通用的關(guān)鍵功能。

3、為PlatformService的服務(wù)定義接口，根據(jù)關(guān)鍵功能需求，得到多個服務(wù)的接口，將定義和實現(xiàn)相分離，實現(xiàn)部分作為一個特殊的功能模塊（核心模塊，必須存在），集成到系統(tǒng)本身，方便前期的驗證和后期的擴展和維護。 屬于“工具”這個關(guān)注點的架構(gòu)就已經(jīng)設(shè)計好了，具體的上層功能模塊將在后續(xù)的開發(fā)中，根據(jù)需求一個一個模塊的來完成，每個模塊之間不會有任何依賴關(guān)系（開發(fā)時），缺少某個或多個功能模塊的時候，軟件依然可以穩(wěn)定的運行起來。

二、關(guān)注點——設(shè)計繪圖

UIDesigner是為設(shè)計師打造的設(shè)計工具，其最核心的功能需求當(dāng)然就是設(shè)計繪圖了，這一塊也是變化最多的。根據(jù)隔離變化點的原則，我們將這一塊設(shè)計為繪制引擎框架，通過框架，為“工具”部分提供繪制相關(guān)的支持。

我們對繪制引擎框架進行細化分割，分離出三個關(guān)注點：圖元、畫板、輔助組件。

首先，圖元是可以通過定義進而展示出自身的基礎(chǔ)元件，由基礎(chǔ)屬性和基礎(chǔ)繪制接口兩部分組成，其中基礎(chǔ)繪制接口的定義和實現(xiàn)分離，這樣可以方便后期的擴展，特別是在性能改進方面發(fā)揮重要作用。概念設(shè)計如圖3所示。

其次，畫板作為各種圖元集合的容器，支持對各種圖元的操控和定位，被分為三層：點擊測試層、圖元設(shè)計器管理層和圖元繪制層。概念設(shè)計如圖4所示。

最后，輔助組件分為標尺、輔助線、全局縮略圖、遮罩裝飾器和自動對齊線等，這些輔助組件都依賴于畫板而存在。

三、架構(gòu)驗證和后續(xù)開發(fā)

在概念架構(gòu)設(shè)計出來后，我們對核心進行了進一步的細化設(shè)計，然后對設(shè)計的架構(gòu)進行驗證。為了達到敏捷開發(fā)和節(jié)省時間成本，結(jié)合設(shè)計的架構(gòu)，我們最終選擇了垂直演進型原型進行架構(gòu)的驗證和后續(xù)開發(fā)。

因為架構(gòu)本身是基于DI（Dependency-Injection），是非常符合垂直架構(gòu)設(shè)計的一種架構(gòu)模式，因此我們搭建了簡單的基礎(chǔ)核心（只有核心模塊，沒有其他業(yè)務(wù)流程功能模塊）和簡易的繪制引擎框架實現(xiàn)了原型。

通過對原型的測試和驗證，確定此架構(gòu)滿足我們的預(yù)期。在此原型的基礎(chǔ)上，繼續(xù)完善核心和繪制引擎框架，并且規(guī)劃后續(xù)的業(yè)務(wù)功能，根據(jù)業(yè)務(wù)功能插件，可以合理的安排項目進度，最終按照計劃順利完成開發(fā)和測試。

四、后期仍待改進的一些地方

因為各種原因，在此架構(gòu)之下，仍有一些細節(jié)需要在后續(xù)的開發(fā)和維護中進行進一步的深入，如：本地數(shù)據(jù)的存儲、用戶數(shù)據(jù)安全、客戶端程序的進程安全和網(wǎng)絡(luò)通信機制的優(yōu)化等。

隨著軟件的不斷演進，功能越來越多，復(fù)雜度越來越高，架構(gòu)也在不斷的磨損，我們需要不斷的重構(gòu)和細節(jié)改進，直到主體架構(gòu)不能完成關(guān)鍵的核心需求（包括關(guān)鍵功能需求、關(guān)鍵質(zhì)量需求和關(guān)鍵商業(yè)需求）時，再進行大改進。

PS：后續(xù)放出3.0體驗地址，敬請期待。。。

來源：騰訊CDC