移動端原型設計利器-UIDesigner 3.0架構設計總結

0 評論 12704 瀏覽 6 收藏 9 分鐘

UIDesigner是騰訊用戶研究與體驗設計部(CDC)設計研發的一款設計類軟件,打造一款可以讓設計師統一平臺和團隊協作的平臺型設計工具,經過1.0和2.0版本的經驗沉淀,我們決定對3.0版本進行全新的架構設計。

開發一個軟件系統,前期的架構設計承載著整個軟件的設計思想和關鍵決策,可以說是重中之重。

根據軟件架構設計思想,關注分割和交互,好的架構必須使每個關注點相互分離。我們進行了最基本的需求分析,得出兩個關注點:一是工具,二是設計繪圖,關系如圖1所示。

得到最基本的兩個關注點后,接著將提取關鍵需求(包括:關鍵功能需求、關鍵質量需求和關鍵商業需求),根據兩個關注點進行架構的細化設計。

一、關注點——工具

這里我們結合UIDesigner的實際需求,提取出屬于“工具”范疇的關鍵功能需求、關鍵質量需求和關鍵商業需求。

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

其次,“工具”的關鍵質量需求,質量需求包括開發期質量需求和運行期質量需求兩部分,經過分析和權衡,UIDesigner的性能主要取決于設計繪圖,而穩定性、可擴展性和可維護性才是決定“工具”本身發展的質量需求,因此,對“工具”的質量需求設計將以穩定性、可擴展性和可維護性為主。

最后,“工具”的關鍵商業需求,因為UIDesigner本身并沒有很復雜的業務需求,因此關鍵商業需求是在設計流程的優化和規范上得到體現,這方面的設計已經屬于高層模塊和使用流程的設計,對架構的影響非常小,可以暫時性的忽略。

經過關鍵需求的提取,我們得到了“工具”的設計目標——可以提供通用功能(關鍵功能需求)的高穩定性、擴展性和維護性的客戶端應用。根據此目標,我們采取了DI(Dependency-Injection)和MVP(Model-View-Presenter)結合的架構,概念架構設計如圖2所示。

02

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

2、定義集成了關鍵功能需求的PlatformService,并在BasePresenter中提供PlatformService的服務調用,這樣每個功能模塊都可以使用通用的關鍵功能。

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

二、關注點——設計繪圖

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

我們對繪制引擎框架進行細化分割,分離出三個關注點:圖元、畫板、輔助組件。

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

03

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

04

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

三、架構驗證和后續開發

在概念架構設計出來后,我們對核心進行了進一步的細化設計,然后對設計的架構進行驗證。為了達到敏捷開發和節省時間成本,結合設計的架構,我們最終選擇了垂直演進型原型進行架構的驗證和后續開發。

因為架構本身是基于DI(Dependency-Injection),是非常符合垂直架構設計的一種架構模式,因此我們搭建了簡單的基礎核心(只有核心模塊,沒有其他業務流程功能模塊)和簡易的繪制引擎框架實現了原型。

通過對原型的測試和驗證,確定此架構滿足我們的預期。在此原型的基礎上,繼續完善核心和繪制引擎框架,并且規劃后續的業務功能,根據業務功能插件,可以合理的安排項目進度,最終按照計劃順利完成開發和測試。

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

因為各種原因,在此架構之下,仍有一些細節需要在后續的開發和維護中進行進一步的深入,如:本地數據的存儲、用戶數據安全、客戶端程序的進程安全和網絡通信機制的優化等。

隨著軟件的不斷演進,功能越來越多,復雜度越來越高,架構也在不斷的磨損,我們需要不斷的重構和細節改進,直到主體架構不能完成關鍵的核心需求(包括關鍵功能需求、關鍵質量需求和關鍵商業需求)時,再進行大改進。

PS:后續放出3.0體驗地址,敬請期待。。。

來源:騰訊CDC

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!