編輯導(dǎo)語(yǔ)：在自然界中，物品是按原子-分子-材料-結(jié)構(gòu)-物品構(gòu)成的，一級(jí)一級(jí)從基礎(chǔ)到復(fù)雜，而在設(shè)計(jì)中，也有對(duì)應(yīng)的設(shè)計(jì)方法——原子方法論。本文作者結(jié)合案例，分析了原子方法論在設(shè)計(jì)中的應(yīng)用，一起來(lái)看一下吧。

一、自然界的啟發(fā)

在化學(xué)反應(yīng)上，保持化學(xué)性質(zhì)的最小單位是分子，化學(xué)變化中的最小單位是原子。由于絕大多數(shù)人造物品基本都是從原子級(jí)別出發(fā)經(jīng)過(guò)一系列化學(xué)物理反應(yīng)制得物品，所以從這個(gè)角度來(lái)說(shuō)，物品的構(gòu)成從小到大依次可分為為：原子-分子-材料-結(jié)構(gòu)-物品。

在生物學(xué)上也有類(lèi)似的層級(jí)概念：細(xì)胞-組織-器官-系統(tǒng)-生物體。

類(lèi)似的結(jié)構(gòu)在自然中隨處可見(jiàn)，可以說(shuō)整個(gè)宇宙最根本的結(jié)構(gòu)便是這樣一級(jí)一級(jí)從基礎(chǔ)到復(fù)雜的。

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

扯遠(yuǎn)了，那么在設(shè)計(jì)中是否有對(duì)應(yīng)的結(jié)構(gòu)或者方法論呢？有的，那就是今天要介紹給大家的設(shè)計(jì)工具——原子方法論。

原子設(shè)計(jì)借鑒了剛剛提到的看待事物組成的方式，并將其應(yīng)用在數(shù)字產(chǎn)品中。例如我們看的界面是由一些基本的元素組成，如按鈕、圖標(biāo)、標(biāo)簽、文字、輸入框等。從構(gòu)建一個(gè)類(lèi)似的小模塊開(kāi)始，我們可以應(yīng)用類(lèi)似自然中這種一級(jí)一級(jí)的過(guò)程來(lái)設(shè)計(jì)和開(kāi)發(fā)我們的用戶(hù)界面。

原子設(shè)計(jì)由五個(gè)不同的階段組成，分別是：

• 原子
• 分子
• 有機(jī)體
• 模板
• 頁(yè)面

看看像不像前文提到的“原子-分子-材料-結(jié)構(gòu)-物品”人造物的組成結(jié)構(gòu)，只不過(guò)這里演變成了非實(shí)體的用戶(hù)界面結(jié)構(gòu)。

原子設(shè)計(jì)由原子、分子、有機(jī)體、模板和頁(yè)面共同協(xié)作以創(chuàng)造出更有效的用戶(hù)界面系統(tǒng)的一種設(shè)計(jì)方法。

原子設(shè)計(jì)不是一個(gè)線(xiàn)性的過(guò)程，它更像是一個(gè)心理模型，來(lái)幫助我們把用戶(hù)界面看作是一個(gè)連貫的整體，同時(shí)也是一些元素的集合。

這五個(gè)階段的每一個(gè)階段都會(huì)在我們的界面設(shè)計(jì)系統(tǒng)層級(jí)中扮演重要角色，現(xiàn)在，讓我們更深入的了解每一個(gè)階段。

1. 原子

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

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

2. 分子

分子就像是一個(gè)由UI元素組成的相對(duì)簡(jiǎn)單的組織。例如，一個(gè)表單標(biāo)簽、搜索框和按鈕共同打造一了個(gè)搜索表單分子。

將元素組裝為簡(jiǎn)單的功能組，由此形成一個(gè)簡(jiǎn)單、便攜、可重復(fù)使用的組件，可應(yīng)用到多個(gè)需要重復(fù)使用的地方。

創(chuàng)建簡(jiǎn)單的組件可幫助UI設(shè)計(jì)人員和開(kāi)發(fā)人員提高效率減少混亂。

相似而又不一致的功能組隨意使用，會(huì)大大增加界面的復(fù)雜性，會(huì)使得界面變得無(wú)比難用。因此，創(chuàng)建簡(jiǎn)單的組件分子使設(shè)計(jì)更規(guī)范，開(kāi)發(fā)更有效率，測(cè)試更容易，并促進(jìn)整個(gè)流程比較好地達(dá)成設(shè)計(jì)目的與實(shí)現(xiàn)效果的一致性。

