原子設(shè)計理論是一種分層思考的思維模式，能很好的指導(dǎo)我們?nèi)ヂ涞卦O(shè)計系統(tǒng)，幫助我們提升對產(chǎn)品設(shè)計整體把控的能力。

前言

原子設(shè)計理論是當(dāng)下比較火熱也非常實用的設(shè)計理念，它是一種分層思考的思維模式，能很好的指導(dǎo)我們?nèi)ヂ涞卦O(shè)計系統(tǒng)，幫助我們提升對產(chǎn)品設(shè)計整體把控的能力。原子設(shè)計是指導(dǎo)設(shè)計實踐的基礎(chǔ)理論，并非什么高大上的原則，它套用了英國化學(xué)家/物理學(xué)家約翰·道爾頓提出的“物質(zhì)的最小單位是原子”這一理論，即宇宙中已知所有物體都可以分解為一組有限的原子。在人們的認(rèn)知中，原子不管發(fā)生任何化學(xué)變化都是不可再分的最小單位，也是構(gòu)成各種物質(zhì)的基礎(chǔ)。（PS：微粒（原子）在化學(xué)反應(yīng)中不可分割，但在物理狀態(tài)中可以分割。比原子更小的單位有電子，中子，質(zhì)子，介子，光子，夸克等）。在互聯(lián)網(wǎng)非常發(fā)達(dá)的今天，原子設(shè)計理論更是成為了 UI 設(shè)計中不可分割的一部分，既增加了團(tuán)隊工作效率、降低成本，同時更易于產(chǎn)品設(shè)計維護(hù)、推動著迭代與更新。那么就有設(shè)計師會好奇，原子設(shè)計理論到底是什么、如何運(yùn)用、能解決什么問題？現(xiàn)在筆者就和大家一起聊一聊，相信會對原子設(shè)計有一個全新的理解。

一、原子設(shè)計的基礎(chǔ)知識

1. 源于現(xiàn)實世界

由于化學(xué)變化中的最小單位是原子，絕大多數(shù)物品都是從原子級別開始、經(jīng)過一系列化學(xué)物理反應(yīng)而生，所以從這個角度出發(fā)，可以把物品的構(gòu)成從小到大分為：原子<分子<材料<結(jié)構(gòu)<物品，在生物學(xué)中也是類似這種概念，即：細(xì)胞<組織<器官<系統(tǒng)<生物體。在現(xiàn)實世界中，所有物質(zhì)都是按照這種結(jié)構(gòu)，逐漸從基礎(chǔ)到復(fù)雜的一個過程。如果將現(xiàn)實世界中物質(zhì)的這種組成方式應(yīng)用在數(shù)字產(chǎn)品中，從構(gòu)建一個基礎(chǔ)元素開始，如文字、色彩、按鈕、圖標(biāo)、輸入框等，按照一級一級的過程來設(shè)計，最終就成了大家所看到的用戶界面，也就是本文筆者要講的從分子到界面的整個過程。

2. 原子設(shè)計理論背景

原子設(shè)計是一個比較早的設(shè)計理念，是由國外網(wǎng)頁設(shè)計師 Brad Frost 從化學(xué)元素周期表中得到的理論概念，即宇宙中所有已知事物都可以分解為一組有限的原子，原子構(gòu)成分子、分子構(gòu)成組織，組織成為生命體。Brad Frost 通過化學(xué)中的元素找到靈感，發(fā)現(xiàn)頁面也可以按照不同的維度拆分，與化學(xué)中的原子、分子、組織進(jìn)行類比，在 2013 年提出原子設(shè)計理論并將其應(yīng)用于界面設(shè)計。

Brad Frost“打散重組式”的設(shè)計思路被廣泛應(yīng)用于產(chǎn)品界面設(shè)計中，當(dāng)?shù)讓幽０嫦嗤瑫r，用戶界面為反應(yīng)內(nèi)容所發(fā)生的動態(tài)變化將直接影響基礎(chǔ)分子、組織以及模版的構(gòu)建方式，因此，在清楚這些變化后所創(chuàng)建的頁面更有助于打造彈性、動態(tài)的設(shè)計系統(tǒng)。

