工作中的问题记录

​ 在中台项目中,我们以Ant的组件为基础,沿袭了Ant Design的设计体系,在这个过程中由于设计师对于Ant组件的不够理解,出现了一系列的问题,下面以PageheaderForm组件为例,做个简单的解析。

pageheader

如上图所示,Pageheader这个组件由这样几个部分组成:面包屑,Logo,Title,Content,action,extracontent,Footer。而在Ant DesignAnt Design Pro中分别给出了几个基于这种结构的实例,如下图所示:

pageheader-1

pageheader-2

pageheader-3

仔细研究这些实例可以发现,Pageheader这个组件提供给我们的是这样几条规则:

1.Pageheader面包屑,Logo,Title,Content,action,extracontent,Footer这几个部分组成。可以根据实际使用情境进行删减。

2.各个部分之间的行与列的关系,Margin,Padding的数值是确定的。

3.各个部分里面的内容是可以由下游设计师根据实际情况自定义的。

所以Ant的很多组件提供的实际上是一套规则,下游设计师应该在这样的规则框架下进行设计工作,而不是没有约束的自行设计或者简单的抄个局部的样式。而在实际工作中,由于大部分设计师对于前端知识的缺乏,类似这样的规则是很容易被丢失掉的。

Form

与此类似的比如Form组件

图1:

图1

图2:

图2

如图所示,设计师会疑惑为什么同样是嵌套输入框的表单,上下两个输入框的间距会不一样呢?

设计所说的间距是指上一个输入框的下边线与下一个输入框的上边线的像素距离

实际上Formitem应该是有一个最小高度的,而输入框的尺寸有大小之分,不同尺寸的输入框放在Formitem中就会出现上图中设计师所谓的间距差。如果是更大尺寸的元素放在Formitem中会把这个高度撑的更大。

所以说,Ant的组件提供给设计的实际上是一个框架规则,我们理解他的规则,在这样的框架下开展工作,可以更好的进行工程化的量产。