3. 有機(jī)體（組織）

現(xiàn)在我們有簡(jiǎn)單、功能強(qiáng)大且可重復(fù)使用的組件，我們可以把它放在更進(jìn)一步的結(jié)構(gòu)中。

logo+主導(dǎo)航列表+搜索表單分子=標(biāo)題欄有機(jī)體。

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

4. 模板

模板是頁(yè)面級(jí)別的對(duì)象，它將組件放置在布局中，在這里我們可以通俗理解為線(xiàn)框圖，它展示了頁(yè)面的底層結(jié)構(gòu)。

以上的三個(gè)層面僅僅屬于相互割裂的個(gè)體，它們不足以支撐一個(gè)頁(yè)面，就像一堆器官胡亂堆在一起是無(wú)法組織成一個(gè)有機(jī)的系統(tǒng)的。但是當(dāng)我們基于產(chǎn)品及用戶(hù)的需求，將多個(gè)有機(jī)體進(jìn)行恰當(dāng)?shù)慕M合形成“模板”后，產(chǎn)品便開(kāi)始有了雛形，而這個(gè)模板就是交互設(shè)計(jì)師所繪制的原型圖。

從用戶(hù)體驗(yàn)五要素上來(lái)說(shuō)，它屬于框架層。

模板所存在的意義就是幫助設(shè)計(jì)師專(zhuān)注在功能、內(nèi)容的布局排版，搭建一個(gè)抽象化的產(chǎn)品模型為最后一步做鋪墊。

請(qǐng)注意，模板不是頁(yè)面最終呈現(xiàn)給用戶(hù)的成品。

所以在這一步，我們并不知道具體的填充內(nèi)容是什么，因?yàn)椴荒鼙ＷC內(nèi)容一直就是一成不變的，但是根據(jù)業(yè)務(wù)需要，我們?cè)谶@個(gè)階段可以限定內(nèi)容的合理區(qū)間，比如圖像元素的大小和文字長(zhǎng)度的變化。

因此設(shè)計(jì)框架時(shí)候，必須將合理的余量考慮進(jìn)去，來(lái)動(dòng)態(tài)地設(shè)計(jì)頁(yè)面的底層結(jié)構(gòu)，保證系統(tǒng)的彈性與兼容。

比如商品標(biāo)題文本長(zhǎng)度最大支持兩階或不超過(guò)16個(gè)字，超過(guò)了模板的承受最大值就要把多余文本進(jìn)行省略用“…”代替。

又比如購(gòu)物車(chē)列表中一個(gè)商品都沒(méi)有和有100個(gè)商品的展示；不同的權(quán)限導(dǎo)致不同的用戶(hù)看到的同類(lèi)元素或組件有所不同；同一個(gè)游戲框架下不同游戲的導(dǎo)航欄元素不同，有的是按時(shí)間結(jié)束，有的是按輪次結(jié)束，那么導(dǎo)航欄上就分別顯示“倒計(jì)時(shí)”和“輪次計(jì)數(shù)”；在自適應(yīng)頁(yè)面中，頁(yè)面寬窄不同，內(nèi)容卡片顯示的文本信息長(zhǎng)度也有多寡區(qū)別等等。

這里就不繼續(xù)舉例了。

5. 頁(yè)面

將實(shí)際內(nèi)容（圖片、文章等）套在模板上，頁(yè)面就是模板的具體實(shí)現(xiàn)。

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

在此階段，作為交互設(shè)計(jì)師我們主要干兩件事：驗(yàn)證模板、優(yōu)化視覺(jué)傳遞信息。

1. 進(jìn)一步驗(yàn)證模板的彈性，如果有問(wèn)題再返回上一階段繼續(xù)優(yōu)化。
2. 確定頁(yè)面調(diào)性，查看視覺(jué)效果是否準(zhǔn)確地向用戶(hù)傳達(dá)信息，調(diào)整視覺(jué)上的強(qiáng)弱對(duì)比來(lái)引導(dǎo)用戶(hù)行為，來(lái)達(dá)到設(shè)計(jì)目的。

二、原子方法論優(yōu)點(diǎn)

1. 一致性

由于將頁(yè)面分解成單一元素，不論在哪一個(gè)頁(yè)面，基礎(chǔ)元素組件都會(huì)保持一致，使得設(shè)計(jì)在視覺(jué)上更為和諧。不但保證了用戶(hù)經(jīng)驗(yàn)一致性，也保證了開(kāi)發(fā)和測(cè)試對(duì)設(shè)計(jì)的理解一致性。

