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

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

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

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

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

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

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

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

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