一、引言

由于工作的关系对于 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 时，会发现按钮只有四种类型，而不是用颜色区分。

button.png

从开发者的角度而言，无须关注我应该如何选择何种颜色才能够更好的表达按钮的作用，转而从按钮的作用上来区分，相比较而言开发者更清楚业务本身，这比选择颜色容易得多、更统一风格。

Ant Design 的设计原则系列文章会让我们对UI有一种全新的认知，因此推荐不管前后端都应该好好阅读它们。

三、实践

1、栅格系统

Ant Design 采用的是24栅格系统，相比较12栅格对于大量信息收纳解决收纳的问题。

然而我想提的是 [nzGutter] 栅格间距属性，其值是固定的，不受响应式影响。

Ant Design 是以一个 (8 * n)px 为基准（n自然数），不管是横、纵之间的间距都是依此为计算方式。

对于企业后台，以 8px、16px、24px 来表达小、中、大三种不规格即合适、又刚好。

grid.png

当我们很熟悉这种规则的话，构建一个『以人为本』页面，简直就是信手拈来。

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!