原子设计（atomic design）愈发火热的设计理念，优点很强大，使用组件化推动的产品设计与迭代，增加团队的人效，降低成本。极大的节省设计师出图的时间，开发人员也可以通过查看prd文档，调取已有组件代码完成开发需求，提高开发的工作效率，为公司节省人力成本。

当公司的业务扩大时，可能需要多个设计师共同支持同一个产品的设计，此时，就需要制定一套完整的设计系统，用来保证产品的设计风格的统一性。

      那么，如何展开设计系统的制定从而统一设计师的产出，普遍的做法可能会先去搜索知名公司现成的设计系统，比较熟知的如：Ant design、Element、Fusion Design；然后将自己的产品进行拆解和借鉴，这的确可以快速的解决问题，但是换个角度去想想，如果不理解它的规则和逻辑，往往只是能是了解个大概，所对应产出的设计系统也很难真正的落地。

什么是原子设计 

原子设计理念最早是由设计师Brad Frost提出的即：原子结合在一起可以形成分子，进而形成组织，Brad将这个概念应用到页面设计中：页面是由一些基本的元素组成，文字、颜色、和图形等，通过这些基本的元素进行不同的组合，从而创造出统一且层次丰富的设计系统。

原子

构成一个页面的基本元素，如标题、图标等，和原子间组合形成的任何元素。

在团队开始新的项目时，为了保证各个页面具有统一的设计风格，首先会定制一套简易的视觉规范，定义的内容包括、字体、颜色、栅格和图标等，这些就是界面中最基础的原子。在关键的设计元素上，各设计师同学达成一致，保证不同页面的风格统一，并在这个基础上去探索更有创新意义的设计方案。

分子

原子组合建立的元素，两个原子即可组成一个分子 。

以按钮为例，它的组成元素包含了文字、色块背板、图标和栅格。在组合后这些抽象的原子从毫无关联到有一个共同的目的，图标和文字互相配合传达意义，颜色定义了按钮的特性，栅格为按钮定义了一个尺寸和规范。

   将单个元素搭建成一个简单的组合，是大部分构建界面的一种方式 这种方式简单且可复用性高，可以保证界面具有良好的可用性，开发和设计也是一样的，可以根据规则进行编写代码，提升迭代的效率，以表单为例，它是一个非常常见的设计元素 一个表单分子是由文字图标和线条原子组成，这些原子合并后得到的是一个可以应用在任何信息展示或者功能入口的组合。

组织

通过组合分子和原子，可以构建更复杂和可拓展性的模块，也就是组件。

这些组件组成了界面的不同部分。同样以表单为例，一个表单我们可以通过组合数量，调整间距，增删元素等，在界面中表达不同的场景和含义。从建立分子到建立更精细的组件，这为设计师和开发人员提供了重要的内容构建思路。

      组件在提高设计师效率方面有着重要的作用，我们可以把界面中常见的组件进行分类整理，如搜索、表单、图片、和卡片等，这些常用组件基本能满足日常的设计需求。如下图为例他们主要分为三类：卡片、表单和内容。每个标签栏内容的设计形式尽量保持统一，因此负责不同内容模块的设计师只要选择同一个组件，就能完成页面的设计。在短时间内就可以完成大量界面，极大的提升了设计效率。

模板

多个组织和分子的组合，形成了一个完整的页面框架，模板的本质其实可视为线框图。

到这一步已经可以看到一个产品的基本形态。模板展示不同组件和分子组合在一起时的效果，可以不断调整组件之间的布局来尝试不同的方案，直到达到一个相对合适的方案。模板的意义在于可以专注于页面的内容结构布局，而不是页面的最终样式，此时模板内容是随时都可以调整的，不断的尝试不同的方案，在多个模板中进行对比，在这个阶段降低了改动和沟通的成本。保证设计方案在原型阶段的多样性。

页面

将占位符内容替换为有代表性的真实内容，在模板的基础上进行优化和完善 就形成了页面最终的视觉方案。页面是模板的具体实例，代表了真实内容的具体方案。

以listen FM为例，这是一个选择目的地的选项，该表单通过图标和文字的组合 清晰的展现了功能场景，有了实际的内容后，我们可以发现组件能否很好的呈现内容。

原子设计为界面元素提供了应用规则和组织原理 这套方法论对于设计系统建立、团队协作、产品迭代都具有非常重要的指导意义。

本文仅供交流学习，下一篇我们来聊聊怎么去创建设计系统，那我们就下周见啦！！

                                                 感谢阅读

                                              记得点个赞哦

                                                      ∨

Powered by Froala Editor