空間布局是體系化視覺設計的起點，和傳統的平面設計的不同之處在于，UI 界面的布局空間要基于「動態(tài)、體系化」的角度出發(fā)展開。我們受到建筑界大師柯布西耶的模度思想的啟發(fā)，基于「秩序之美」的原則，探索 UI 設計中的動態(tài)空間秩序，形成了 Ant Design 的界面布局方式，為設計者構筑具備理性之美的布局空間創(chuàng)造了條件。

在中后臺視覺體系中定義布局系統，我們建議從 5 個方面出發(fā)：

1. 統一的畫板尺寸
2. 適配方案
3. 網格單位
4. 柵格
5. 常用模度

統一畫板

為了盡可能減少溝通與理解的成本，有必要在組織內部統一設計板的尺寸。螞蟻中臺設計團隊統一的畫板尺寸為 1440。

適配

在設計過程中，設計師還需要建立適配的概念，根據具體情況判斷系統是否需要進行適配，以及哪些區(qū)塊需要考慮動態(tài)布局。據統計，使用中臺系統的用戶的主流分辨率主要為 1920、1440 和 1366，個別系統還存在 1280 的顯示設備。

Ant Design 兩種較為典型的適配方案：

一、左右布局的適配方案

常被用于左右布局的設計方案中，常見的做法是將左邊的導航欄固定，對右邊的工作區(qū)域進行動態(tài)縮放。

二、上下布局的適配方案

常被用于上下布局的設計方案中，做法是對兩邊留白區(qū)域進行最小值的定義，當留白區(qū)域到達限定值之后再對中間的主內容區(qū)域進行動態(tài)縮放。

這里提及的只是非常簡單的兩種適配的思路，實際設計中一套完美的適配方案需要設計師具備前端視角、平面構圖視角以及交互視角。

網格單位

Ant Design 通過網格體系來實現視覺體系的秩序。網格的基數為 8，不僅符合偶數的思路同時能夠匹配多數主流的顯示設備。通過建立網格的思考方式，還能幫助設計者快速實現布局空間的設計決策同時也能簡化設計到開發(fā)的溝通損耗。

關于柵格

Ant Design 采用 24 柵格體系。以上下布局的結構為例，對內容區(qū)域進行 24 柵格的劃分設置，如下圖所示。我們?yōu)轫撁嬷袞鸥竦?Gutter 設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的 Column 寬度會隨之擴大或縮小，但 Gutter 的寬度值固定不變。

對開發(fā)者而言柵格是實現動態(tài)布局的手段，而設計師對于柵格的理解源自平面設計中的柵格。在具體落地中視角的不同就容易造成偏差，最終影響還原度，繼而增加溝通成本。

Ant Design 的設計師通過 4 點來實現設計過程中和工程師的溝通：

1. 清晰的定義動態(tài)布局范圍
2. 盡量保持偶數思維
3. 關鍵數據的交付（Gutter、Column）
4. 區(qū)塊的定義要從 column 開始到 column 結束

常用模度

螞蟻中后臺涵蓋了大量的不同類型和量級的產品，為了幫助不同設計能力的設計者們在界面布局上的一致性和韻律感，統一設計到開發(fā)的布局語言，減少還原損耗，Ant Design 提出了 UI 模度的概念。在大量的實踐中，我們提取了一組可以用于 UI 布局空間決策的數組，他們都保持了 8 倍數的原則、具備動態(tài)的韻律感。經過驗證，可以在一定程度上幫助我們更快更好的實現布局空間上的設計決策。

是啟發(fā)，而非限制

Ant Design 在布局空間上的成果并非要限制設計產出，更多的在于引導設計者如何做到「更好」。8 倍數的雙數組通過排列組合的方式可以形成千變萬化種可能性，但在無限的可能性之中依然存在著「只是簡單的套用數據組合」同「看起來很精妙」的差別。實現合理優(yōu)雅的界面布局，在對美感的追求之上，還應當結合可用性來看待，對于企業(yè)級應用界面布局的探索，我們依然在路上。