3. 什么是原子設(shè)計

原子設(shè)計是創(chuàng)建設(shè)計系統(tǒng)的一種思維模式，它由原子、分子、組織、模塊和頁面 5 個層級組成，每個層面都不盡相同，利用各元素之間的相互協(xié)作構(gòu)建出統(tǒng)一且富有層次的設(shè)計系統(tǒng)。

通過原子設(shè)計理論，我們將它和頁面關(guān)聯(lián)成一個有機(jī)整體，其中的每個元素都發(fā)揮著至關(guān)重要的作用，基于不同元素的結(jié)合衍生出更多的層次結(jié)構(gòu)，以形成有效的界面。

4. 為什么能作為理論指導(dǎo)

原子設(shè)計從抽象到具象、從元素到組件，讓設(shè)計師從底層思考，為制作設(shè)計系統(tǒng)提供了清晰的方法。當(dāng)項目一開始時就可以對產(chǎn)品設(shè)計的質(zhì)量進(jìn)行嚴(yán)格把控，使后續(xù)的界面視覺效果更加統(tǒng)一。原子設(shè)計可以最大程度的保證設(shè)計師的組件庫與開發(fā)組件一一對應(yīng)，當(dāng)某個組件需要批量修改時，能確保同一個組件的更新可以同步覆蓋到任何一個已使用的這個組件中去，省時省力。

二、從原子到頁面的五個階段

從原子到頁面，每一個階段在界面設(shè)計系統(tǒng)層級中都扮演著非常重要的角色，它像是一個心智模型幫助我們將用戶界面看作是一個連貫的整體，也可以是整體與部分的集合。下面，讓我們深入了解每一個階段。

1. 原子-基礎(chǔ)元素

如果說現(xiàn)實世界中的原子是構(gòu)成物質(zhì)的基礎(chǔ)部分，那么在用戶界面中的原子就是構(gòu)成設(shè)計的基礎(chǔ)元素了，例如顏色、文字、圖標(biāo)、分隔線等，這些小元素本身并不具備特有功能，但需要高度重視，因為頁面中的任何內(nèi)容都是由原子組成。在設(shè)計系統(tǒng)中，原子清晰地展示了各種基本樣式，只要動手開始設(shè)計頁面，就要將頁面中的原子進(jìn)行設(shè)定，以保持風(fēng)格的統(tǒng)一。后續(xù)管理維護(hù)設(shè)計系統(tǒng)時，這也是一份極其重要的參考指南。

2. 分子-原子的組合

分子由多個原子以一定的次序和排列方式結(jié)合，便形成了一個簡單、便捷的可復(fù)用性組件，這些分子可幫助設(shè)計、開發(fā)人員減少混亂并提高效率。

分子具有明確的功能意義，例如搜索框有文字、圖標(biāo)、色塊這些原子，每個單獨(dú)的原子本身并不會產(chǎn)生任何作用，但結(jié)合在一起后，便被賦予了獨(dú)有的功能，文字和圖標(biāo)相互配合傳達(dá)含義，色塊界定了可操作范圍，再通過柵格為搜索框定義了一個固定的尺寸與規(guī)范。

3. 組織-界面組件

組織（有機(jī)體）是由多個分子、原子構(gòu)成并具有特定功能的集合體，設(shè)計師可利用組織建立模塊化意識，以便對頁面結(jié)構(gòu)有更深入的理解。組織是界面中較為復(fù)雜的部件，其擴(kuò)展性和復(fù)用性很強(qiáng)，在解放設(shè)計師生產(chǎn)力方面有著重要作用，例如承載各類信息的卡片、列表、表單等，通過這些部件便形成了界面的不同部分。

部分設(shè)計師容易將分子和組織混淆，需要明確一點，分子是較小的元素單位，而組織是邏輯復(fù)雜且較大的元素單位。以按鈕為例，一組文字和一個色塊組成按鈕（分子），但多個按鈕組合在一起、以不同的顏色區(qū)分選中的按鈕便形成了一個按鈕導(dǎo)航或篩選器（組織）。

