Ant Design React 布局

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

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

1. 統(tǒng)一的畫板尺寸
2. 適配方案
3. 網(wǎng)格單位
4. 柵格
5. 常用模度

統(tǒng)一畫板

為了盡可能減少溝通與理解的成本，有必要在組織內(nèi)部統(tǒng)一設(shè)計板的尺寸。螞蟻中臺設(shè)計團(tuán)隊統(tǒng)一的畫板尺寸為 1440。

適配

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

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

一、左右布局的適配方案

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

二、上下布局的適配方案

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

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

網(wǎng)格單位

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

關(guān)于柵格

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

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

Ant Design 的設(shè)計師通過 4 點來實現(xiàn)設(shè)計過程中和工程師的溝通：

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

常用模度

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

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

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