一、引言
由于工作的关系对于 React 并没有过度的深入，因此对 Ant Design 并无太多了解。当然也是因为工作中存在大量的 Angular 项目，后来 ng-zorro-antd 的发布引起我极大的关注。
当我决定基于 ng-zorro-antd 发布一款企业后台管理模板 ng-alain 之前，我深深被 Ant Design 这个 UI 设计语言吸引住了。
以下是我对 Ant Design 的理解做一下总结，其本质上是不分 Angular 还是 React 的，但示例依然以 Angular 为准。
二、阅读指引
私以为不管前后端都应该好好阅读一下 Ant Design 指引系列文章。
Ant Design 践行『以人为本』的设计理念。
在一个传统列表页面，会出现很多按钮，可能包括：添加、搜索、批量操作按钮组等，这是一个非常复杂的结构，然而用户实际高频率操作的可能只有一个；而突出这类按钮的方法，不一定要强化按钮的视觉，也可以弱化其他按钮的视觉，从而达到高频率操作项。
因此在实践 ng-zorro-antd 时，会发现按钮只有四种类型，而不是用颜色区分。
从开发者的角度而言，无须关注我应该如何选择何种颜色才能够更好的表达按钮的作用，转而从按钮的作用上来区分，相比较而言开发者更清楚业务本身，这比选择颜色容易得多、更统一风格。
Ant Design 的设计原则系列文章会让我们对UI有一种全新的认知，因此推荐不管前后端都应该好好阅读它们。
三、实践
1、栅格系统
Ant Design 采用的是24栅格系统，相比较12栅格对于大量信息收纳解决收纳的问题。
然而我想提的是 [nzGutter] 栅格间距属性，其值是固定的，不受响应式影响。
Ant Design 是以一个 (8 * n)px 为基准（n自然数），不管是横、纵之间的间距都是依此为计算方式。
对于企业后台，以 8px、16px、24px 来表达小、中、大三种不规格即合适、又刚好。
当我们很熟悉这种规则的话，构建一个『以人为本』页面，简直就是信手拈来。
2、布局视觉
整体布局
从 ng-zorro-antd 默认的设计规则，有几个规则：
- 顶部导航（大部分系统）：一级导航高度
64px，二级导航48px。 - 顶部导航（展示类页面）：一级导航高度
80px，二级导航56px。 - 顶部导航高度的范围计算公式为：
48+8n。 - 侧边导航宽度的范围计算公式：
200+8n。
ng-alain 就是基于这种设计规则的一次很好实践。
页面布局
我们来看页面布局，这一点相对于开发人员更值得看。当然，Antd Design 也提供一些默认规则：
- 网站展示页和 Dashboard 的 Gutter 宽度为
24px。 - 列表、表格、详情和表单页面的 Gutter 宽度为
16px。
对，没错，布局讲究的是间距。当然我们不一定要按照这种规则，但一定要遵守 (8 * n)px 基数。
以 ng-alain 为例。不同区域块（大量的 nz-card 组件）间以中间距（16px）间隔，表格区域与项操作区域以小间距（8px）间隔。
遵守这种间隔很容易在小组中得到统一规范，也无须介绍过多。
3、字号
ng-zorro-antd 遵循的是 React 版本，因此默认字号是以 12px 计，其实这一点我非常奇怪，因为从Ant Design指引中明确表述默认字号为 12pt，而转成 px 其实差不多应该是 16px 左右。
而这个问题我问过 ng-zorro-antd 团队也没有得到一很好的答案。
当然，更让我好奇的是竟然没有使用一种相对单位（即：rem、em）。
以 Angular 版本的 Ant Design 来讲说，最可惜的是当下 ng-zorro-antd 的设计，很难去改变它，除非自己Fork一份源代码，并修改其默认主题字号参数。
四、总结
其实细心阅读 Ant Design 指引系列文章 压根也不需要这篇文章了。
不管怎么样，罗里吧嗦一大堆。
如果你在 Angular 中入坑，对 Ant Design 也很有好感的情况下，下列两个工具可能会帮你做很多简化：
- vscode ng-zorro-vscode 代码片断
- ng-alain 企业后台模板脚手架。
Happy coding!
