全部物質(zhì)（不論是固體，液體，氣體，簡(jiǎn)略的，雜亂的）都是由原子所構(gòu)成，這些原子結(jié)合在一起構(gòu)成分子，然后組合為更雜亂的安排，終究發(fā)明出我們所熟知的宇宙萬物。
相同的，界面也是由更小的部件組成。這意味著，我們可以把界面打散成根本的模塊，并以此入手建立界面。這就是原子化規(guī)劃的關(guān)鍵。

Josh Duck的HTML元素周期表（HTML Periodic Table）對(duì)網(wǎng)頁規(guī)劃原子元素做了一個(gè)很好的分化
什么是原子化規(guī)劃？
原子化規(guī)劃是一套創(chuàng)立造計(jì)體系的辦法。詳細(xì)分為五個(gè)層面：
原子（Atoms）
分子（Molecules）
有機(jī)安排（Organisms）
模板（Templates）
頁面（Pages）

下面讓我們來更詳細(xì)的討論每個(gè)部分！
原子
原子是物質(zhì)最根本的構(gòu)建模塊。關(guān)于網(wǎng)頁界面來說，原子部分就是我們的HTML標(biāo)簽，比方表單標(biāo)簽（label），輸入框（input）或許一個(gè)按鈕（button）。

原子當(dāng)然也包括更多籠統(tǒng)的元素比方調(diào)色板，字體乃至界面中更無形的部分比方動(dòng)畫。
就如同原子在自然界中也是如此，它們是適當(dāng)?shù)幕\統(tǒng)，獨(dú)自而言并不是那么有用�？墒�，它們很合適放在一個(gè)方法庫的語境中進(jìn)行引證，這樣你可以簡(jiǎn)略的看到大局款式的展示。

分子
當(dāng)我們把多個(gè)原子組合在一起，事情就變得更有意思和可感了。分子是一堆原子以化學(xué)鍵的方法綁縛在一起，并且它仍是組成化合物的最小根本單位。這些分子體現(xiàn)出各自的屬性并作為我們規(guī)劃體系的主干。
舉個(gè)比方，一個(gè)表單標(biāo)簽，輸入框或許一個(gè)按鈕獨(dú)自的情況并不能完成一個(gè)用戶功用，可是把它們組合在一起構(gòu)成一個(gè)表單后，現(xiàn)在它們能共同完成一個(gè)任務(wù)比方查找。

從原子構(gòu)建一個(gè)分子可以促進(jìn)“做一件事并做好”的精力。雖然有時(shí)候分子可能會(huì)比較雜亂，從經(jīng)歷規(guī)律來說它們應(yīng)該是可以被復(fù)用的相對(duì)簡(jiǎn)略的原子組合。
有機(jī)安排
分子給了我們一些能締造的塊塊，現(xiàn)在我們能把這些合在一起去締造一個(gè)有機(jī)的安排了。安排是由一組分子聯(lián)合起來所構(gòu)成的相對(duì)雜亂，獨(dú)立的界面功用塊。

我們的工作變得越來越有形和詳細(xì)了。一個(gè)用戶可能不會(huì)對(duì)規(guī)劃體系的分子層面感興趣，但到了有機(jī)安排的層面，我們可以看到終究的界面就要呼之欲出了。
有機(jī)安排可以包括不同的分子方法。比方，一個(gè)標(biāo)題部分就可以包括許多“分子”，像是logo規(guī)劃，根本的頁面導(dǎo)航，查找欄，和一系列社會(huì)媒體板塊。但關(guān)于一個(gè)以推出產(chǎn)品為意圖的體系來說可能意味著許多相同分子（可能包括產(chǎn)品圖片，名稱和價(jià)格）的不斷重復(fù)。
從分子到有機(jī)安排的締造進(jìn)程有助于激起發(fā)明脫機(jī)的，便攜的和可重復(fù)使用的部件。
模板
在模板層面，我們需要打破和化學(xué)的類比聯(lián)系，并進(jìn)入一種便于用戶了解的言語。模板包括大部分縫合在一起的為構(gòu)成終究頁面的有機(jī)安排。也就是在這個(gè)階段我們開端看到終究規(guī)劃的漸漸構(gòu)成。

模板是十分詳細(xì)而有形的，它的存在給一切相關(guān)的籠統(tǒng)的分子和安排供給了一個(gè)很好的渠道。它相同能讓用戶看到終究規(guī)劃地點(diǎn)的方位。依據(jù)我對(duì)這個(gè)原子化規(guī)劃辦法的經(jīng)歷，模板的生命是從HTML 線框圖開端的，但一起跟著時(shí)間的推動(dòng)它終究要變成一個(gè)可交給的東西。匹茲堡的Bearded工作室也是這樣。他們的規(guī)劃始于灰度，構(gòu)圖很少，但逐步變得明晰直到終究的規(guī)劃。
頁面
頁面實(shí)際上是模板的比如。在這里，占位符的方位被真實(shí)有代表性的內(nèi)容替代，這些有代表性的內(nèi)容將給用戶出現(xiàn)一個(gè)終究版精確的界面。

頁面層面是最逼真精確的層面，由于它們是可感的，并且通常是人們?cè)陂喿x進(jìn)程中花時(shí)間最多的。對(duì)規(guī)劃者來說頁面層面也是十分重要的由于我們?cè)谶@個(gè)層面上可以檢測(cè)整個(gè)規(guī)劃體系的功效。
反過來，從頭審視并調(diào)整之前的分子，有機(jī)安排和模板部分也能使我們有一個(gè)更好的規(guī)劃。
頁面相同是能檢測(cè)模板有哪些變化的地方。比方，你可能極力想表達(dá)一個(gè)40字符標(biāo)題的姿態(tài)，但也想看看340字符是什么樣。你也想看看當(dāng)用戶購(gòu)物車?yán)镉幸患�產(chǎn)品或是十件產(chǎn)品時(shí)的界面是什么姿態(tài)。這些詳細(xì)的比方影響到我們?cè)趺磸念^考慮之前構(gòu)建的元素。
為什么是原子化規(guī)劃
一直以來我們有許多辦法規(guī)劃網(wǎng)頁，辦法多的乃至我們從沒想過怎么以一個(gè)明晰詳細(xì)的辦法推動(dòng)我們的規(guī)劃。而原子化規(guī)劃剛好為網(wǎng)頁規(guī)劃供給了一個(gè)明晰的辦法論。規(guī)劃者也可以通過像這樣一步步推動(dòng)的方法更好的了解規(guī)劃體系的概念。
原子化規(guī)劃給我們把籠統(tǒng)轉(zhuǎn)換成具象的才能。正因如此，我們才能去發(fā)明那些具有連貫性和可量測(cè)性的體系。別的，通過建構(gòu)而不是解構(gòu)的方法，我們一步步兢兢業(yè)業(yè)從根底做起進(jìn)行網(wǎng)頁規(guī)劃，而不是過后像摘草莓一樣隨意選擇。