一、引言
由于工作的關(guān)系對(duì)于 React 并沒(méi)有過(guò)度的深入，因此對(duì) Ant Design 并無(wú)太多了解。當(dāng)然也是因?yàn)楣ぷ髦写嬖诖罅康?Angular 項(xiàng)目岩四，后來(lái) ng-zorro-antd 的發(fā)布引起我極大的關(guān)注。
當(dāng)我決定基于 ng-zorro-antd 發(fā)布一款企業(yè)后臺(tái)管理模板 ng-alain 之前哥攘，我深深被 Ant Design 這個(gè) UI 設(shè)計(jì)語(yǔ)言吸引住了剖煌。
以下是我對(duì) Ant Design 的理解做一下總結(jié)，其本質(zhì)上是不分 Angular 還是 React 的逝淹，但示例依然以 Angular 為準(zhǔn)耕姊。
二、閱讀指引
私以為不管前后端都應(yīng)該好好閱讀一下 Ant Design 指引系列文章栅葡。
Ant Design 踐行『以人為本』的設(shè)計(jì)理念茉兰。
在一個(gè)傳統(tǒng)列表頁(yè)面，會(huì)出現(xiàn)很多按鈕欣簇，可能包括：添加规脸、搜索、批量操作按鈕組等熊咽，這是一個(gè)非常復(fù)雜的結(jié)構(gòu)莫鸭，然而用戶實(shí)際高頻率操作的可能只有一個(gè)；而突出這類按鈕的方法横殴，不一定要強(qiáng)化按鈕的視覺(jué)被因，也可以弱化其他按鈕的視覺(jué)，從而達(dá)到高頻率操作項(xiàng)衫仑。
因此在實(shí)踐 ng-zorro-antd 時(shí)梨与，會(huì)發(fā)現(xiàn)按鈕只有四種類型，而不是用顏色區(qū)分文狱。
從開(kāi)發(fā)者的角度而言粥鞋，無(wú)須關(guān)注我應(yīng)該如何選擇何種顏色才能夠更好的表達(dá)按鈕的作用，轉(zhuǎn)而從按鈕的作用上來(lái)區(qū)分瞄崇，相比較而言開(kāi)發(fā)者更清楚業(yè)務(wù)本身陷虎，這比選擇顏色容易得多到踏、更統(tǒng)一風(fēng)格。
Ant Design 的設(shè)計(jì)原則系列文章會(huì)讓我們對(duì)UI有一種全新的認(rèn)知尚猿，因此推薦不管前后端都應(yīng)該好好閱讀它們。
三楣富、實(shí)踐
1凿掂、柵格系統(tǒng)
Ant Design 采用的是24柵格系統(tǒng)，相比較12柵格對(duì)于大量信息收納解決收納的問(wèn)題纹蝴。
然而我想提的是 [nzGutter] 柵格間距屬性庄萎，其值是固定的，不受響應(yīng)式影響塘安。
Ant Design 是以一個(gè) (8 * n)px 為基準(zhǔn)（n自然數(shù)）糠涛，不管是橫、縱之間的間距都是依此為計(jì)算方式兼犯。
對(duì)于企業(yè)后臺(tái)忍捡，以 8px、16px切黔、24px 來(lái)表達(dá)小砸脊、中、大三種不規(guī)格即合適纬霞、又剛好凌埂。
當(dāng)我們很熟悉這種規(guī)則的話，構(gòu)建一個(gè)『以人為本』頁(yè)面诗芜，簡(jiǎn)直就是信手拈來(lái)瞳抓。
2、布局視覺(jué)
整體布局
從 ng-zorro-antd 默認(rèn)的設(shè)計(jì)規(guī)則伏恐，有幾個(gè)規(guī)則：
- 頂部導(dǎo)航（大部分系統(tǒng)）：一級(jí)導(dǎo)航高度
64px孩哑，二級(jí)導(dǎo)航48px。 - 頂部導(dǎo)航（展示類頁(yè)面）：一級(jí)導(dǎo)航高度
80px脐湾，二級(jí)導(dǎo)航56px臭笆。 - 頂部導(dǎo)航高度的范圍計(jì)算公式為：
48+8n。 - 側(cè)邊導(dǎo)航寬度的范圍計(jì)算公式：
200+8n秤掌。
ng-alain 就是基于這種設(shè)計(jì)規(guī)則的一次很好實(shí)踐愁铺。
頁(yè)面布局
我們來(lái)看頁(yè)面布局，這一點(diǎn)相對(duì)于開(kāi)發(fā)人員更值得看闻鉴。當(dāng)然茵乱，Antd Design 也提供一些默認(rèn)規(guī)則：
- 網(wǎng)站展示頁(yè)和 Dashboard 的 Gutter 寬度為
24px。 - 列表孟岛、表格瓶竭、詳情和表單頁(yè)面的 Gutter 寬度為
16px督勺。
對(duì)，沒(méi)錯(cuò)斤贰，布局講究的是間距智哀。當(dāng)然我們不一定要按照這種規(guī)則，但一定要遵守 (8 * n)px 基數(shù)荧恍。
以 ng-alain 為例瓷叫。不同區(qū)域塊（大量的 nz-card 組件）間以中間距（16px）間隔，表格區(qū)域與項(xiàng)操作區(qū)域以小間距（8px）間隔送巡。
遵守這種間隔很容易在小組中得到統(tǒng)一規(guī)范摹菠，也無(wú)須介紹過(guò)多。
3骗爆、字號(hào)
ng-zorro-antd 遵循的是 React 版本次氨，因此默認(rèn)字號(hào)是以 12px 計(jì)，其實(shí)這一點(diǎn)我非常奇怪摘投，因?yàn)閺腁nt Design指引中明確表述默認(rèn)字號(hào)為 12pt煮寡，而轉(zhuǎn)成 px 其實(shí)差不多應(yīng)該是 16px 左右。
而這個(gè)問(wèn)題我問(wèn)過(guò) ng-zorro-antd 團(tuán)隊(duì)也沒(méi)有得到一很好的答案谷朝。
當(dāng)然洲押，更讓我好奇的是竟然沒(méi)有使用一種相對(duì)單位（即：rem、em）圆凰。
以 Angular 版本的 Ant Design 來(lái)講說(shuō)杈帐，最可惜的是當(dāng)下 ng-zorro-antd 的設(shè)計(jì)，很難去改變它专钉，除非自己Fork一份源代碼挑童，并修改其默認(rèn)主題字號(hào)參數(shù)。
四跃须、總結(jié)
其實(shí)細(xì)心閱讀 Ant Design 指引系列文章 壓根也不需要這篇文章了站叼。
不管怎么樣，羅里吧嗦一大堆菇民。
如果你在 Angular 中入坑尽楔，對(duì) Ant Design 也很有好感的情況下，下列兩個(gè)工具可能會(huì)幫你做很多簡(jiǎn)化：
- vscode ng-zorro-vscode 代碼片斷
- ng-alain 企業(yè)后臺(tái)模板腳手架第练。
Happy coding!