2. 靈活性&效率

原子設(shè)計(jì)方法還有個(gè)強(qiáng)大的地方就是可以節(jié)約大量的時(shí)間，使你更靈活地將精力用在創(chuàng)造力上。根據(jù)項(xiàng)目需求和時(shí)間進(jìn)度，可以自由選擇顆粒度切入到原子設(shè)計(jì)的某一個(gè)層級(jí)開(kāi)始。

如果我們想要一個(gè)大量的重復(fù)頁(yè)面，可以從模板和頁(yè)面開(kāi)始設(shè)計(jì)，創(chuàng)造多種可以復(fù)用的模板；如果我們想要更多創(chuàng)造性，建議從原子和分子開(kāi)始，從最基礎(chǔ)的地方發(fā)揮創(chuàng)意。

另外，原子設(shè)計(jì)可以節(jié)約我們?cè)诖罅恐貜?fù)性頁(yè)面或組件上反復(fù)調(diào)試花費(fèi)的時(shí)間，將節(jié)約下來(lái)的時(shí)間用在更具創(chuàng)意的事情上，如正確的用戶(hù)流、品牌標(biāo)識(shí)、用戶(hù)反饋分析、開(kāi)發(fā)創(chuàng)新的解決方案和進(jìn)行相關(guān)的情感設(shè)計(jì)……

3. 更少的組件，更高效的維護(hù)

對(duì)基礎(chǔ)元素的歸類(lèi)整理，實(shí)際上可以減少許多重復(fù)又類(lèi)似的設(shè)計(jì)，而且大大減少組件的數(shù)目，根據(jù)奧卡姆剃刀原則：如無(wú)必要勿增實(shí)體，大量應(yīng)用可通用替代的組件，維護(hù)起來(lái)也很方便，減少開(kāi)發(fā)和測(cè)試?yán)斫馍系钠睢?/p>

▲圖片來(lái)源于網(wǎng)上

三、案例

1. 國(guó)外FEVO網(wǎng)站改版，快速產(chǎn)生多套設(shè)計(jì)方案

此設(shè)計(jì)目的是要用最少資源達(dá)到目的，減少開(kāi)發(fā)成本，這時(shí)我們可以利用原子設(shè)計(jì)，歸納元素建立原子庫(kù)。通過(guò)組織原子建立視覺(jué)層次，突出重點(diǎn)，保持一致性。

▲圖片來(lái)源于網(wǎng)上

由于將網(wǎng)頁(yè)拆解成元素，可以更方便重復(fù)使用、創(chuàng)造不同的視覺(jué)效果。最后設(shè)計(jì)師設(shè)計(jì)了四種模板，客戶(hù)可以選擇相對(duì)的顏色體系決定要表達(dá)的品牌調(diào)性。

1）現(xiàn)代簡(jiǎn)潔版，高濃度的扁平色彩產(chǎn)生有活力、精神的視覺(jué)效果：

▲圖片來(lái)源于網(wǎng)上

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

▲圖片來(lái)源于網(wǎng)上

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

▲圖片來(lái)源于網(wǎng)上

2. vivo官網(wǎng)APP首頁(yè)改版

通過(guò)對(duì)有機(jī)體的基本構(gòu)成——原子分子，進(jìn)行歸類(lèi)、優(yōu)化、重組，解決老版產(chǎn)品的容器樣式混亂、無(wú)效信息多、信息不全的問(wèn)題。

1）統(tǒng)一了首頁(yè)所有 Banner 的規(guī)格、元素組成、文案排版，包括頭部 Banner / 新品 Banner / 穿插 Banner。

▲圖片來(lái)源于網(wǎng)上

2）統(tǒng)一了信息架構(gòu)的邏輯，文案限制在 3 階之內(nèi)，提供了「組合型」和「橫排型」兩種形式，對(duì)應(yīng)不同的場(chǎng)景。

▲圖片來(lái)源于網(wǎng)上

組合型容器提供 2 種規(guī)格，擁有同樣的信息量，根據(jù)業(yè)務(wù)需求自由組合。

▲圖片來(lái)源于網(wǎng)上

3）統(tǒng)一使用上圖下文的信息架構(gòu)，可隨場(chǎng)景進(jìn)行不同形式的拓展。

▲圖片來(lái)源于網(wǎng)上

