Atomic Design 原子設計理論精華總結
近年來，Style Guide 逐漸發展衍變為 Design System，基於一套架構嚴謹、規則統一的框架體系，產品表現層面的設計可以逐漸實現模組化運作，從而大大提高設計效率。
而 Atomic Design（原子設計）是構建 Design System 的核心指導理論。那麼，以原子理論為依據構建的設計體系有哪些？如何運用原子理論構建自己的設計體系/元件庫呢？原子設計體系使用過程中，又該如何規避常見的問題呢？本文將一一為你揭曉。
一、什麼是原子設計理論？
在化學中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。
2013 年前端工程師 Brad Forst 將此理論運用在介面設計中，形成一套設計系統，包含 5 個層面： 原子 、 分子 、 組織 、 模板 、 頁面 。
1. 原子
原子是最基本和最小顆粒度的單位，在介面中以「 元素 」的形式存在，例如：顏色、文字、圖示、分割線等。
2. 分子
原子排列組合構成了分子，在介面中多以「 元件 」的形式存在，例如：導航欄、標籤欄、搜尋框、按鈕、彈窗等。
3. 組織
原子、分子排列組合構成了組織，在介面中多以「 模組 」的形式存在，例如：商品列表、內容卡片、入口模組、瀑布流圖等。
4. 模板
原子、分子、組織排列組合構成了模板，在介面中也稱為「 原型圖 」，例如：電商展示原型、外賣點單原型、店鋪詳情原型、商戶管理原型等。
5. 頁面
模板填充了真實的內容（圖片、文字等）後形成頁面，也就是常說的「 視覺稿 」，例如：商品列表頁、外賣點單頁、教育課程頁、資訊管理頁等。
二、為什麼要以原子理論作為指導？
1. 一致
原子設計理論以上文 5 個層面為基礎，從原子到頁面的構建過程中，充分發揮了設計元素的可複用性，避免重複生產，體現了 一致性的設計原則 。
2. 清晰
原子設計理論從抽象到具象、由區域性到整體，層級分明，為設計師構建元件庫提供了 清晰的方法論指導 ，同時幫助團隊成員更好地理解設計體系的價值。
3. 高效
隨著產品的不斷迭代，以原子設計理論指導完成的設計體系，將會更加高效便捷地適應新的變化，你只需輕輕改變某些原子、分子的屬性或組合方式，便會迎來整個體系的同步更新， 易於擴充套件和維護 。
4. 溝通順暢
原子設計理論不僅方便設計師思考頁面的整體性和統一性，也能讓前端工程師和產品經理，清楚地瞭解產品框架層和表現層的邏輯結構， 降低不必要的溝通和修改成本 。
三、以原子理論為依據構建的設計體系
1. UX Power Tools
UX Power Tools 提供了構建產品和應用程式所需的基本元素，包含了網頁端和移動端，均可響應原子級別的操作。除了基礎元素，這套體系還添加了各種常見的設計模式、工作流程和模板，讓設計師能專注於做更重要的事。
官網： ofollow,noindex">https://www.uxpower.tools
2. Frames
Frames 使用了精緻的元件和先進技術，並結合 Sketch 構建了強大的 Web 設計系統，同樣能滿足修改原子，全域性同步更新的功能，支援響應式佈局。提供了近百個網頁模板，可以非常迅速地完成效果圖製作。
官網： http://framesforsketch.com
3. iOS Blueprint
Blueprint 是一款專注於 iOS 應用的響應式設計系統，包括巢狀符號、樣式和文字圖層，可根據需求輕鬆進行擴充套件。除了基本的 Library 功能外，它還提供了一些通用模板，比如登入、註冊頁等，開箱即用。
官網： https://blueprint.rojcyk.com
4. Nested Symbols
這是一套免費的設計系統，它將按鈕、輸入框、下拉選單、通知等控制元件，都製作成了巢狀符號，方便自定義和編輯。系統中的所有元素，都是作者從他在 UI8.net 上排名第一的暢銷產品 Dashboard UI Kit 中挑選出來的。
四、如何運用原子理論建立自己的元件庫？
原子設計理論最大的價值，就是為設計體系/元件庫的構建提供思路和方法，如果你不滿足於市場上現有的設計系統，我們還可以自己建立。下文我會簡單介紹如何使用 Sketch Library 功能實現元件庫的建立。
Sketch Library 功能簡介
一個 Library 本質上就是一個 Sketch 檔案，當你編輯了 Library 中的 Symbol，那麼呼叫了該 Library 的其他 Sketch 檔案便會收到更新提示，你可以對變更進行預覽、對比和確認，使這些 Sketch 檔案中所呼叫的 Symbol 自動更新到最新版 。
第一步：定義 Colors
新建一個 Sketch 檔案，將 Pages 命名為 Guide - Colors，用於定義顏色樣式。
將顏色新增 Main、Text、Status 等一級分類，例如： Color/Status ；再新增二級分類，例如： Color/Status/Success 等，命名需使用 / 符號區分層級結構。定義好顏色和命名後，將每個顏色轉換成 Symbol，便可統一呼叫。
第二步：定義 Fonts
新增一個 Pages 並命名為 Guide - Fonts，用於定義文字樣式。
根據設計規範，將不同字號的文字樣式逐一羅列出來，例如：Large Title、Title 1、Body 等，按照 樣式名稱/顏色/對齊方式 的層級結構，將文字賦予 Text Style，例如： Body/Blue/Left 等，可使用 Rename it 外掛批量命名。重複這個操作，直到整理出所有的字型樣式。
利用 Sketch Styles Generator 外掛 生成文字樣式庫，再使用 Shared Text Styles 外掛 匯出 .json 檔案，從不同的 Sketch 檔案中匯入 .json 檔案，便能實現共享文字樣式庫了。
第三步：定義 Icons
新增一個 Pages 並命名為 Guide - Icons，用於定義圖示。
將圖示放置在 24*24px 的安全框內，從定義好的顏色系統中選擇合適的 Symbol，調整到相同的尺寸後覆蓋在圖示之上，再把圖示設定成 Mask 蒙版 ，便能獲取到顏色了。這種 Symbol 巢狀的方式，有利於顏色的同步更新。
將圖示轉換成 Symbol，在屬性面板中鎖定 Size ，並把 Resizing 設為上下左右同時吸附，以確保圖示在使用時可以等比縮放。重複這個步驟，直到整理出所有的圖示 Symbol。
第四步：加入 Library
使用快捷鍵「cmd+, 」開啟 Preferences 面板，選擇「Libraries」標籤，點選「 Add Library 」按鈕新增剛才的 Sketch 檔案，完成後就可以從其他的 Sketch 檔案中，對此庫裡的元素進行呼叫了。
當你編輯了 Library 中的 Symbol，那麼呼叫了該 Library 的其他 Sketch 檔案便會收到更新提示： Library Update Available （Sketch 工具欄右上角），點選後可以對變更進行預覽、對比和確認，從而自動更新到最新版。
第五步：定義其他 Elements
根據以上對原子的定義和命名方式，依次完成對其他原子、分子和組織的定義，整個過程通過 Symbol 的不斷巢狀，最終實現 Library 體系的建立。
五、辯證地看待原子設計理論
在哲學中，真理分為絕對真理和相對真理，絕對真理是不受任何限制的廣義的道理；相對真理是在特定條件下成立的有侷限性的道理。原子設計理論就是一種 相對真理 。
1. 適合用工程師思維
原子設計理論更偏向於工程師的思路和邏輯，遵守層級結構思維；而大部分設計師對元件庫的構建和使用，偏向線性結構或自然結構思維，他們更希望快速發現、理解和呼叫元件，而非一層一層地按照層級結構選擇元件。
2. 適合制定基礎元件
某些時候，我們以原子設計理論規劃構建元件庫時，會發現對元件的級別和複雜度有一定的要求。相對於複雜多變的“業務型元件”，高頻複用的“基礎型元件”會顯得更加穩定，適合封裝成通用元件納入設計體系。
3. 適合靈活運用理論
原子設計理論是一種相對真理，需要根據團隊、專案的實際情況靈活運用，切勿生搬硬套。比如：既要保證元件的效率和一致，也要兼顧設計師的使用習慣；既要規範化常用元件的使用，也要考慮非常用元件的存在等等。
小結
- 原子設計理論包含 5 個層面：原子、分子、組織、模板、頁面；
- 原子設計體系的優點：一致、清晰、高效、溝通順利；
- 你可以使用已有的設計體系搭建產品，也可以根據專案需要，自己建立；
- 建立 Library 元件庫過程中，注意元素的命名邏輯以及 Symbol 的巢狀；
- 根據實際情況靈活運用原子設計理論，切勿生搬硬套。
本期分享的內容就到這裡，大家對原子設計理論有什麼看法？歡迎留言討論。你也可以關注我的公眾號「彭彭設計筆記」，我會用簡練的文字，為你提煉最有價值的設計知識。