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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、后期仍待改進(jìn)的一些地方

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

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

PS：后續(xù)放出3.0體驗(yàn)地址，敬請(qǐng)期待。。。

來(lái)源：騰訊CDC