對於一個資深的網頁設計者來説，一個網頁可以被拆分為一個個原子。那麼從原子到網頁又有怎樣的歷程呢?
在創造設計系統這方面目前已經有很多討論，大多都只是停留在關注建立顏色，排版，網格，結構及類似元素這部分。這種思維方式固然重要，但我對此興趣不是很大，畢竟到最後這些都會變得較為主觀。最近，我更為感興趣的是設計界面的組成元素以及如何以一個更條理清晰的思路組建設計系統。
在尋找靈感和概念類比中，我總是會回到化學領域。主要的思考是一切物質(不論是固體，液體，氣體，簡單的，複雜的)都是由原子所構成，這些原子結合在一起形成分子，然後組合為更復雜的組織，最終創造出我們所熟知的宇宙萬物。
同樣的，界面也是由更小的部件組成。這意味着，我們可以把界面打散成基本的模塊，並以此入手搭建界面。這就是原子化設計的要點。
什麼是原子化設計?
原子化設計是一套創建設計系統的方法。具體分為五個層面：
原子(Atoms)
分子(Molecules)
有機組織(Organisms)
模板(Templates)
頁面(Pages)
下面讓我們來更詳細的探討每個部分!
原子
原子是物質最基本的構建模塊。對於網頁界面來説，原子部分就是我們的HTML標籤，比如表單標籤(label)，輸入框(input)或者一個按鈕(button)。
原子當然也包括更多抽象的元素比如調色板，字體乃至界面中更無形的部分比如動畫。
就如同原子在自然界中也是如此，它們是相當的抽象，單獨而言並不是那麼有用。然而，它們很適合放在一個模式庫的語境中進行引用，這樣你可以容易的看到全局樣式的展示。
分子
當我們把多個原子組合在一起，事情就變得更有意思和可感了。分子是一堆原子以化學鍵的形式捆綁在一起，並且它還是組成化合物的最小基本單位。這些分子體現出各自的屬性並作為我們設計系統的骨幹。
舉個例子，一個表單標籤，輸入框或者一個按鈕單獨的情況並不能完成一個用户功能，但是把它們組合在一起形成一個表單後，現在它們能共同完成一個任務比如搜索。
從原子構建一個分子可以促進“做一件事並做好”的精神。儘管有時候分子可能會比較複雜，從經驗法則來説它們應該是可以被複用的相對簡單的原子組合。