4. 模板-頁面框架

原子、分子和組織能幫助我們有意識地構(gòu)建設(shè)計系統(tǒng)，但需要有一個合適的產(chǎn)品形態(tài)來描述我們最終產(chǎn)出的語言，這個形態(tài)就是模版，也可以將其理解為產(chǎn)品的低保真線框圖。在這個階段中，設(shè)計師并不知道具體的填充內(nèi)容是什么，但可以根據(jù)業(yè)務(wù)需求，合理地限定內(nèi)容性質(zhì)及展示區(qū)間，搭建出一個抽象的產(chǎn)品框架，為最后的頁面做鋪墊。模版并不是最終內(nèi)容，可以隨時調(diào)整，通過多模版的不同方案對比來確保頁面底層結(jié)構(gòu)的合理性，降低后續(xù)的改動和溝通成本。

5. 頁面-最終產(chǎn)出

當(dāng)模版的合理性驗證通過，就要在其中填充真實的數(shù)據(jù)內(nèi)容（圖片、文字等）和完善細(xì)節(jié)，以便向用戶精準(zhǔn)的傳達(dá)信息，最終形成完整的高保真效果圖，即視覺稿。需要注意的是，在此階段的模版進(jìn)一步驗證中，若存在問題需要返回上一階段繼續(xù)優(yōu)化，直到通過為止。一旦填充了具有代表性的真實內(nèi)容后再回去優(yōu)化，則會事倍功半，這也是很多設(shè)計師容易犯下的錯誤。

6. 階段小總結(jié)

經(jīng)過從原子到頁面五個階段的深入了解，大致總結(jié)如下：

1. 原子：構(gòu)成界面的最基礎(chǔ)且不可再分的元素，可以是一種顏色、一種字體或一個圖標(biāo)等。
2. 分子：由多個原子組合在一起、具有明確功能性的組件，如搜索框、表單、按鈕等。
3. 組織：將不同的分子、原子組合在一起，形成一個完整的功能模塊，如列表、承載各類信息的卡片等。
4. 模版：通過原子、分子、組織的相互關(guān)聯(lián)而得到的模版框架，即低保真原型圖。
5. 頁面：在模版的基礎(chǔ)上提供真實的內(nèi)容并完善細(xì)節(jié)，最終形成完整的高保真界面。

三、原子理論的實際運(yùn)用

1. 構(gòu)建設(shè)計系統(tǒng)

對于中大型企業(yè)，需要有一個穩(wěn)定的設(shè)計系統(tǒng)來提升設(shè)計與開發(fā)的工作效率，原子設(shè)計可作為核心理論指導(dǎo)我們進(jìn)行實操，一步步構(gòu)建、完善設(shè)計系統(tǒng)，以解決后續(xù)工作效率低、界面效果不統(tǒng)一的問題。

2. 界面設(shè)計分析

很多時候，設(shè)計師在設(shè)計之前會被各個模塊及內(nèi)容的差異所牽絆、而設(shè)計之后又被諸多的元素干擾，很難找出問題具體出在哪里，無法進(jìn)一步優(yōu)化。當(dāng)了解原子設(shè)計理論后，有了設(shè)計系統(tǒng)的存在，就可以分別從五個維度進(jìn)行分析，在問題的源頭一次性處理。

3. 產(chǎn)品更新迭代

不管是視覺還是交互，都可以通過原子設(shè)計實現(xiàn)快速迭代更新。例如產(chǎn)品設(shè)計風(fēng)格升級，尤其是小元素屬性（色值、圓角、尺寸...）的調(diào)整，一處修改、全局響應(yīng)。

四、原子設(shè)計能解決什么問題

1. 存在問題

在 20 世紀(jì) 60 年代以前，軟件設(shè)計通常是為了一個特定應(yīng)用在指定的計算機(jī)上設(shè)計和編制，屬于個人使用、個人操作、自給自足的私人定制化方式，幾乎沒有系統(tǒng)化的概念。而到了 60 年代中期，在計算機(jī)應(yīng)用范圍迅速擴(kuò)大、軟件開發(fā)迅速增長的加持下，私人定制再也無法滿足大規(guī)模、高復(fù)雜度的軟件系統(tǒng)，導(dǎo)致代碼無法復(fù)用，效率低下，后續(xù)的管理維護(hù)也極難進(jìn)行。

