原子设计理论

原子设计是一种方法，由五个不同的阶段一起工作，以更慎重和根据层次的方式创建界面设计系统。从而创造出更有效的用户界面系统的一种设计方法。

它的五个不同阶段是：

• 原子(Atoms)：为页面构成的基本元素，例如标签、输入框、文字、颜色等；

• 分子(Molecules)：由原子构成的简单UI元素，例如按钮；

• 组织(Organisms)：相对分子而言，较为复杂的构成物，由原子及分子所组成；

• 模板(Templates)：以页面为基础的架构，将以上元素进行排版；

• 页面(Pages)：将实际内容（图片、文章等）放置在特定模板内；

原子设计不是一个线性的过程， 它更像是一个心理模型，来帮助我们把用户界面看作是一个连贯的整体，同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。

I.原子： #

在团队开始新项目时，为了保证各个页面具有统一的设计风格，我们会制定一套简易的视觉规范，在关键的设计元素上，各个设计师达成一致，这样就能很大程度保证不同页面的风格统一，并在这个基础上去探索更有创新意义的设计方案。

Ⅱ.分子： #

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

在界面中，分子就像是一个由UI元素组成的相对简单的组织。例如，搜索框里的文字和图标共同打造一了个搜索表单分子。

Ⅲ.组织： #

组织是由分子或原子或其它有机体组成的相对复杂的UI部分 。这些组织组成了界面的不同部分。

通过结合分子和原子，我们可以构建更复杂和可扩展性的模块，这个称之为组织，其实也可以称之为组件，这些组件组成了界面的不同部分。同样以表单为例，一个表单我们可以通过数量的组合，以及间距的调整，元素的增减，在界面中表达不同的场景和含义。从建立分子到建立更精细的组件，这为设计师和开发人员提供了重要的内容构建思路。

Ⅳ.模板： #

模版的本质就是线框图，在这一步我们基本可以看到一个产品的形态。我们可以不断调整组件和分子组合在一起的效果来尝试不同的方案，找到一个相对合适的方案。

Ⅴ.页面： #

页面是模板的具体实例，填充了真实的内容（图片、文字等）后形成页面，也就是常说的「视觉稿」，将占位符替换为有代表性的真实内容，使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的视觉方案。