每當(dāng)你做設(shè)計(jì)規(guī)范時(shí)候有沒(méi)有很苦惱，如何才能把界面所需樣式覆蓋完，如何在多平臺(tái)、多系統(tǒng)之間采用一致的語(yǔ)言，而不會(huì)影響體驗(yàn)，如何保證多系統(tǒng)品牌調(diào)性一致，國(guó)外一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師 Brad Frost ，寫(xiě)了一本書(shū) Atomic Design ，這本書(shū)是關(guān)于如何構(gòu)建套設(shè)計(jì)系統(tǒng)方法論的著作，今天就和大家詳細(xì)了解下。

下圖是《Atomic Design》作者本人：

原子設(shè)計(jì)是什么

原子設(shè)計(jì)是創(chuàng)造設(shè)計(jì)系統(tǒng)的一套方法論，就是由原子、分子、生物、模式、頁(yè)面構(gòu)成，如下圖：

可能大家有些不明白，說(shuō)更清晰一些就是，我們構(gòu)建UI界面其實(shí)都是由一些小原子組成，如顏色、字體、網(wǎng)格、圖標(biāo)／圖形、陰影、動(dòng)效等等，這些都是所有界面的基礎(chǔ)元素，我們叫做原子。

那么再來(lái)細(xì)一點(diǎn)，假如按鈕，它是分子，它是由圖形或字體或顏色這些小原子組成，明白了嗎？

繼續(xù)推，那么構(gòu)成生物組織就是由這些前期定義好的分子組成，下圖是一個(gè)分子：

到這里相信大家應(yīng)該明白其工作原理了，一套熟悉的模式出來(lái)了。

那我們?yōu)槭裁匆獙W(xué)習(xí)原子設(shè)計(jì)

在多屏?xí)r代，我們時(shí)時(shí)刻刻都在設(shè)計(jì)產(chǎn)品界面，需適配多系統(tǒng)，其中很重要的一點(diǎn)是如何在多系統(tǒng)之間保持體驗(yàn)一致性，很多人想到的就是規(guī)范。對(duì)，沒(méi)錯(cuò)，可是如何做一套嚴(yán)謹(jǐn)邏輯好，靈活的設(shè)計(jì)規(guī)范？

那么原子設(shè)計(jì)可以幫助我們來(lái)很好的實(shí)現(xiàn)它，它在構(gòu)建設(shè)計(jì)系統(tǒng)中算是比較科學(xué)的一種方法，國(guó)外很多設(shè)計(jì)團(tuán)隊(duì)都在使用這樣的設(shè)計(jì)方法，來(lái)規(guī)范自己的設(shè)計(jì)體系，那么今天我們來(lái)詳細(xì)的探索下它的一些實(shí)際運(yùn)用案例。

實(shí)例操作

前面鋪墊了那么多，終于等到這一步了，有木有很激動(dòng)，好了回歸正題，前面大概介紹其工作原理，那么現(xiàn)在，請(qǐng)開(kāi)始你的表演吧（奶奶般的微笑）！我會(huì)分詳細(xì)步驟和大家說(shuō)。

• 構(gòu)建原子
• 構(gòu)建分子
• 構(gòu)建生物
• 構(gòu)建模式
• 最終頁(yè)面

1. 構(gòu)建原子

這里建立的原子是頁(yè)面中所需要的基礎(chǔ)元素。

（1）字體（整體系統(tǒng)字體層級(jí)，這里省略詳細(xì)內(nèi)容）

PingFang SC? ? ? Regular

PingFang SC? ? ? Semibold

（2）圖標(biāo)（整個(gè)系統(tǒng)圖標(biāo)規(guī)范樣式）

（3）顏色（整個(gè)系統(tǒng)顏色體系）

（4）網(wǎng)格（系統(tǒng)所需間距系統(tǒng)）

（5）陰影（設(shè)計(jì)語(yǔ)言所需投影，沒(méi)有可以不要）

（6）黃金比例（界面所需尺寸比例）

2. 構(gòu)建分子

分子是前面構(gòu)建原子的任意組合，這里你可以構(gòu)建出系統(tǒng)所需要的所有小分子，既單個(gè)小組件，這里你需要窮舉所有可能性，如下面的列表和按鈕分子。

3. 構(gòu)建生物

生物其實(shí)就是由多個(gè)分子集合而成如下：黃金比例／頭像列表／字體／按鈕 / 圖標(biāo)（一個(gè)功能組件）。

4. 構(gòu)建模式

模式其實(shí)就是由多個(gè)生物集合而成，導(dǎo)航／卡片。

5. 最終頁(yè)面

最后就是由前面構(gòu)建好的一系列生物組織，來(lái)構(gòu)成最終的視覺(jué)頁(yè)面。

總結(jié)

寫(xiě)在最后，原子設(shè)計(jì)是一套具有科學(xué)嚴(yán)謹(jǐn)?shù)膭?chuàng)建設(shè)計(jì)系統(tǒng)的方法論，是一個(gè)構(gòu)件ui系統(tǒng)的心理模型，因此希望以后大家都能從中借鑒一些方式。

那當(dāng)我們真實(shí)設(shè)計(jì)中所運(yùn)用時(shí)候，如何去做呢？

首先是需要確定視覺(jué)語(yǔ)言方向，定好方向后，開(kāi)始運(yùn)用原子設(shè)計(jì)方法論來(lái)構(gòu)建一套科學(xué)嚴(yán)謹(jǐn)且靈活性高的設(shè)計(jì)系統(tǒng)。

本次到此結(jié)束，如果你有什么疑問(wèn)歡迎多和我溝通

推薦閱讀

下面推薦三篇文章，和本文都有一些相同體系化知識(shí)，感興趣可以深入閱讀。

http://m.codemsi.com/pd/1022391.html

如上集合之前分析谷歌設(shè)計(jì)語(yǔ)言和本篇文章有著一些體系思路

http://m.codemsi.com/ucd/910698.html

如上（如何科學(xué)構(gòu)建設(shè)計(jì)網(wǎng)格）

http://m.codemsi.com/it/993771.html

如上（排版設(shè)計(jì)原則）

#專(zhuān)欄作家#

Tony，微信公眾號(hào)：洞見(jiàn)設(shè)計(jì)，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。百度設(shè)計(jì)師。很樂(lè)意幫助年輕設(shè)計(jì)師成長(zhǎng)，簡(jiǎn)歷指導(dǎo)，每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn)，擅長(zhǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)，關(guān)注【洞見(jiàn)設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

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

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