全部物質（不論是固體，液體，氣體，簡略的，雜亂的）都是由原子所構成，這些原子結合在一起構成分子，然后組合為更雜亂的安排，終究發明出我們所熟知的宇宙萬物。
相同的，界面也是由更小的部件組成。這意味著，我們可以把界面打散成根本的模塊，并以此入手建立界面。這就是原子化規劃的關鍵。
Josh Duck的HTML元素周期表（HTML Periodic
Table）對網頁規劃原子元素做了一個很好的分化
什么是原子化規劃？
原子化規劃是一套創立造計體系的辦法。詳細分為五個層面：
原子（Atoms）
分子（Molecules）
有機安排（Organisms）
模板（Templates）
頁面（Pages）
下面讓我們來更詳細的討論每個部分！
原子
原子是物質最根本的構建模塊。關于網頁界面來說，原子部分就是我們的HTML標簽，比方表單標簽（label），輸入框（input）或許一個按鈕（button）。
原子當然也包括更多籠統的元素比方調色板，字體乃至界面中更無形的部分比方動畫。
就如同原子在自然界中也是如此，它們是適當的籠統，獨自而言并不是那么有用?？墒?，它們很合適放在一個方法庫的語境中進行引證，這樣你可以簡略的看到大局款式的展示。
分子
當我們把多個原子組合在一起，事情就變得更有意思和可感了。分子是一堆原子以化學鍵的方法綁縛在一起，并且它仍是組成化合物的最小根本單位。這些分子體現出各自的屬性并作為我們規劃體系的主干。
舉個比方，一個表單標簽，輸入框或許一個按鈕獨自的情況并不能完成一個用戶功用，可是把它們組合在一起構成一個表單后，現在它們能共同完成一個任務比方查找。
從原子構建一個分子可以促進“做一件事并做好”的精力。雖然有時候分子可能會比較雜亂，從經歷規律來說它們應該是可以被復用的相對簡略的原子組合。
有機安排
分子給了我們一些能締造的塊塊，現在我們能把這些合在一起去締造一個有機的安排了。安排是由一組分子聯合起來所構成的相對雜亂，獨立的界面功用塊。
我們的工作變得越來越有形和詳細了。一個用戶可能不會對規劃體系的分子層面感興趣，但到了有機安排的層面，我們可以看到終究的界面就要呼之欲出了。
有機安排可以包括不同的分子方法。比方，一個標題部分就可以包括許多“分子”，像是logo規劃，根本的頁面導航，查找欄，和一系列社會媒體板塊。但關于一個以推出產品為意圖的體系來說可能意味著許多相同分子（可能包括產品圖片，名稱和價格）的不斷重復。
從分子到有機安排的締造進程有助于激起發明脫機的，便攜的和可重復使用的部件。
模板
在模板層面，我們需要打破和化學的類比聯系，并進入一種便于用戶了解的言語。模板包括大部分縫合在一起的為構成終究頁面的有機安排。也就是在這個階段我們開端看到終究規劃的漸漸構成。
模板是十分詳細而有形的，它的存在給一切相關的籠統的分子和安排供給了一個很好的渠道。它相同能讓用戶看到終究規劃地點的方位。依據我對這個原子化規劃辦法的經歷，模板的生命是從HTML
線框圖開端的，但一起跟著時間的推動它終究要變成一個可交給的東西。匹茲堡的Bearded工作室也是這樣。他們的規劃始于灰度，構圖很少，但逐步變得明晰直到終究的規劃。
頁面
頁面實際上是模板的比如。在這里，占位符的方位被真實有代表性的內容替代，這些有代表性的內容將給用戶出現一個終究版精確的界面。
頁面層面是最逼真精確的層面，由于它們是可感的，并且通常是人們在閱讀進程中花時間最多的。對規劃者來說頁面層面也是十分重要的由于我們在這個層面上可以檢測整個規劃體系的功效。
反過來，從頭審視并調整之前的分子，有機安排和模板部分也能使我們有一個更好的規劃。
頁面相同是能檢測模板有哪些變化的地方。比方，你可能極力想表達一個40字符標題的姿態，但也想看看340字符是什么樣。你也想看看當用戶購物車里有一件產品或是十件產品時的界面是什么姿態。這些詳細的比方影響到我們怎么從頭考慮之前構建的元素。
為什么是原子化規劃
一直以來我們有許多辦法規劃網頁，辦法多的乃至我們從沒想過怎么以一個明晰詳細的辦法推動我們的規劃。而原子化規劃剛好為網頁規劃供給了一個明晰的辦法論。規劃者也可以通過像這樣一步步推動的方法更好的了解規劃體系的概念。
原子化規劃給我們把籠統轉換成具象的才能。正因如此，我們才能去發明那些具有連貫性和可量測性的體系。別的，通過建構而不是解構的方法，我們一步步兢兢業業從根底做起進行網頁規劃，而不是過后像摘草莓一樣隨意選擇。
咨詢服務熱線：400-099-8848
