近年來，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 提供了構建產品和應用程序所需的基本元素，包含了網頁端和移動端，均可響應原子級別的操作。除了基礎元素，這套體系還添加了各種常見的設計模式、工作流程和模板，讓設計師能專注于做更重要的事。

△ 官網：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 中挑選出來的。

△ 官網：https://janlosert.com

四、如何運用原子理論創建自己的組件庫？

原子設計理論最大的價值，就是為設計體系/組件庫的構建提供思路和方法，如果你不滿足于市場上現有的設計系統，我們還可以自己創建。下文我會簡單介紹如何使用 Sketch Library 功能實現組件庫的創建。

1. 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 的嵌套；
• 根據實際情況靈活運用原子設計理論，切勿生搬硬套。

歡迎關注作者的微信公眾號：「彭彭設計筆記」

「設計系統如何實現」

• 《實用全面！教你用Sketch Libraries構建組件庫/設計體系》
• 《大公司如何做設計系統？24 個 Sketch 組件庫源文件合集下載》
• 《大型的視覺設計系統都是怎么設計出來的？》