“我們不設計頁面，我們設計構成元素的系統。”——Stephen Hay
隨著網頁設計的持續發展，我們認識到開發設計系統（design system）的重要性，而不是創造網頁的簡單集合。
很多人都提過創造設計系統，他們大都注重建立顏色、排版、網格、結構和風格的偏向。這種思考當然重要，但我沒有那么癡迷于此，因為最終這些東西會并始終會是主觀的。后來我把興趣放在界面的構成元素及創造設計系統的方法論上。
在尋找靈感和類比時，我想到了化學。所有事物（無論固體、液體、氣體，簡單的還是復雜的東西）都由原子構成。這些原子單元聚合在一起構成分子、形成更復雜的有機物，最終形成了宇宙萬物。
與此類似，界面由更小的元素組成。這意味著我們可以把整個界面拆分成一些基礎模塊[原文：building block ，建筑磚]并從這些模塊開始。這就是原子設計的基本主旨。
什么是原子設計？
原子設計是創造設計系統的方法論。它有五個不同等級：
1.原子
2.分子
3.有機物
4.模板
5.頁面
讓我更詳細介紹每一階段。
1.原子
原子是事物的基本組成部分。應用到網頁界面，原子就是我們的HTML標簽（tag），諸如表格標簽（form label）、輸入框或按鈕。
原子也能涵蓋更抽象的元素，如調色板、字體，甚至是界面更隱形的部分——動畫。
與自然中的原子一樣，他們非常抽象，也很難單獨使用。但當你第一眼看到整體風格時，它們形成pattern library內容的參照。
2.分子
當我們整合原子時，一切就變得有趣而顯著。分子由原子聚合而成，是復合物的基本單元。這些分子有自己的特性，也是我們的設計系統的支柱。
比如說，一個表格標簽、輸入或按鈕單獨存在時并不好用，但如果將它們聚合成一個表格，它們就能切實運作。
將原子聚合為分子鼓勵了“做且做好一件事”的態度。而分子可能會很復雜，作為經驗法則（rule of thumb），它們是相對簡單的原子聚合，可重復使用。
3.有機物
分子給予我們一些基礎模塊，現在我們可以把它們聚合在一起形成有機物。有機物是分子聚合在一起形成的一個界面中相對復雜的不同區塊。
我們的設計越來越具象。客戶可能對設計系統的分子結構沒太大興趣，但有機物能讓我們看到最終設計的形態。Dan Mall（和我共事過幾個項目）使用element collages來闡釋一些重要有機物的靈感，以此和客戶更好溝通，并能創造視覺知道（不需要構建整個comp）
有機物可由相似或不同的分子類型組合而成。例如，一個報頭有機物（masthead organism）可能由logo、一級導航欄（primary navigation）、搜索框和一些社會媒體頻道組成。但是一個“產品網格”可能由相同分子（可能包含產品圖、產品標題和價格）一遍遍重復組成。
將分子聚合為有機物有助我們創造獨立、可移植、可重復使用的內容。
4.模板
在模板階段，我們將化學類比轉化為語言，讓客戶更明確我們的最終成品。模板基本由有機物交織而成，最終形成網頁。到這里我們開始看見設計整合在一起，布局大體出現。
模板非常具象，并將本文展示為所有相關的抽象分子和有機物。模板也是客戶看到的最終設計。在我使用這種方法的設計經驗中，模板的生命起始于HTML線框模型，隨時間逐漸變得精確，最后成為一個可交互的產品。在匹茲堡的Bearded Studio也使用了相似流程，他們設計始于灰度級，布局較少，逐漸細化成最終的設計。
5.頁面
頁面是模板的特定情況。在這里，占位符被真實內容替代，生動精確地展現了用戶會看到的內容。
頁面是精確度的最高級別，因為它們最明確有形。這通常是人們花最多時間處理并來回檢查的地方。
頁面階段非常必要，我們用它測試設計系統有效性。在環境中審查所有元素能讓我們反復修改分子、有機物和模板來更好地針對設計的真實環境。
頁面也用來測試母版的多樣性。例如，你可能想明確表達包含40個字母的大標題是什么樣子，還想演示340個字母的樣子。用戶在購物車里的一個條目VS帶有折扣十個條目又是什么樣的呢？同樣，這些具體例子影響我們回顧和建設我們的系統。
為什么是原子設計?
原子設計是我們獨自做事的方法，雖然我們并未有意使用這種特定辦法。
原子設計給我們制定設計系統提供了清晰的方法論。當看到這些步驟呈現在面前，用戶和團隊成員就能看到設計系統這個概念的價值。
原子設計給我們從抽象走向具象的可能。因為它，我們能創造系統，在最終環境中既顯示內容，又推進一致性、可測量性。而通過組裝代替重建，我們能在一開始就構建系統，而非在做完后篩選樣式。
樣式實驗室（Pattern Lab）
為了把這個方法引入工作，我（在Dave Olsen的幫助下）制作了一個工具Pattern Lab來創建這種原子設計系統。我會稍后詳細cover pattern lab，but feel free to check it out on Github.
深入閱讀
Andy Clarke已經在這方面研究很久。實際上，他為寫了一章“走向變通：設計原子和元素”，我強烈建議查看這篇文章。我也非常推薦你看看他的工具Rock Hammer，這是一個構建基于以上原則的pattern library的好方法。
網頁要素：網頁開發的結構轉變——網頁要素與原子設計的概念非常吻合，這個視頻會告訴你什么是網頁要素。
模塊化 ? ?Tim Berners-Lee討論了模塊化作為網頁設計原則的重要性。
響應式可交付產品 作者Dave Rupert討論了關于“為每個用戶做精致bootstrap”的想法
而以下是我在Beyond Tellerrand講座的視頻和幻燈片。
原文地址：http://bradfrost.com/blog/post/atomic-web-design/
