什么是网页原子设计模式（Atomic Design）

网页设计的理念和方法正在随着设备多样化以及网页设计方法的发展而发生显著的演进。
本文简要介绍网页设计领域最新的设计理念：原子设计（Atomic Design）模式。
我们不是设计页面，我们在设计可复用的系统组件库。回忆下桌面本地应用的发展历程，历史总是有某种程度的相似。- iefreer

We’re not designing pages, we’re designing systems of components -- Stephen Hay

随着网页设计技术水平的不断发展，我们认识到需要建立周到的设计系统，而不是简单的网页集合。

在创建设计系统上已经有很多的讨论，大多数关注于建立颜色，排版，网格，结构及类似元素。这些方面的思考当然是重要的，不过我对这些方面不是很感兴趣，因为最终这些都变得比较主观。最近我更感兴趣的是我们的界面是怎么构成的以及我们如何可以更有条理的构建设计系统。

在寻找灵感和概念类比中，我总是会回到化学领域。主要的思考是一切物质（不论是固体，液体，气体，简单的，复杂的）都是由原子所构成，这些原子结合在一起形成分子，然后组合为更复杂的组织，最终创造出我们所熟知的宇宙万物。

同样的，界面由更小的组件组成。这意味着我们可以把整个的界面分解为基本构建块并从那里开始构建系统。这就是原子设计（atomic design）的基本思想。

Josh Duck的HTML元素周期表（HTML Periodic Table）对网页设计原子元素做了一个很好的分解。（Noted: Not available on his blog now, but has been copied a lot）

什么是原子设计（What is Atomic Design）

原子设计是创建设计系统的系统方法。分为5个层次：

原子（Atoms）

分子（Molecules）

组织（Organisms）

模板（Templates）

页面（Pages）

让我们更详细的探讨下每个阶段。

原子（atoms）

原子是物质的基本构造块。具体对于网页界面而言，原子是我们的HTML标签，比如表单标签（label），输入框（input）或者一个按钮（button）。

原子可以包括更多抽象元素比如调色板，字体乃至界面中更无形的部分比如动画。如同自然界的原子都相当抽象，单独而言并不是那么有用。然而，它们很适合放在一个模式库的语境中进行引用，这样你可以容易的看到全局样式的展示。

分子（molecules）

当我们开始把原子组合在一起的时候，事情就会变得更有趣和真实。分子由一组原子结合而成，是复杂元素的最小基本单元。这些分子有自己的功能属性并形成我们设计系统的骨干。

比如，一个表单标签，输入框或者一个按钮单独的情况并不能完成一个用户功能，但是把它们组合在一起形成一个表单后，现在它们能共同完成一个任务比如搜索。

从原子构建一个分子可以促进“做一件事并做好”的精神。尽管有时候分子可能会比较复杂，从经验法则来说它们应该是可以被复用的相对简单的原子组合。

组织（organisms）

分子是我们需要处理的一些完成某个局部功能的界面区块，然后我们就可以把这些分子组合起来以构成组织。组织是由一组分子联合起来所形成的相对复杂，独立的界面功能块。