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

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

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

Phase 1 什么是原子設(shè)計丨理解原子設(shè)計的背景

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

在原子設(shè)計理論當中，我們主要有 原子、分子、組織、模塊、頁面，這五種不同的類型，它們的關(guān)系由大到小，層層嵌套，而這種關(guān)系，就如同我們?nèi)シ治鰡栴}[1]，希望能夠通過一層一層的分析，去尋找設(shè)計當中的靈感。

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

01. 原子丨頁面當中的基礎(chǔ)元素

在整個頁面設(shè)計當中，我們把原子看作是設(shè)計頁面中最為基礎(chǔ)的元素單位。可以理解為頁面當中的任意內(nèi)容，都是由它組成。

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

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

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

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

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

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

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

它們的特點是：

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

其實分子就可以和大多數(shù)基礎(chǔ)組件進行對應(yīng)，因此也就意味著我們在建立好 Figma Style 過后就需要去定義不同的組件內(nèi)容。

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

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

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

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

比如以這個頁面為例，你可以發(fā)現(xiàn)頁面當中每一個模塊，我們都可以將其歸納為一個組織來進行設(shè)計，正是有了一個一個的組織，我們的頁面規(guī)則才會變得更加規(guī)整，也通過這樣，就能夠?qū)⒍鄠€組織進行復用，從而快速設(shè)計復用性的頁面。

04. 模板丨頁面當中固定

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

05. 頁面丨頁面的最終產(chǎn)出

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

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

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

Phase 2 優(yōu)點丨原子設(shè)計為什么如此重要

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

01. 構(gòu)建設(shè)計系統(tǒng)的基礎(chǔ)

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

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

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

02. 幫助我們分析頁面

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

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

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

a.原子：在原子層面，頁面的所有的元素風格沒有統(tǒng)一，查看對應(yīng)的顏色畫板當中發(fā)現(xiàn)，在整個頁面里面一共用到 XX 種顏色，很明顯不符合我們頁面的設(shè)計思想。

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

c.組織：頁面不同的模塊之間，差距過大，導致組織與組織之間，整體設(shè)計不太協(xié)調(diào)。

d.模板：在同一個區(qū)域當中，出現(xiàn) 4 個工作臺 字段，明顯在原型設(shè)計的過程當中缺乏規(guī)劃，沒有經(jīng)過思考。

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

03. 快速產(chǎn)品迭代

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

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

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

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

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

01. 限制過多，鐐銬跳舞

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

在一個頁面，設(shè)計規(guī)范當中已經(jīng)對于這里的信息有了明確的規(guī)定，所以我們再去做設(shè)計的時候，考慮的只能夠?qū)⑦@些信息，按照已有的規(guī)定來進行實現(xiàn)。

因此在對創(chuàng)意型設(shè)計的時候，他確實會限制我們的，思想活躍度。

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

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

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

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