Ant Design React 布局

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

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

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

統(tǒng)一畫(huà)板

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

適配

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

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

一、左右布局的適配方案

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

二、上下布局的適配方案

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

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

網(wǎng)格單位

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

關(guān)于柵格

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

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

Ant Design 的設(shè)計(jì)師通過(guò) 4 點(diǎn)來(lái)實(shí)現(xiàn)設(shè)計(jì)過(guò)程中和工程師的溝通：

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

常用模度

螞蟻中后臺(tái)涵蓋了大量的不同類(lèi)型和量級(jí)的產(chǎn)品，為了幫助不同設(shè)計(jì)能力的設(shè)計(jì)者們?cè)诮缑娌季稚系囊恢滦院晚嵚筛?，統(tǒng)一設(shè)計(jì)到開(kāi)發(fā)的布局語(yǔ)言，減少還原損耗，Ant Design 提出了 UI 模度的概念。在大量的實(shí)踐中，我們提取了一組可以用于 UI 布局空間決策的數(shù)組，他們都保持了 8 倍數(shù)的原則、具備動(dòng)態(tài)的韻律感。經(jīng)過(guò)驗(yàn)證，可以在一定程度上幫助我們更快更好的實(shí)現(xiàn)布局空間上的設(shè)計(jì)決策。

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

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