原子設計能夠指導我們去落地設計系統，去設計頁面。本篇文章，作者解釋了原子設計定理中物種類型的具體定義，以及說明了原子設計為什么在B端設計當中如此重要，還有原子對于頁面設計造成的影響。相信看完文章后，你會對原子設計有了新的理解。

原子設計，我們在平時的評審過程當中，經常用到說：“你這個頁面沒有遵守原子設計理論”

因此會有很多好伙伴很好奇，原子設計理論到底是什么，對于我們設計師又會造成什么影響？今天我們就來一起聊聊 “圓子”。

Phase 1 什么是原子設計丨理解原子設計的背景

原子設計其實是一個非常早的設計理念，最早是由國外設計師 Brad Frost 提出來的，創建它的起因是 Brad Frost 在做網頁設計的過程中，發現整個頁面可以將其按照不同維度進行拆分。同時在化學當中的元素特性尋找到靈感，進而將網頁頁面當中層層嵌套的結構關系 與化學當中的原子、分子進行類比，進而形成了原子設計理論。

在原子設計理論當中，我們主要有 原子、分子、組織、模塊、頁面，這五種不同的類型，它們的關系由大到小，層層嵌套，而這種關系，就如同我們去分析問題[1]，希望能夠通過一層一層的分析，去尋找設計當中的靈感。

我們先來了解一下這五種類型的具體定義：

01. 原子丨頁面當中的基礎元素

在整個頁面設計當中，我們把原子看作是設計頁面中最為基礎的元素單位?？梢岳斫鉃轫撁娈斨械娜我鈨热?，都是由它組成。

在實際使用原子設計的理論過程中，我們可以將頁面當中的：顏色、文字、圖標、投影、按鈕、分割線、容器，看作為我們的原子。

（這里沒有將按鈕等小型組件歸納在內，是因為為了后續與 Figma 當中 Style 保持一致，理念層面的東西，不用過于糾結 : ）

也正是因為它是我們頁面當中的基礎，導致我們在制作項目的初期，只要開始動手繪制頁面，我們就需要將頁面當中的原子進行設定，這樣才能能夠保證風格統一。

原子設計在 Figma 當中也會有體現，因為頁面設計會有很多基礎樣式，因此我們可以通過設定它的基礎 Style ，進而去限制頁面當中的原子內容。

其中包含：顏色、文字、投影、分割線 都能夠在里面進行設定，因此這里對于 Figma 的贊美，我們就盡量克制，總之對于 原子的限制，主要就是我們在頁面當中，所有元素都要包含有原子的 Style 才行。

02. 分子丨多個原子的組合

分子是由多個原子組合而成，兩個原子即可組成一個分子。其實就是將原子，按照不同的組件需求進行搭建，進而形成一個個分子。在我們對分子的理解當中，可以把按鈕、輸入框、下拉菜單、Tooltips、Popover、Popoverconfirm… 理解為是我們的分子。

它們的特點是：

1. 首先內容不會過大，導致占據太多頁面；
2. 組件較為獨立，就是一個簡單的傳入輸入再傳出，不會特別復雜。

其實分子就可以和大多數基礎組件進行對應，因此也就意味著我們在建立好 Figma Style 過后就需要去定義不同的組件內容。

當我們有了這樣一個思路過后，我們在分析一個組件時，你能夠快速知道我究竟要設計什么內容。比如現在我們需要設計一個Popoverconfirm 氣泡確認框，可以思考一下一共包含有哪些原子？[2]

03. 組織丨復雜的界面組件

組織是界面當中相對復雜的部件，因為需要在各個頁面進行復用，將其抽象為組織，來進行使用。比如常見的：高級表單、穿梭框、表頭分組、導航菜單……

在實際的工作當中，組織與分子容易混淆，但我們可以這樣來理解：分子通常是較小的元素單位；組織是頁面復雜，同時邏輯復雜的較大元素單位。

比如以這個頁面為例，你可以發現頁面當中每一個模塊，我們都可以將其歸納為一個組織來進行設計，正是有了一個一個的組織，我們的頁面規則才會變得更加規整，也通過這樣，就能夠將多個組織進行復用，從而快速設計復用性的頁面。

04. 模板丨頁面當中固定

模板是將分子、組織放置在頁面當中，通過固定頁面的結構與設計模式，最終形成模板。通常這類結構與模式，都可以為頁面的原型，它的意義在于復用，設計師通過專注頁面的布局結構，找到系統當中能夠快速復用的結構形式，同時模板的存在，也能夠幫助團隊內部進行高效溝通，這樣能保證方案能夠又快又好的實現。

