編輯導語：在自然界中，物品是按原子-分子-材料-結構-物品構成的，一級一級從基礎到復雜，而在設計中，也有對應的設計方法——原子方法論。本文作者結合案例，分析了原子方法論在設計中的應用，一起來看一下吧。

一、自然界的啟發

在化學反應上，保持化學性質的最小單位是分子，化學變化中的最小單位是原子。由于絕大多數人造物品基本都是從原子級別出發經過一系列化學物理反應制得物品，所以從這個角度來說，物品的構成從小到大依次可分為為：原子-分子-材料-結構-物品。

在生物學上也有類似的層級概念：細胞-組織-器官-系統-生物體。

類似的結構在自然中隨處可見，可以說整個宇宙最根本的結構便是這樣一級一級從基礎到復雜的。

就像下圖所示，由2個氫原子和1個氧原子組成2份水分子。

扯遠了，那么在設計中是否有對應的結構或者方法論呢？有的，那就是今天要介紹給大家的設計工具——原子方法論。

原子設計借鑒了剛剛提到的看待事物組成的方式，并將其應用在數字產品中。例如我們看的界面是由一些基本的元素組成，如按鈕、圖標、標簽、文字、輸入框等。從構建一個類似的小模塊開始，我們可以應用類似自然中這種一級一級的過程來設計和開發我們的用戶界面。

原子設計由五個不同的階段組成，分別是：

• 原子
• 分子
• 有機體
• 模板
• 頁面

看看像不像前文提到的“原子-分子-材料-結構-物品”人造物的組成結構，只不過這里演變成了非實體的用戶界面結構。

原子設計由原子、分子、有機體、模板和頁面共同協作以創造出更有效的用戶界面系統的一種設計方法。

原子設計不是一個線性的過程，它更像是一個心理模型，來幫助我們把用戶界面看作是一個連貫的整體，同時也是一些元素的集合。

這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色，現在，讓我們更深入的了解每一個階段。

1. 原子

我們用戶界面的“原子”就是那些構成我們用戶界面的基本構件了 。這些原子包括了基本的HTML元素，例如表單標簽、輸入框、按鈕和其他基本不能拆解的元素。

除了具象的元素，色彩、字體等抽象概念也是原子。

2. 分子

分子就像是一個由UI元素組成的相對簡單的組織。例如，一個表單標簽、搜索框和按鈕共同打造一了個搜索表單分子。

將元素組裝為簡單的功能組，由此形成一個簡單、便攜、可重復使用的組件，可應用到多個需要重復使用的地方。

創建簡單的組件可幫助UI設計人員和開發人員提高效率減少混亂。

相似而又不一致的功能組隨意使用，會大大增加界面的復雜性，會使得界面變得無比難用。因此，創建簡單的組件分子使設計更規范，開發更有效率，測試更容易，并促進整個流程比較好地達成設計目的與實現效果的一致性。

3. 有機體（組織）

現在我們有簡單、功能強大且可重復使用的組件，我們可以把它放在更進一步的結構中。

logo+主導航列表+搜索表單分子=標題欄有機體。

有機體就是由多個分子、原子構成的模塊。形成一些具有特定功能的集合體，比如承載各類信息的卡片、列表等等。

4. 模板

模板是頁面級別的對象，它將組件放置在布局中，在這里我們可以通俗理解為線框圖，它展示了頁面的底層結構。

以上的三個層面僅僅屬于相互割裂的個體，它們不足以支撐一個頁面，就像一堆器官胡亂堆在一起是無法組織成一個有機的系統的。但是當我們基于產品及用戶的需求，將多個有機體進行恰當的組合形成“模板”后，產品便開始有了雛形，而這個模板就是交互設計師所繪制的原型圖。

從用戶體驗五要素上來說，它屬于框架層。

模板所存在的意義就是幫助設計師專注在功能、內容的布局排版，搭建一個抽象化的產品模型為最后一步做鋪墊。

請注意，模板不是頁面最終呈現給用戶的成品。

所以在這一步，我們并不知道具體的填充內容是什么，因為不能保證內容一直就是一成不變的，但是根據業務需要，我們在這個階段可以限定內容的合理區間，比如圖像元素的大小和文字長度的變化。

因此設計框架時候，必須將合理的余量考慮進去，來動態地設計頁面的底層結構，保證系統的彈性與兼容。

比如商品標題文本長度最大支持兩階或不超過16個字，超過了模板的承受最大值就要把多余文本進行省略用“…”代替。

又比如購物車列表中一個商品都沒有和有100個商品的展示；不同的權限導致不同的用戶看到的同類元素或組件有所不同；同一個游戲框架下不同游戲的導航欄元素不同，有的是按時間結束，有的是按輪次結束，那么導航欄上就分別顯示“倒計時”和“輪次計數”；在自適應頁面中，頁面寬窄不同，內容卡片顯示的文本信息長度也有多寡區別等等。

這里就不繼續舉例了。

5. 頁面

將實際內容（圖片、文章等）套在模板上，頁面就是模板的具體實現。

這里可以通俗地理解為真實的高保真原型或者實際效果圖了。

在此階段，作為交互設計師我們主要干兩件事：驗證模板、優化視覺傳遞信息。

1. 進一步驗證模板的彈性，如果有問題再返回上一階段繼續優化。
2. 確定頁面調性，查看視覺效果是否準確地向用戶傳達信息，調整視覺上的強弱對比來引導用戶行為，來達到設計目的。

二、原子方法論優點

1. 一致性

