現(xiàn)在上車“原子設(shè)計(jì)”還來得及嗎？本文對(duì)原子設(shè)計(jì)的概念，好處進(jìn)行分析解讀，并總結(jié)了原子設(shè)計(jì)對(duì)設(shè)計(jì)系統(tǒng)和團(tuán)隊(duì)的影響，與大家分享。

原子設(shè)計(jì)的概念在2016年最先被Brad Frost提出來，之后慢慢由其概念引發(fā)出來的各種設(shè)計(jì)系統(tǒng)也日益成熟?；仡櫘?dāng)初做設(shè)計(jì)系統(tǒng)都是整理貼紙一樣的組件庫(kù)，今天想和大家細(xì)聊一下原子設(shè)計(jì)到底好在哪里，為什么要有設(shè)計(jì)系統(tǒng)和由原子設(shè)計(jì)引發(fā)的設(shè)計(jì)組織架構(gòu)變革。

01 為什么要有設(shè)計(jì)系統(tǒng)？

如果產(chǎn)品規(guī)模小只需要1，2個(gè)設(shè)計(jì)師，大概率是前期不需要大費(fèi)周章搞一個(gè)需要開發(fā)配合的設(shè)計(jì)系統(tǒng)。可以只利用Sketch或者Figma做一個(gè)像貼紙一樣的設(shè)計(jì)組件庫(kù)。但是功能多了怎么辦，要招人，當(dāng)新設(shè)計(jì)師產(chǎn)出后就會(huì)發(fā)現(xiàn)與原設(shè)計(jì)師設(shè)計(jì)的風(fēng)格不一樣，慢慢發(fā)現(xiàn)整體設(shè)計(jì)風(fēng)格不統(tǒng)一，只靠一個(gè)貼紙組件庫(kù)很難能滿足新功能需求，新功能貼紙上沒有設(shè)計(jì)或者設(shè)計(jì)需要變通，又或者是新設(shè)計(jì)師忙著交工忘記檢查自己新組件和已有組件的異同。

這時(shí)候就會(huì)需要一個(gè)設(shè)計(jì)師領(lǐng)頭去重新整理設(shè)計(jì)系統(tǒng)，挑出來發(fā)現(xiàn)同一個(gè)正文所用十幾個(gè)不同字號(hào)，又或者是十幾個(gè)透明度不同的灰黑色字體，所有組件跟現(xiàn)有上線產(chǎn)品對(duì)比整理好后一并交給開發(fā)，開發(fā)再一一整理代碼庫(kù)。

02 原子設(shè)計(jì)好在哪里？

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

但需要注意的是至少目前為止，還沒有哪一個(gè)設(shè)計(jì)軟件可以把設(shè)計(jì)系統(tǒng)的組件更新直接同步到開發(fā)端。大部分時(shí)候設(shè)計(jì)系統(tǒng)的組件迭代需要一個(gè)設(shè)計(jì)師和開發(fā)工程師同時(shí)分頭協(xié)作。針對(duì)某一個(gè)組件的更新效果達(dá)成共識(shí)后，設(shè)計(jì)師和開發(fā)工程師分頭對(duì)自己負(fù)責(zé)的設(shè)計(jì)系統(tǒng)和開發(fā)組件庫(kù)進(jìn)行更新。

03 原子設(shè)計(jì)的“始作俑者”

根據(jù)領(lǐng)英的資料顯示，原子設(shè)計(jì)的創(chuàng)始人Brad Frost在2016年提出這個(gè)概念時(shí)大概剛30歲出頭，擁有Interactive Multimedia（交互多媒體）本科學(xué)歷，雖非大牛校，但是此類型學(xué)歷常見于數(shù)字媒體（視頻，網(wǎng)站，移動(dòng)端等等）的開發(fā)設(shè)計(jì)，也有博物館和大型藝術(shù)展的交互裝置藝術(shù)，設(shè)計(jì)師可利用多種前端語(yǔ)言進(jìn)行可視化創(chuàng)意編程讓光影聲音形成各種電子藝術(shù)。言歸正傳，Brad就是因?yàn)橛辛嗽O(shè)計(jì)和編程的加持讓他可以提出并驗(yàn)證原子設(shè)計(jì)理念及可實(shí)施性。

04 原子設(shè)計(jì)的概念

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

1. Atoms 原子層
2. Molecules 分子層
3. Organisms 有機(jī)體
4. Templates 模版
5. Pages 頁(yè)面

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

