來源：我們的設(shè)計(jì)日記（公眾號）
作者：skys
原子設(shè)計(jì)是一種設(shè)計(jì)方法蝗柔，是Brad Frost創(chuàng)造的该编，基于的想法是在界面設(shè)計(jì)中，經(jīng)常會用一些界面上最小的元素（原子）去搭建其他組件妹窖。感興趣的同學(xué)可以去Youtube上去了解全套方法教程或文章底部書籍詳細(xì)了解眉孩，本篇我將結(jié)合一些我理解的精髓分享給大家。
原子設(shè)計(jì)理論是2013年Brad Forst提出此設(shè)計(jì)概念技健，原子設(shè)計(jì)是一個設(shè)計(jì)方法論写穴，由五種不同的階段組合，創(chuàng)建一個有層次雌贱、更規(guī)范的設(shè)計(jì)規(guī)范系統(tǒng)啊送。
背景和概念
原子理論設(shè)計(jì)靈感來自于Brad Forst，在上化學(xué)課的時候欣孤，我們用肉眼看到的物體都是由原子(Atoms)組成馋没，原子結(jié)合在一起形成分子(Molecures)，分子組合成相對更復(fù)雜的組織(Organisms)降传。于是Brad借此概念運(yùn)用到設(shè)計(jì)中去篷朵，形成了一套設(shè)計(jì)方法。
▲ 如果大家很久沒有用化學(xué)可能需要回憶一下：氫和氧原子結(jié)合在一起形成水分子婆排。
▲ 在自然界中声旺，原子元素結(jié)合在一起形成分子，這些分子可以進(jìn)一步結(jié)合形成相對復(fù)雜的生物段只。
Brad認(rèn)為所有的設(shè)計(jì)無論UI或者網(wǎng)頁都是由若干元素組成腮猖。這種方法的關(guān)鍵思想是，小的獨(dú)立原子部分可以組合成更大的分子結(jié)構(gòu)赞枕，分子結(jié)構(gòu)可以組合成更大的生物體澈缺，然后可以作為模板和全頁的基礎(chǔ)。
如何進(jìn)行原子設(shè)計(jì)鹦赎？
原子設(shè)計(jì)核心理念谍椅，一切設(shè)計(jì)都是由最小的原子組成，然后原子可以演變成原子古话，分子雏吭，生物組織，模板陪踩，頁面杖们。
原子：為UI設(shè)計(jì)構(gòu)成的基本元素,文字大小，顏色肩狂，標(biāo)簽摘完、輸入，分割線傻谁，頭像或是一個按鈕孝治，也可以為抽象的概念，例如色調(diào)等。
分子：由分子構(gòu)成的簡單UI組件谈飒。
組織：相對分子而言岂座，較為復(fù)雜的構(gòu)成物，由原子及分子所組成杭措。
模板：以頁面為基礎(chǔ)的架構(gòu)费什，將以上元素進(jìn)行排版。
頁面：將實(shí)際內(nèi)容（圖片手素、文章等）套件在特定模板鸳址。
為了大家更好理解這個案例，接下來我會引用微信小程序設(shè)計(jì)規(guī)范為示例泉懦，和大家拆解（微信規(guī)范官網(wǎng)有下載）稿黍。
原子
正如前面所說，這個世界里所有元素生物都是由基礎(chǔ)的原子組成祠斧，那么原子是最小的生物闻察，原子是我們系統(tǒng)的絕對基礎(chǔ)。原子包括調(diào)色板琢锋，分割線辕漂，字體，單個元素（即標(biāo)題吴超，段落钉嘹，按鈕等）這些元素有個特點(diǎn)就是最小元素不可再切割。
分子
分子是由原子組成的鲸阻，在界面中跋涣，分子是作為一個單元可以組成UI元素的一個組件。例如鸟悴，表單陈辱，卡片，商品單元细诸，搜索框沛贪，按鈕等，由幾個原子連接在一起成為分子震贵。比如按鈕是由顏色利赋，字體原子組合而成分子。
組織
組織是我們開始看到界面匯合在一起的地方猩系。通過組合分子媚送，我們可以構(gòu)建更復(fù)雜但可重復(fù)的組織。
組織的的一個例子可能是標(biāo)題導(dǎo)航寇甸，其包括標(biāo)志塘偎，導(dǎo)航鏈接和搜索字段或注冊按鈕疗涉。
▲ 領(lǐng)券頁面（組織）= （原子：字體大小，頭像,icon）+ (分子：tab,導(dǎo)航吟秩，卡券列表)
▲ 設(shè)置頁面（組織）= （原子：字體大小博敬，頭像,icon，開關(guān)按鈕）+ (分子：tab,導(dǎo)航峰尝，列表)
模塊
以頁面為基礎(chǔ)的架構(gòu)，將以上元素進(jìn)行排版收恢，講原子武学，分子，組織進(jìn)行排版成一個頁面伦意，這個頁面上結(jié)合了很多組織火窒。
這些頁面簡稱模板，在UI設(shè)計(jì)中也叫設(shè)計(jì)組件驮肉，不同于分子是熏矿，這個頁面講原子，分子進(jìn)行了有規(guī)律組合离钝，形成了一個模塊票编。
▲ 比喻網(wǎng)站標(biāo)題的組織包括較小的分子，如主導(dǎo)航卵渴，搜索表單慧域，實(shí)用程序?qū)Ш胶突諛?biāo)組成。
▲ 購物網(wǎng)站的產(chǎn)品單元也是由一個個分子組成一個模塊浪读。
頁面
將實(shí)際內(nèi)容（圖片昔榴、文章等）套件在特定模板，你可以理解為這頁面就是用戶最終看到的頁面碘橘，每個頁面由將實(shí)際內(nèi)容（圖片互订、文章等）套件在特定模板。
▲ 產(chǎn)品網(wǎng)站的設(shè)計(jì)痘拆，同樣也是由原子仰禽，分子，組織错负，模塊組成一個頁面坟瓢。
原子設(shè)計(jì)的優(yōu)點(diǎn)
以上那5個概念是原子設(shè)計(jì)的5個基礎(chǔ)，在設(shè)計(jì)中犹撒，我們必須創(chuàng)建可重復(fù)使用的設(shè)計(jì)模式的系統(tǒng)規(guī)范折联，并能準(zhǔn)確的將內(nèi)容放在這些規(guī)范系統(tǒng)里面。
原子設(shè)計(jì)最大優(yōu)點(diǎn)之一是能夠在抽象和具體之間快速轉(zhuǎn)換识颊，可以看到這些元素如何結(jié)合在一起形成我們的最終頁面體驗(yàn)诚镰。
原子設(shè)計(jì)構(gòu)成了一個設(shè)計(jì)世界奕坟，這個世界里面所有設(shè)計(jì)都是由原子構(gòu)建，當(dāng)然不止有原子清笨，原子只有第一步月杉，第二步：分子，第三步：組織抠艾，第四步：模塊苛萎，第五步：頁面，運(yùn)用原子設(shè)計(jì)方法能夠保證我們的設(shè)計(jì)底層規(guī)范是科學(xué)的检号。
案例說明
▲ 我們來看看早期的Instagram界面腌歉，來解讀下這個設(shè)計(jì)中的原子，分子
原子：Instagram的UI圖標(biāo)齐苛，一些文本級元素和兩種圖像類型：主圖像和用戶的頭像圖像翘盖。
分子：幾個圖標(biāo)形成簡單組件，如底部導(dǎo)航欄和用戶可以對照片進(jìn)行評論或照片的照片操作欄凹蜂。此外馍驯，文本和圖像的簡單組合形成相對簡單的組件。
組織：在這里可以看到照片的形狀玛痊，包括用戶的頭像汰瘫，時間，照片本身擂煞，照片周圍的行動點(diǎn)吟吝，以及有關(guān)照片的信息，包括字?jǐn)?shù)和標(biāo)題颈娜。這個組織機(jī)體成為整個Instagram體驗(yàn)的基石剑逃，因?yàn)樗谡麄€設(shè)計(jì)體現(xiàn)里面不斷重復(fù)。
模板：組件在布局的上下文中融合在一起官辽，我們看到Instagram的內(nèi)容框架蛹磺，突出顯示動態(tài)內(nèi)容，如用戶的點(diǎn)贊同仆，頭像萤捆，照片。
頁面：最終的頁面俗批，完整真實(shí)的內(nèi)容展現(xiàn)俗或，這有助于確保底層設(shè)計(jì)系統(tǒng)結(jié)合在一起形成一個完整功能的UI。
總結(jié)
我們在設(shè)計(jì)一套系統(tǒng)規(guī)范時候岁忘，不防嘗試用這套設(shè)計(jì)理論辛慰，它能讓我們系統(tǒng)更有生命力，同時比較完整干像。它也是構(gòu)建UI規(guī)范的一種設(shè)計(jì)模型帅腌，希望后面大家能通過這篇分享更多了解這個理論驰弄，幫助大家在工作中去使用。去更好的完成一個系統(tǒng)的建立速客。
最后戚篙，今天這篇分享只是拋磚引玉，只是把我這本書上理解的一部分精髓分享出來溺职，如果英文足夠好的同學(xué)可以去買上面這本書岔擂，這本書里面講的會更詳細(xì)一些，我也是看了很多文章和書以及工作實(shí)踐中覺得這套設(shè)計(jì)流程很有用浪耘，推薦給大家智亮。
