原子設(shè)計(jì)（atomic design）愈發(fā)火熱的設(shè)計(jì)理念，優(yōu)點(diǎn)很強(qiáng)大，使用組件化推動(dòng)的產(chǎn)品設(shè)計(jì)與迭代，增加團(tuán)隊(duì)的人效，降低成本。極大的節(jié)省設(shè)計(jì)師出圖的時(shí)間，開發(fā)人員也可以通過查看prd文檔，調(diào)取已有組件代碼完成開發(fā)需求，提高開發(fā)的工作效率，為公司節(jié)省人力成本。

當(dāng)公司的業(yè)務(wù)擴(kuò)大時(shí)，可能需要多個(gè)設(shè)計(jì)師共同支持同一個(gè)產(chǎn)品的設(shè)計(jì)，此時(shí)，就需要制定一套完整的設(shè)計(jì)系統(tǒng)，用來保證產(chǎn)品的設(shè)計(jì)風(fēng)格的統(tǒng)一性。

      那么，如何展開設(shè)計(jì)系統(tǒng)的制定從而統(tǒng)一設(shè)計(jì)師的產(chǎn)出，普遍的做法可能會(huì)先去搜索知名公司現(xiàn)成的設(shè)計(jì)系統(tǒng)，比較熟知的如：Ant design、Element、Fusion Design；然后將自己的產(chǎn)品進(jìn)行拆解和借鑒，這的確可以快速的解決問題，但是換個(gè)角度去想想，如果不理解它的規(guī)則和邏輯，往往只是能是了解個(gè)大概，所對(duì)應(yīng)產(chǎn)出的設(shè)計(jì)系統(tǒng)也很難真正的落地。

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

原子設(shè)計(jì)理念最早是由設(shè)計(jì)師Brad Frost提出的即：原子結(jié)合在一起可以形成分子，進(jìn)而形成組織，Brad將這個(gè)概念應(yīng)用到頁面設(shè)計(jì)中：頁面是由一些基本的元素組成，文字、顏色、和圖形等，通過這些基本的元素進(jìn)行不同的組合，從而創(chuàng)造出統(tǒng)一且層次豐富的設(shè)計(jì)系統(tǒng)。

原子

構(gòu)成一個(gè)頁面的基本元素，如標(biāo)題、圖標(biāo)等，和原子間組合形成的任何元素。

在團(tuán)隊(duì)開始新的項(xiàng)目時(shí)，為了保證各個(gè)頁面具有統(tǒng)一的設(shè)計(jì)風(fēng)格，首先會(huì)定制一套簡易的視覺規(guī)范，定義的內(nèi)容包括、字體、顏色、柵格和圖標(biāo)等，這些就是界面中最基礎(chǔ)的原子。在關(guān)鍵的設(shè)計(jì)元素上，各設(shè)計(jì)師同學(xué)達(dá)成一致，保證不同頁面的風(fēng)格統(tǒng)一，并在這個(gè)基礎(chǔ)上去探索更有創(chuàng)新意義的設(shè)計(jì)方案。

分子

原子組合建立的元素，兩個(gè)原子即可組成一個(gè)分子 。

以按鈕為例，它的組成元素包含了文字、色塊背板、圖標(biāo)和柵格。在組合后這些抽象的原子從毫無關(guān)聯(lián)到有一個(gè)共同的目的，圖標(biāo)和文字互相配合傳達(dá)意義，顏色定義了按鈕的特性，柵格為按鈕定義了一個(gè)尺寸和規(guī)范。

   將單個(gè)元素搭建成一個(gè)簡單的組合，是大部分構(gòu)建界面的一種方式 這種方式簡單且可復(fù)用性高，可以保證界面具有良好的可用性，開發(fā)和設(shè)計(jì)也是一樣的，可以根據(jù)規(guī)則進(jìn)行編寫代碼，提升迭代的效率，以表單為例，它是一個(gè)非常常見的設(shè)計(jì)元素 一個(gè)表單分子是由文字圖標(biāo)和線條原子組成，這些原子合并后得到的是一個(gè)可以應(yīng)用在任何信息展示或者功能入口的組合。

組織

通過組合分子和原子，可以構(gòu)建更復(fù)雜和可拓展性的模塊，也就是組件。

這些組件組成了界面的不同部分。同樣以表單為例，一個(gè)表單我們可以通過組合數(shù)量，調(diào)整間距，增刪元素等，在界面中表達(dá)不同的場(chǎng)景和含義。從建立分子到建立更精細(xì)的組件，這為設(shè)計(jì)師和開發(fā)人員提供了重要的內(nèi)容構(gòu)建思路。

      組件在提高設(shè)計(jì)師效率方面有著重要的作用，我們可以把界面中常見的組件進(jìn)行分類整理，如搜索、表單、圖片、和卡片等，這些常用組件基本能滿足日常的設(shè)計(jì)需求。如下圖為例他們主要分為三類：卡片、表單和內(nèi)容。每個(gè)標(biāo)簽欄內(nèi)容的設(shè)計(jì)形式盡量保持統(tǒng)一，因此負(fù)責(zé)不同內(nèi)容模塊的設(shè)計(jì)師只要選擇同一個(gè)組件，就能完成頁面的設(shè)計(jì)。在短時(shí)間內(nèi)就可以完成大量界面，極大的提升了設(shè)計(jì)效率。

模板

多個(gè)組織和分子的組合，形成了一個(gè)完整的頁面框架，模板的本質(zhì)其實(shí)可視為線框圖。

到這一步已經(jīng)可以看到一個(gè)產(chǎn)品的基本形態(tài)。模板展示不同組件和分子組合在一起時(shí)的效果，可以不斷調(diào)整組件之間的布局來嘗試不同的方案，直到達(dá)到一個(gè)相對(duì)合適的方案。模板的意義在于可以專注于頁面的內(nèi)容結(jié)構(gòu)布局，而不是頁面的最終樣式，此時(shí)模板內(nèi)容是隨時(shí)都可以調(diào)整的，不斷的嘗試不同的方案，在多個(gè)模板中進(jìn)行對(duì)比，在這個(gè)階段降低了改動(dòng)和溝通的成本。保證設(shè)計(jì)方案在原型階段的多樣性。

頁面

將占位符內(nèi)容替換為有代表性的真實(shí)內(nèi)容，在模板的基礎(chǔ)上進(jìn)行優(yōu)化和完善 就形成了頁面最終的視覺方案。頁面是模板的具體實(shí)例，代表了真實(shí)內(nèi)容的具體方案。

以listen FM為例，這是一個(gè)選擇目的地的選項(xiàng)，該表單通過圖標(biāo)和文字的組合 清晰的展現(xiàn)了功能場(chǎng)景，有了實(shí)際的內(nèi)容后，我們可以發(fā)現(xiàn)組件能否很好的呈現(xiàn)內(nèi)容。

原子設(shè)計(jì)為界面元素提供了應(yīng)用規(guī)則和組織原理 這套方法論對(duì)于設(shè)計(jì)系統(tǒng)建立、團(tuán)隊(duì)協(xié)作、產(chǎn)品迭代都具有非常重要的指導(dǎo)意義。

本文僅供交流學(xué)習(xí)，下一篇我們來聊聊怎么去創(chuàng)建設(shè)計(jì)系統(tǒng)，那我們就下周見啦?。?！

                                                                              感謝閱讀

                                                                                         

                                                                           記得點(diǎn)個(gè)贊哦

                                                                                   ∨