网页设计深究之从原子到页面

　　对于一个资深的网页设计者来说，一个网页可以被拆分为一个个原子。那么从原子到网页又有怎样的历程呢?

　　在创造设计系统这方面目前已经有很多讨论，大多都只是停留在关注建立颜色，排版，网格，结构及类似元素这部分。这种思维方式固然重要，但我对此兴趣不是很大，毕竟到最后这些都会变得较为主观。最近，我更为感兴趣的是设计界面的组成元素以及如何以一个更条理清晰的思路组建设计系统。

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

　　同样的，界面也是由更小的部件组成。这意味着，我们可以把界面打散成基本的模块，并以此入手搭建界面。这就是原子化设计的要点。

　　什么是原子化设计?

　　原子化设计是一套创建设计系统的方法。具体分为五个层面：

　　原子(Atoms)

　　分子(Molecules)

　　有机组织(Organisms)

　　模板(Templates)

　　页面(Pages)

　　下面让我们来更详细的探讨每个部分!

　　原子

　　原子是物质最基本的构建模块。对于网页界面来说，原子部分就是我们的HTML标签，比如表单标签(label)，输入框(input)或者一个按钮(button)。

　　原子当然也包括更多抽象的元素比如调色板，字体乃至界面中更无形的部分比如动画。

　　就如同原子在自然界中也是如此，它们是相当的抽象，单独而言并不是那么有用。然而，它们很适合放在一个模式库的语境中进行引用，这样你可以容易的看到全局样式的展示。

　　分子

　　当我们把多个原子组合在一起，事情就变得更有意思和可感了。分子是一堆原子以化学键的形式捆绑在一起，并且它还是组成化合物的最小基本单位。这些分子体现出各自的属性并作为我们设计系统的骨干。

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

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