原子設計能夠指導我們去落地設計系統，去設計頁面。本篇文章，作者解釋了原子設計定理中物種類型的具體定義，以及說明了原子設計為什麼在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 端設計就是帶着鐐铐跳舞，其實同樣嚴格的原子設計理論也會有兩面性，一方面它是能夠保證我們的設計下限會更高，同樣的它也局限了我們的設計上限。

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

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

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

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

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

專欄作家

CE青年，CE青年，人人都是産品經理專欄作家。專注B端設計領域，一個2B行業的2B設計師。

本文原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議。

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部