由于將頁面分解成單一元素，不論在哪一個頁面，基礎元素組件都會保持一致，使得設計在視覺上更為和諧。不但保證了用戶經驗一致性，也保證了開發和測試對設計的理解一致性。

2. 靈活性&效率

原子設計方法還有個強大的地方就是可以節約大量的時間，使你更靈活地將精力用在創造力上。根據項目需求和時間進度，可以自由選擇顆粒度切入到原子設計的某一個層級開始。

如果我們想要一個大量的重復頁面，可以從模板和頁面開始設計，創造多種可以復用的模板；如果我們想要更多創造性，建議從原子和分子開始，從最基礎的地方發揮創意。

另外，原子設計可以節約我們在大量重復性頁面或組件上反復調試花費的時間，將節約下來的時間用在更具創意的事情上，如正確的用戶流、品牌標識、用戶反饋分析、開發創新的解決方案和進行相關的情感設計……

3. 更少的組件，更高效的維護

對基礎元素的歸類整理，實際上可以減少許多重復又類似的設計，而且大大減少組件的數目，根據奧卡姆剃刀原則：如無必要勿增實體，大量應用可通用替代的組件，維護起來也很方便，減少開發和測試理解上的偏差。

▲圖片來源于網上

三、案例

1. 國外FEVO網站改版，快速產生多套設計方案

此設計目的是要用最少資源達到目的，減少開發成本，這時我們可以利用原子設計，歸納元素建立原子庫。通過組織原子建立視覺層次，突出重點，保持一致性。

▲圖片來源于網上

由于將網頁拆解成元素，可以更方便重復使用、創造不同的視覺效果。最后設計師設計了四種模板，客戶可以選擇相對的顏色體系決定要表達的品牌調性。

1）現代簡潔版，高濃度的扁平色彩產生有活力、精神的視覺效果：

▲圖片來源于網上

2）金色漸變+深色底創造出高貴的形象，適合奢侈品牌等場景：

▲圖片來源于網上

3）利用女性柔和的低飽和度撞色搭配，適合婚禮策劃、女性服裝春夏活動：

▲圖片來源于網上

2. vivo官網APP首頁改版

通過對有機體的基本構成——原子分子，進行歸類、優化、重組，解決老版產品的容器樣式混亂、無效信息多、信息不全的問題。

1）統一了首頁所有 Banner 的規格、元素組成、文案排版，包括頭部 Banner / 新品 Banner / 穿插 Banner。

▲圖片來源于網上

2）統一了信息架構的邏輯，文案限制在 3 階之內，提供了「組合型」和「橫排型」兩種形式，對應不同的場景。

▲圖片來源于網上

組合型容器提供 2 種規格，擁有同樣的信息量，根據業務需求自由組合。

▲圖片來源于網上

3）統一使用上圖下文的信息架構，可隨場景進行不同形式的拓展。

▲圖片來源于網上

最終形成了簡約但又非常靈活的卡片有機體，促使新的模板和頁面能夠適應當和未來較長時間的業務發展需求。

四、組件庫

其實這種分級和模塊化的思想，已經出現在各大廠的組件庫了，比如螞蟻的Ant Design，谷歌的Material Design,前端代碼中也一樣有類似的組件庫，比如基于vue的element-ui。

1. Material Design

Android早期特點就是：自由奔放，開發者可以任意上傳自己的應用，而不必通過審核；開發者可以隨意按照自己的想法設計應用，Google方面不予任何限制，結果就是用戶體驗非?；靵y。

Google I/O 2014上正式發布了Material Design，該設計系統結合卡片式設計、現實世界里紙張的隱喻，旨在統一不同平臺、設備的設計語言，讓用戶在不同平臺上也有連貫的體驗。

2. Ant Design

一套企業級 UI 設計語言和 React 組件庫。

Ant Design 源自螞蟻金服體驗技術部的后臺產品開發，經過大量的項目實踐和總結，抽象出的一套企業級的交互視覺規范，統一后臺項目的前端 UI 設計，屏蔽各種不必要的設計差異和前端實現成本，解放設計和前端開發資源。

組件部分是Ant Design最大的亮點， 豐富的組件提供了覆蓋大部分應用場景的能力。大量的組件可以靈活地應用到后臺產品中，實現非常豐富又一致的功能體驗。

3. element-ui

另外，在前端程序開發中，為避免重復造輪子，提高開發效率和一致性，許多為程序員定制的組件庫也很受歡迎。

比如element-ui，是由餓了么前端團隊推出的一套為開發者、設計師和產品經理準備的基于Vue.js的桌面組件庫，整個ui風格簡約很實用，同時也極大的提高了開發者的效率，是一個非常受歡迎的組件庫。

五、最后

原子設計方法論在現實世界應用非常廣泛，從自然組成到人造物品到互聯網應用，甚至以后的VR、智能車載系統等智能化場景中，都有很好的前景和適應性。

尤其是對于那種產品線很多，但又想統一設計原則和設計語言的公司非常有效。

當然這只是諸多設計方法論中的一種，根據實際需求和場景綜合運用各種方法達到最好的效果才是最重要的。

參考：

原子設計原文 https://atomicdesign.bradfrost.com/table-of-contents/

原子設計翻譯專欄https://www.zhihu.com/column/atomicdesign

Atomic Design原子設計|構建科學規范的設計系統https://www.w3cplus.com/css/atomic-design.html

原子設計方法論！值得一學的設計思維模式http://www.aharts.cn/pd/5170845.html

一篇文章搞懂原子設計http://www.aharts.cn/ucd/4309333.html

大廠實戰！vivo官網APP首頁改版設計過程復盤http://www.aharts.cn/pd/5361939.html

本文由 @style12689 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議