首发于Ant Design

Ant Design 4.0 的一些杂事儿 - Space 篇

作为前端开发者,我们总是不断的在与样式做斗争。相信各位在信息流里也刷到过这么一个问题:

前端因为像素还原设计稿而离职,这是个别现象吗?www.zhihu.com图标

今天,我们会聊聊 Ant Design 4.1 中新增的 Space 组件,不过在此之前先说一些远的事情~

见山是山

在初次打开前端世界的大门时,我们会发现 web 是如此神奇的东西。大神可以用它制作炫酷的图表,而我连垂直居中都搞不定。

这时,面对设计师的设计稿,会有种无力感。似乎看到的设计稿就是设计稿,不知道这种设计是否可以落地到样式,交互是否可以落地到代码。处于这种阶段,需要借助搜索引擎的力量来提升自己。久而久之,就会开拓出自己的学习渠道。不过好在相对于几年前信息已经不再过于松散。你可以很方便的从 MDN、stackoverflow、CSS-Tricks、medium 等等地方找到自己需要的或者将来可能需要的各种知识。

见山不是山

当代码累计到一定的量后,你看到的设计稿不再是设计稿。它会自然而然的在你眼中分解成各种元素。不仅仅是组件本身,你可以一眼就看出它的页面布局是固定位置,还是响应式布局。页面会切分成几个大块,接着又继续向下切分成各个组,到组件,到样式。

在这个阶段,也是每个热血开发者最容易造轮子的时候。然而并非轮子是坏事,它可以帮助你校验自己的抽象能力。如果你发现自己反复在造同一个轮子(最常见的就是 Select 组件,它在各种需求下长得即相似又很容易出现各种变体),那么你应该先停一停,尝试总结一下这几个轮子到底出现了什么问题使得无法复用。

反复的轮子往往有以下几种情况:

  • 一种是 API 的设计缺陷,它让你不断的拓展(或者重写)轮子的属性,只是为了实现相似却略有不同的功能。
  • 另一种是抽象的缺失,使得你往复创造样式相近却功能不同的轮子。(当然,这也有可能是你的样式 or DOM 不合理导致的无法复用。)
  • 还有一种则是设计问题,设计师提供给你的页面总是有长得不一样却功能相同的组件。

当你发现自己遇到了前面两种情况,新世界的大门其实只有一步之遥。这个时候,要做的不是继续造轮子,而是去探索业界已经有的各种实现。对于前端,我们可以通过 npm 下载量和 github 的 star 数以及各种文章找到优秀的库。学习 API 设计以及源码实现。参考源码是一个性价比非常高的事情,你会从中深受启发。从而突破似乎自己什么知道一些,却又不知道接下去应该看些什么的问题(然后学的越多,你就发现自己懂得越少~)。

见山只是山

回到我们在文章头提到的知乎那个问题。到了这个阶段,你会发现似乎实现样式不再是问题。而是在样式之外,有了更多的思考。比如这个交互是否合理、这个需求是否合理(比如跟着手机壳颜色变换网页背景颜色的需求 2333)、是否某种设计特别突兀等等等。

这个时候,你会发现设计和实现是相辅相成的存在。一方面设计师提供了绚烂的设计,另一方面你将这个设计进行落地。杂乱无章的设计在某些场景下看起来差不多。但是放在其他场景组合起来又变得十分变扭。

提炼设计规范,是解决这些问题的关键。

1 + 1 > 2

在 Ant Design 的官网,我们特地为设计规范提供了一个导航标签。用于介绍组件背后的设计思想:

基于这套设计规范,即便是不同的设计师也能设计出相同设计价值观的组件。你不会纠结我的组件是不是有的该 2px 圆角、有的不要圆角。有的组件为了好看我阴影重一点,有的则反之要轻一点甚至不需要阴影。什么时候,我动画该快一点,什么时候我又要慢一点。这些不再是问题。

下沉到代码实现,可以很方便的提炼出 Design Token。因而开发者可以直接通过修改 Ant Design 的 less 变量生成自己的主题(官方主题也是由此实现)。

Space 组件

是的,说了这么多引子。我们终于要提到本文的主角 Space 组件了。在业务中,我们常常遇到一个问题。那就是虽然使用 Ant Design 的组件不会有任何问题,但是在一些布局上总是或多或少需要额外的样式来实现,比如一位熟悉 Ant Design 的开发者会知道我们的规范推荐组件间距是 8n,而对于不熟悉的开发者会觉得设计稿上的间距差不多随便填个数就完事儿了。而在完成细节后,总体一看差不多,但为什么就是没有设计感好看呢?

在 Ant Design v4 的 alpha 时期,我们有设想过如何解决这种细微的布局样式问题。一种想法是提供一个诸如 @ant-design/style 的样式库做智能的样式填充。当你引用了这个样式库,放置多个 Button 时会自动为 Button 插入间距。在 Table 和 Form 之间自动添加符合规范的 margin 来减少额外的 CSS 样式。

很容易想到,这种设计最大的问题就是组合爆炸以及样式污染。它难以覆盖所有的场景,同时又会使得开发者疑惑为何有的时候会突然多出一个样式。对于开发者而言,需要的是更可控的实现。在过去版本,我们已经有了 Grid 组件用于实现间距与布局。而对于这种场景则需要更轻量级的实现,让开发者通过 Row gutter 来做 8n 是不切实际的。

因而我们提出了 Space 组件:

https://github.com/ant-design/ant-design/issues/19860github.com

这个组件非常简单,简单到只做一件事情,就是处理内联样式的对齐和间距问题:

<Space>
  Space
  <Button type="primary">Button</Button>
  <Upload>
    <Button>
      <UploadOutlined /> Click to Upload
    </Button>
  </Upload>
  <Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
    <Button>Confirm</Button>
  </Popconfirm>
</Space>

Ant Design v4 由于不再需要支持旧版本的 IE,我们可以使用 inline-flex 布局很容易的实现对齐功能。 它也帮助我们解决之前经常遇到的不同游览器不同版本间的 baseline 对齐问题。

于是乎,在 4.1 中 @骗你是小猫咪 完成了 Space 组件。它显著解决了内联组件的布局的样式问题,开发者不需要关心规范里的间距是多少,也不需要额外的去写样式来调整组件的间距。一切显得那么顺其自然而又理所应当。减少困扰就是减少工作量,减少工作量就是早点下班~

赶紧更新你的版本来试试 Space 组件吧~

以上

设计与实现是亘古不变的话题,它包含了无数设计师与开发者的血泪史。然而,设计师和开发者并不应该是敌对关系。如何将一个优秀的设计落地需要双方的共同努力。从组件的角度,如何将设计规范不成为开发者的负担是一个重要的问题。一旦一个规范需要人肉来落地,那它就可能被忽略、被遗漏、被错误实现。于 Ant Design 之中,如何减少开发者的尽力,提高效率是我们一直关注的事情。谢谢你的耐心阅读~

发布于 04-24

文章被以下专栏收录