現在上車“原子設計”還來得及嗎？本文對原子設計的概念，好處進行分析解讀，并總結了原子設計對設計系統和團隊的影響，與大家分享。

原子設計的概念在2016年最先被Brad Frost提出來，之后慢慢由其概念引發出來的各種設計系統也日益成熟?；仡櫘敵踝鲈O計系統都是整理貼紙一樣的組件庫，今天想和大家細聊一下原子設計到底好在哪里，為什么要有設計系統和由原子設計引發的設計組織架構變革。

01 為什么要有設計系統？

如果產品規模小只需要1，2個設計師，大概率是前期不需要大費周章搞一個需要開發配合的設計系統?？梢灾焕肧ketch或者Figma做一個像貼紙一樣的設計組件庫。但是功能多了怎么辦，要招人，當新設計師產出后就會發現與原設計師設計的風格不一樣，慢慢發現整體設計風格不統一，只靠一個貼紙組件庫很難能滿足新功能需求，新功能貼紙上沒有設計或者設計需要變通，又或者是新設計師忙著交工忘記檢查自己新組件和已有組件的異同。

這時候就會需要一個設計師領頭去重新整理設計系統，挑出來發現同一個正文所用十幾個不同字號，又或者是十幾個透明度不同的灰黑色字體，所有組件跟現有上線產品對比整理好后一并交給開發，開發再一一整理代碼庫。

02 原子設計好在哪里？

從上面這個例子我們就可以看出首先貼紙組件庫需要經常維護，同時也需要和開發人員及時溝通同步更新代碼庫，同時貼紙組件庫也無法有效約束新設計師保證設計風格一致性。原子設計的原理可以最大程度保證任何一個設計組件的構成與開發構建組件一一對應。同時應用原子設計的設計軟件（e.g., Sketch, Figma)可以給新設計師足夠的自由滿足需求變通，并且可以保證同一個設計組件的更新會覆蓋到任何一個使用這個組件的設計中。

但需要注意的是至少目前為止，還沒有哪一個設計軟件可以把設計系統的組件更新直接同步到開發端。大部分時候設計系統的組件迭代需要一個設計師和開發工程師同時分頭協作。針對某一個組件的更新效果達成共識后，設計師和開發工程師分頭對自己負責的設計系統和開發組件庫進行更新。

03 原子設計的“始作俑者”

根據領英的資料顯示，原子設計的創始人Brad Frost在2016年提出這個概念時大概剛30歲出頭，擁有Interactive Multimedia（交互多媒體）本科學歷，雖非大牛校，但是此類型學歷常見于數字媒體（視頻，網站，移動端等等）的開發設計，也有博物館和大型藝術展的交互裝置藝術，設計師可利用多種前端語言進行可視化創意編程讓光影聲音形成各種電子藝術。言歸正傳，Brad就是因為有了設計和編程的加持讓他可以提出并驗證原子設計理念及可實施性。

04 原子設計的概念

基于Brad在其Atomic Design一書中詳細的描述和很多其他設計師的轉述，我再把其中精髓給大家復述一遍，盡量做到不贅述。（感覺好押韻啊 ?）首先Brad列出了5層級的作為Atomic Design的核心概念支架。

1. Atoms 原子層
2. Molecules 分子層
3. Organisms 有機體
4. Templates 模版
5. Pages 頁面

前三層是化學抽象出來的概念（原子，分子，有機體）后兩層（模版和頁面）感覺更像是基于前三層的累計結果形成的wireframe（框架圖）和high-fidelity mock（高保真原型圖）。

原子形成分子，分子形成有機物。而原子其實還可以拆分為由電子，質子和中子組成，為什么Brad不把其剝離為更小的子集呢？其實也是可以剝離的但只不過沒有必要是因為原子作為這個概念最小集是需要可獨立運作的。

Brad提出的原子設計理論的靈感來源于元素周期的化學概念。即每個化學元素都是一種原子，同時我們所見到的網站，手機app界面，其框架和內容都是可以經過原子分子有機物這種模式嵌套而成。

Image source from Picserio.com

Image source from Smashing Magzine Castus

05 原子設計對應組件

那么如何通過Atomic Design整理設計系統呢？Ed Orozco在他的Grouping components in atomic design systems一文中，把原有Brad的5層級的前三級（原子，分子，有機物）根據對應概念把設計組件進行一對一分類歸納，有些存在歧義的，小編也根據自己經驗進行了梳理，可酌情參考：