1968 年，NATO 在國際學(xué)術(shù)會議上首次將上述事件定義為軟件危機(jī)（Software crisis），并在 1968、1969 年連續(xù)兩次的會議中由 Douglas McIlroy 提出軟件工程的概念，利用組件式開發(fā)思路來解決代碼無法擴(kuò)展復(fù)用造成的低效率問題。而在互聯(lián)網(wǎng)巔峰時期的今天，設(shè)計領(lǐng)域同樣存在著類似問題：

1. 效果不統(tǒng)一：即便手速再快，很多地方繪制了自以為相同的元素，可設(shè)計的出入總在不經(jīng)意間，身在其中很難察覺，發(fā)現(xiàn)問題總在產(chǎn)品上線后。
2. 團(tuán)隊多成員：每個設(shè)計師分別負(fù)責(zé)單獨(dú)的業(yè)務(wù)版塊，沒有一個統(tǒng)一的規(guī)則約束，即時表達(dá)總是會有理解上的偏差，各自埋頭苦干的產(chǎn)出物并不像來自于同一個產(chǎn)品。
3. 設(shè)計效率低：沒有可復(fù)用的組件庫，就是活生生的工具人，時間都用在了重復(fù)畫圖上，更別說有時間去研究用戶、優(yōu)化細(xì)節(jié)、提升體驗了。
4. 開發(fā)效率低：設(shè)計的隨意性以及重復(fù)工作出現(xiàn)的偏差，是開發(fā)不斷重復(fù)寫代碼的原罪，而開發(fā)這些大量的無意義勞動所增加的數(shù)行代碼，也成了設(shè)計效果還原的最大障礙。

2. 解決問題

引用原子理論后的組件化設(shè)計，能給設(shè)計師帶來意想不到的效果。雖然原子設(shè)計理論不是唯一，但卻能解決下列這些常見的問題：

1. 效果一致：無論將元素組件用在哪個頁面，設(shè)計和開發(fā)都有了一致的樣式效果，也保證了用戶體驗的一致性。
2. 提高效率：在面對新的需求時，設(shè)計和開發(fā)可以將系統(tǒng)中的元素組件無限復(fù)用，快速搭建出界面模版，既節(jié)省了大量的時間，也減少了不必要的溝通成本。
3. 靈活性高：有了設(shè)計系統(tǒng)，可以從原子、分子開始極速完成簡單的界面設(shè)計，也可以從組織、模版開始快速構(gòu)建復(fù)雜的界面，根據(jù)實際需求靈活選擇原子設(shè)計中的任一階段。
4. 便于管理：對元素組件的統(tǒng)一整理，有效避免團(tuán)隊在多設(shè)計師的情況下重復(fù)設(shè)計一個組件或提供樣式相差無幾的版本，UI組件的數(shù)量、質(zhì)量得以控制，減少團(tuán)隊成員理解上的偏差，更有利于后期的管理維護(hù)。

五、結(jié)語

從自然組成到人造物品、再到現(xiàn)在的互聯(lián)網(wǎng)應(yīng)用，原子設(shè)計理論的運(yùn)用范圍之廣毋庸置疑，雖然這只是諸多方法論中的一種，但用來構(gòu)建科學(xué)、嚴(yán)謹(jǐn)?shù)脑O(shè)計系統(tǒng)的確非常有效。原子設(shè)計理論以全新的方式助力設(shè)計師打造好每一個元素組件，通過應(yīng)用規(guī)則和組織原理，對設(shè)計系統(tǒng)的建立和團(tuán)隊之間的相互協(xié)作都具有極為重要的指導(dǎo)意義，如此，廣大設(shè)計師都有必要將其掌握，以便在后續(xù)的實際項目中熟練運(yùn)用。

作者：能量眼球