05. 頁面丨頁面的最終產出

頁面其實是模板的“高保真”，它填充了頁面當中真實的數據內容，重點是將原型信息替換為有代表性的真實內容，讓頁面能被用戶快速感知。

在頁面階段主要是以視覺出發，目的也是通過你的頁面，能夠讓所有人快速知道最終實現出來的效果究竟如何，并且了解真實內容填充以后，我們的模板、組織、分子 能否應對目前的內容量。

在頁面當中，我們還需要限制具體的內容量，比如在下方的頁面當中，我們就需要分析內容的具體數值，進而去書寫設計備注，讓我們設計頁面時，知道究竟有哪些局限。

Phase 2 優點丨原子設計為什么如此重要

我們了解完原子設計的定理過后再來分析一下：原子設計為什么在B端設計當中如此重要？

01. 構建設計系統的基礎

因為隨著 B 端行業當中產品的火爆，越來越多的企業產品線擴大，開始需要設計系統來提升開發與設計的工作效率（理論上），因此想通過設計系統對產品設計規范。而制作設計師系統就必須要了解原子設計理論，因為它能夠幫助我們一步一步的去搭建整個系統，這樣能夠避免當你在開始搭建系統時，造成的各種問題：

• 頁面不統一，設計系統之間的頁面差距過大，因此沒辦法查看對應的頁面信息
• 過于相似，很多企業的設計系統總給人似曾相識的感覺，這種情況，我們能夠在 定義原子與分子的時候盡可能避免

因此了解它的基礎構成后，能夠有一套核心理論指導你們進行實操。

02. 幫助我們分析頁面

很多同學拿到一個頁面，通常會被視覺元素所干擾：比如這張圖片好不好看？這個圖標畫得怎么樣？讓我們沒辦法聚焦到某一個維度分析。

而原子設計理論當中，我們便可以從五個維度進行整理，比如以下圖為例，在去分析的時候給人的感覺是，頁面很丑，但具體丑在哪里，我們只能夠抽象的去說出 1-2 點，不能夠將其涵蓋完整。

那我們通過原子設計理論分析，就可以得出：

a.原子：在原子層面，頁面的所有的元素風格沒有統一，查看對應的顏色畫板當中發現，在整個頁面里面一共用到 XX 種顏色，很明顯不符合我們頁面的設計思想。

b.分子：在一個 圖例當中，出現了兩種完全不同大小的字體，沒辦法將其統一呈現，因此在圖表的模塊當中，顯然不太合理。

c.組織：頁面不同的模塊之間，差距過大，導致組織與組織之間，整體設計不太協調。

d.模板：在同一個區域當中，出現 4 個工作臺 字段，明顯在原型設計的過程當中缺乏規劃，沒有經過思考。

e.頁面：頁面高保真視覺…… emmm~ 一言難盡~

03. 快速產品迭代

原子設計能夠幫助產品進行快速迭代，無論是交互還是視覺，我們都可以通過原子實現頁面的快速調整，進而讓產品快速迭代。在日常的 B 端工作當中，主要有兩類迭代需求：換膚、視覺提升。

換膚可以完全基于 Figma 當中的 Style 快速完成，這其實就是在調整原子設計理論當中的 顏色原子 來快速實現。

視覺提升則主要針對 顏色、圖標、圓角、投影 等多個視覺元素的調整，進而實現頁面的整體提升。

Phase 3 缺點丨原子對于頁面設計造成的影響

這里談影響，主要是去聊聊關于原子設計這個理論，究竟會有哪些缺點？

01. 限制過多，鐐銬跳舞

我常說 B 端設計就是帶著鐐銬跳舞，其實同樣嚴格的原子設計理論也會有兩面性，一方面它是能夠保證我們的設計下限會更高，同樣的它也局限了我們的設計上限。

在一個頁面，設計規范當中已經對于這里的信息有了明確的規定，所以我們再去做設計的時候，考慮的只能夠將這些信息，按照已有的規定來進行實現。

因此在對創意型設計的時候，他確實會限制我們的，思想活躍度。

舉一個例子，比如在一個業務組件當中，本身已經就有了 很多通用的組件，那我還需要業務組件嗎？這就是一個典型的弊端，這也就導致所有的頁面總是由統一的這些內容構成，看起來更加的模板、不好用。

關于原子，大家不用過于神秘化，其實就是一個將復雜的事物分析簡單的一種方式，只不過我們在設計的過程當中會經常用到罷了。

[1]?如何分析問題，不妨看看我們的 B 端測試題思路

[2] 氣泡確認框一共包含有 5 個原子，分別是 圖標、文字、按鈕、容器、投影