最終形成了簡(jiǎn)約但又非常靈活的卡片有機(jī)體，促使新的模板和頁(yè)面能夠適應(yīng)當(dāng)和未來(lái)較長(zhǎng)時(shí)間的業(yè)務(wù)發(fā)展需求。

四、組件庫(kù)

其實(shí)這種分級(jí)和模塊化的思想，已經(jīng)出現(xiàn)在各大廠(chǎng)的組件庫(kù)了，比如螞蟻的Ant Design，谷歌的Material Design,前端代碼中也一樣有類(lèi)似的組件庫(kù)，比如基于vue的element-ui。

1. Material Design

Android早期特點(diǎn)就是：自由奔放，開(kāi)發(fā)者可以任意上傳自己的應(yīng)用，而不必通過(guò)審核；開(kāi)發(fā)者可以隨意按照自己的想法設(shè)計(jì)應(yīng)用，Google方面不予任何限制，結(jié)果就是用戶(hù)體驗(yàn)非?；靵y。

Google I/O 2014上正式發(fā)布了Material Design，該設(shè)計(jì)系統(tǒng)結(jié)合卡片式設(shè)計(jì)、現(xiàn)實(shí)世界里紙張的隱喻，旨在統(tǒng)一不同平臺(tái)、設(shè)備的設(shè)計(jì)語(yǔ)言，讓用戶(hù)在不同平臺(tái)上也有連貫的體驗(yàn)。

2. Ant Design

一套企業(yè)級(jí) UI 設(shè)計(jì)語(yǔ)言和 React 組件庫(kù)。

Ant Design 源自螞蟻金服體驗(yàn)技術(shù)部的后臺(tái)產(chǎn)品開(kāi)發(fā)，經(jīng)過(guò)大量的項(xiàng)目實(shí)踐和總結(jié)，抽象出的一套企業(yè)級(jí)的交互視覺(jué)規(guī)范，統(tǒng)一后臺(tái)項(xiàng)目的前端 UI 設(shè)計(jì)，屏蔽各種不必要的設(shè)計(jì)差異和前端實(shí)現(xiàn)成本，解放設(shè)計(jì)和前端開(kāi)發(fā)資源。

組件部分是Ant Design最大的亮點(diǎn)， 豐富的組件提供了覆蓋大部分應(yīng)用場(chǎng)景的能力。大量的組件可以靈活地應(yīng)用到后臺(tái)產(chǎn)品中，實(shí)現(xiàn)非常豐富又一致的功能體驗(yàn)。

3. element-ui

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

比如element-ui，是由餓了么前端團(tuán)隊(duì)推出的一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue.js的桌面組件庫(kù)，整個(gè)ui風(fēng)格簡(jiǎn)約很實(shí)用，同時(shí)也極大的提高了開(kāi)發(fā)者的效率，是一個(gè)非常受歡迎的組件庫(kù)。

五、最后

原子設(shè)計(jì)方法論在現(xiàn)實(shí)世界應(yīng)用非常廣泛，從自然組成到人造物品到互聯(lián)網(wǎng)應(yīng)用，甚至以后的VR、智能車(chē)載系統(tǒng)等智能化場(chǎng)景中，都有很好的前景和適應(yīng)性。

尤其是對(duì)于那種產(chǎn)品線(xiàn)很多，但又想統(tǒng)一設(shè)計(jì)原則和設(shè)計(jì)語(yǔ)言的公司非常有效。

當(dāng)然這只是諸多設(shè)計(jì)方法論中的一種，根據(jù)實(shí)際需求和場(chǎng)景綜合運(yùn)用各種方法達(dá)到最好的效果才是最重要的。

參考：

原子設(shè)計(jì)原文 https://atomicdesign.bradfrost.com/table-of-contents/

原子設(shè)計(jì)翻譯專(zhuān)欄https://www.zhihu.com/column/atomicdesign

Atomic Design原子設(shè)計(jì)|構(gòu)建科學(xué)規(guī)范的設(shè)計(jì)系統(tǒng)https://www.w3cplus.com/css/atomic-design.html

原子設(shè)計(jì)方法論！值得一學(xué)的設(shè)計(jì)思維模式http://www.codemsi.com/pd/5170845.html

一篇文章搞懂原子設(shè)計(jì)http://www.codemsi.com/ucd/4309333.html

大廠(chǎng)實(shí)戰(zhàn)！vivo官網(wǎng)APP首頁(yè)改版設(shè)計(jì)過(guò)程復(fù)盤(pán)http://www.codemsi.com/pd/5361939.html

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

題圖來(lái)自Unsplash，基于CC0協(xié)議