脚本宝典收集整理的这篇文章主要介绍了

我所认知的 ANT DESIGN

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

一、引言

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

clipboard.png

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

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

三、实践

1、栅格系统

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

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

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

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

clipboard.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 团队也没有得到一很好的答案。

当然,更让我好奇的是竟然没有使用一种相对单位(即:remem)。

以 Angular 版本的 Ant Design 来讲说,最可惜的是当下 ng-zorro-antd 的设计,很难去改变它,除非自己Fork一份源代码,并修改其默认主题字号参数。

四、总结

其实细心阅读 Ant Design 指引系列文章 压根也不需要这篇文章了。

不管怎么样,罗里吧嗦一大堆。

如果你在 Angular 中入坑,对 Ant Design 也很有好感的情况下,下列两个工具可能会帮你做很多简化:

Happy coding!

总结

以上是脚本宝典为你收集整理的

我所认知的 ANT DESIGN

全部内容,希望文章能够帮你解决

我所认知的 ANT DESIGN

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过