Atomic Design中的5个设计层次

Atomic Design是一种快速设计网站的方法论。与传统的设计方法不同，Atomic Design不是从设计网页开始，而是从设计网页所需的最小元素开始。這也是Atomic Design名字的由来，Atomic在英文中就是原子的意思。

在Atomic Design中，设计元素被分成了5层：

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

下面我们就来分别介绍这5个层次。

ATOMS

Atom 是最基本的元素，比如标签Label，输入框Input，按钮Button

Atom也包含一些抽象的元素，比如调色板，字体，甚至那些界面中不直接可见的部分。单独的Atom没有什么用处，但他是构成网站整体风格中最基本的部分。

Molecules

我们把几个Atom组合起来，就形成了Molecules，Molecules构成了网站的主线。

比如我们把标签，输入框和按钮组合起来，就形成了一个可以独立完成一定功能的界面。

在Atomic Design中，强调Molecules是“Do one thing and do it well"，就是一个Molecuele只有一个功能，但是要把这个功能做好。

Organisms

把几个Molecules组合到一起，就构成了一个Organism。Organism可以是一个网页的区域，比如下图中网站的Header。

Templates

Template由多个Organisms构成，在这个层面上，已经可以看出网站的雏形了。

Templates非常类似于线框图，设计者以此为蓝本逐步细化。

Pages

Pages是Templates的实例化，即使用具体的内容替代Tmplates中的示意图。到了Pages阶段，就可以和客户去讨论具体的效果了。如果有必要，再返回去修改相关的Molecules，organisms和Templates。