Atoms 原子層：單一可工作的原子組件

• Typographic styles 字體樣式
• Color swatches 顏色色板
• Icons 圖標
• Radio buttons 單選按鈕
• Checkboxes 多選框
• Sliders 滑桿
• Toggles 切換按鈕
• Profile pictures placeholders個人資料圖片占位符
• Product pictures placeholders 產品資料圖片占位符
• Buttons 按鈕
• Links 鏈接
• Input fields (without labels) 無標識輸入欄
• Tabs 標簽文字型按鈕（常見導航）
• Pills 藥丸型按鈕（常見熱門，歷史搜索關鍵字）
• Badges 提醒小紅點或數字（常見微信未讀提示）
• Tags 標簽
• Tooltips 信息提示框
• Loading Bar/Circle 加載條/加載圈

Molecules 分子層：1-3個不同的原子組成的簡單UI功能組件

• Dropdown menus 下拉菜單
• Radio buttons inside regular buttons 普通按鈕里嵌套單選按鈕
• Dropdown buttons 下拉按鈕
• Date pickers 日期選擇器
• Search components 搜索組件
• Blockquotes 引用組件
• Breadcrumbs 面包屑導航欄
• Card/Tile components 卡片/長條卡片組件
• Collapsible group items 可收縮群組
• Input fields (with labels) 帶標識輸入欄
• Media uploaders 上傳組件（選文件按鈕+標題）
• Loading components 加載模塊（進度條+X+名稱）
• Interactive Notifications/Pop-ups/Modal 1-2個按鈕的簡單提示框/彈窗/狀態窗 (cookie提示接受/拒絕）
• Pagination 頁面頁數選擇欄
• Media objects 媒體組件（產品小圖+標題+內容簡介）

Organisms 有機體：由多個分子組件組成

• Navigation/Tab bars 導航欄
• Video/Music players 視頻/音樂播放器
• Media grids 媒體表單（卡片組成的媒體庫表單）
• Tables 信息表格（常見小長條卡片組成）
• Carousels 輪播形式（常見卡片+選擇箭頭/…)
• Forms 信息表單

06 利用原子設計提升設計團隊

啥，原子設計不是只針對設計系統么，為啥還會牽扯到設計團隊？是的，沒錯。除了原子設計的5層級概念，Brad還提出了一個叫Single Responsibility Principle （單一職責原則）的概念，如果是學編程的小伙伴就會了解這個概念是說一個系統有不同的模塊，每個模塊只負責一個功能，模塊和模塊之間的連帶性較小，所以這樣的系統魯棒性更強。

基于這個理念，如果設計系統的分子組件結構相對簡單，這樣組件可復用性和連接整個系統時就更加容易?；谶@個理念，Peter Merholz在他的一書Org Design for Design Orgs中提到了一種全新的設計團隊管理方式。大意是現在設計，產品，開發團隊的組合大部分是基于最有效的開發流程，根據單一職責原則，讓整個產品的每一環可以單獨開發運作。

舉個例子，假設產品是一個線上購物網站，如果將購物系統分解為瀏覽商品，添加到購物車以及付款完成購物這3個簡單環節，則團隊會安排每一環節一個設計師，一個產品經理和幾個開發人員，因為這樣產品和工程方面的管理會相對容易，但是對于設計師來講，因為單個人僅負責設計中的一環，個人產出也是受制于局部有限的設計功能，這與設計一直強調的完整的用戶體驗流程或用戶旅程圖相左因為你不可能去設計別的設計師負責的模塊。這也就是為啥大家有時喜歡去創業公司因為你有更多機會負責整個產品閉環的設計。

基于Peter的理論，那么如果設計師都是一個個原子，其實可以把多個原子更松散的安插在多個流程環節中而不僅僅是只局限于其中一環。

結尾

在下篇文章里，小編會用真實案例講述如何用Sketch等軟件進行原子設計系統構建且如何與開發同步周旋。

#參考資料#

https://atomicdesign.bradfrost.com/chapter-2/

https://uxdesign.cc/grouping-components-in-atomic-design-systems-4d6e2095ea45

作者：XF；公眾號：FXUX設計

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

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