从零开始系统设计

几个月前我换了新的工作，从移动端设计开始转而开始接触到大量后台界面的设计。标题从零开始也是这段时间学习了原子设计（Atomic Design）所得到的和之前不一样的设计方法和思考模式，让我对界面设计有了更多新的认识。

模块化思维

我们的界面也可以想象成和汽车一样由不同的模块组成的，就像一辆汽车一样，由不同的零件相互配合组成一个完整的功能模块，反之模块又可以拆分成不同的零件以此类推。

图片来源于网络

在原子设计（Atomic Design）中，也是运用这样模块化的拆分思维，认为一套设计系统分别包含5个层面：原子、分子、有机体、模板、页面。

组合与构建

原子是在构成页面时最基本和最小的单位，，例如：颜色、文字、图标、分割线等。他们是组成页面最基本的元素，无法往下再做拆分。

图片来源于网络

有了最小单位之后，我们将几个原子组合起来便形成了分子，也就是在我们页面中所出现相对简单的组件例如：按钮、输入栏、导航栏、搜索框等。

当原子和分子组合排列就会得到有机体，它是界面中相对复杂的组件，你也可以把它理解成我们常说的「模块」。

图片来源于网络

模版就是将上面提到过的原子、分子、有机体都排列组合起来，将它们分层放置在布局中。

图片来源于网络

我们将真实的数据、状态应用到模版中去，就形成了页面。

图片来源《Atomic Design》

值得一提的是，这里虽然是按照原子、分子、有机体、模板、页面的顺序来说的。但它们并不是分步骤地，并不是孤立的要去创建一个组件或者按钮样式然后依次进行。我在刚开始做的时候也常常陷入这样的困境。得益于诸如 Ant Design，Element等优秀的平台和规范指导，让我在一开始在没有进行后台设计的时候以为自已应该能很快得心应手。

图片来源《网易蜂巢交互文档》

可随着项目的复杂度提升，平台所提供的组件库，没有随之匹配的组件可利用。比如说组件中一行有两个操作，而自己的界面中一行需要有十个操作，这时候要是按两个的排列方式就不一定合适了，我就遇到过类似的问题，需要你单独去改一个之前没有的模块和组件，查找了其他参考找到了合适的设计形式再放到现有的页面中就显得很突兀。

所以原子、分子、有机体、模板、页面并不是有顺序、有步骤的，不要是只盯一个组件或者模块，你可以用俄罗斯套娃来理解它，它们在一起为的也是组成一个整体。

图片来源于网络

一致性

固定元素

前面我们说了通过对页面的拆分，我们得到了组成页面最基本的原子（尺寸、描边、文字、颜色、圆角等），在搭建页面的时候为了保证了整体页面风格的一致性。当设置好这些基本元素之后，就不要太轻易去改变它们，尤其是在页面已经完成之后。充分发挥这些元素的复用性，避免重复设计。

图片来源于网络

简化参数

前面说了因为有了像 Ant Design，Element等优秀的平台和规范指导，我一度觉得有了这些优秀的平台，之后在搭建后台页面的时候都不用太需要设计师的参与，在工程师沟通进行规范说明之后工程师自己就能搭建出一个后台出来，而即便是和工程师们沟通过所产出的也可能是这样的界面。

我们刚开始会设置一个统一的基数来进行设计、常见的比如说4、8、10。通常我们在设计完成标注的时候，也会把这些数值标注出来。但是大量的数值其实不太方便记忆，这时候我们可以把数值简化一下。

比如我的基数数值是4，那么8我就简化为2a以此类推，将这样的基数理念深植在团队成员的脑中以此来达成共识。

小结

关于原子设计还有很多东西没讲完，网上也有很多关于原子设计的文章和实践产品的产出，比如阿里 推出的 fusion design 很大程度使用了原子设计的概念，大家有兴趣的话可以去尝试使用一下。

下次我将和大家着重聊一聊在日常学习工作中怎么使用原子设计理念打开学习思路。

参考文献：

https://wenku.baidu.com/view/53a0322759fb770bf78a6529647d27284b7337a3.html《原子设计》