原子形成分子，分子形成有機(jī)物。而原子其實(shí)還可以拆分為由電子，質(zhì)子和中子組成，為什么Brad不把其剝離為更小的子集呢？其實(shí)也是可以剝離的但只不過沒有必要是因?yàn)樵幼鳛檫@個(gè)概念最小集是需要可獨(dú)立運(yùn)作的。

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

Image source from Picserio.com

Image source from Smashing Magzine Castus

05 原子設(shè)計(jì)對(duì)應(yīng)組件

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

Atoms 原子層：?jiǎn)我豢晒ぷ鞯脑咏M件

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

Molecules 分子層：1-3個(gè)不同的原子組成的簡(jiǎn)單UI功能組件

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

Organisms 有機(jī)體：由多個(gè)分子組件組成

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

06 利用原子設(shè)計(jì)提升設(shè)計(jì)團(tuán)隊(duì)

啥，原子設(shè)計(jì)不是只針對(duì)設(shè)計(jì)系統(tǒng)么，為啥還會(huì)牽扯到設(shè)計(jì)團(tuán)隊(duì)？是的，沒錯(cuò)。除了原子設(shè)計(jì)的5層級(jí)概念，Brad還提出了一個(gè)叫Single Responsibility Principle （單一職責(zé)原則）的概念，如果是學(xué)編程的小伙伴就會(huì)了解這個(gè)概念是說一個(gè)系統(tǒng)有不同的模塊，每個(gè)模塊只負(fù)責(zé)一個(gè)功能，模塊和模塊之間的連帶性較小，所以這樣的系統(tǒng)魯棒性更強(qiáng)。

基于這個(gè)理念，如果設(shè)計(jì)系統(tǒng)的分子組件結(jié)構(gòu)相對(duì)簡(jiǎn)單，這樣組件可復(fù)用性和連接整個(gè)系統(tǒng)時(shí)就更加容易?；谶@個(gè)理念，Peter Merholz在他的一書Org Design for Design Orgs中提到了一種全新的設(shè)計(jì)團(tuán)隊(duì)管理方式。大意是現(xiàn)在設(shè)計(jì)，產(chǎn)品，開發(fā)團(tuán)隊(duì)的組合大部分是基于最有效的開發(fā)流程，根據(jù)單一職責(zé)原則，讓整個(gè)產(chǎn)品的每一環(huán)可以單獨(dú)開發(fā)運(yùn)作。

舉個(gè)例子，假設(shè)產(chǎn)品是一個(gè)線上購(gòu)物網(wǎng)站，如果將購(gòu)物系統(tǒng)分解為瀏覽商品，添加到購(gòu)物車以及付款完成購(gòu)物這3個(gè)簡(jiǎn)單環(huán)節(jié)，則團(tuán)隊(duì)會(huì)安排每一環(huán)節(jié)一個(gè)設(shè)計(jì)師，一個(gè)產(chǎn)品經(jīng)理和幾個(gè)開發(fā)人員，因?yàn)檫@樣產(chǎn)品和工程方面的管理會(huì)相對(duì)容易，但是對(duì)于設(shè)計(jì)師來講，因?yàn)閱蝹€(gè)人僅負(fù)責(zé)設(shè)計(jì)中的一環(huán)，個(gè)人產(chǎn)出也是受制于局部有限的設(shè)計(jì)功能，這與設(shè)計(jì)一直強(qiáng)調(diào)的完整的用戶體驗(yàn)流程或用戶旅程圖相左因?yàn)槟悴豢赡苋ピO(shè)計(jì)別的設(shè)計(jì)師負(fù)責(zé)的模塊。這也就是為啥大家有時(shí)喜歡去創(chuàng)業(yè)公司因?yàn)槟阌懈鄼C(jī)會(huì)負(fù)責(zé)整個(gè)產(chǎn)品閉環(huán)的設(shè)計(jì)。

基于Peter的理論，那么如果設(shè)計(jì)師都是一個(gè)個(gè)原子，其實(shí)可以把多個(gè)原子更松散的安插在多個(gè)流程環(huán)節(jié)中而不僅僅是只局限于其中一環(huán)。

結(jié)尾

在下篇文章里，小編會(huì)用真實(shí)案例講述如何用Sketch等軟件進(jìn)行原子設(shè)計(jì)系統(tǒng)構(gòu)建且如何與開發(fā)同步周旋。

#參考資料#

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

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

作者：XF；公眾號(hào)：FXUX設(shè)計(jì)

本文由 @XF 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。