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

前言

原子設(shè)計(jì)理論是當(dāng)下比較火熱也非常實(shí)用的設(shè)計(jì)理念，它是一種分層思考的思維模式，能很好的指導(dǎo)我們?nèi)ヂ涞卦O(shè)計(jì)系統(tǒng)，幫助我們提升對產(chǎn)品設(shè)計(jì)整體把控的能力。原子設(shè)計(jì)是指導(dǎo)設(shè)計(jì)實(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è)計(jì)理論更是成為了 UI 設(shè)計(jì)中不可分割的一部分，既增加了團(tuán)隊(duì)工作效率、降低成本，同時(shí)更易于產(chǎn)品設(shè)計(jì)維護(hù)、推動(dòng)著迭代與更新。那么就有設(shè)計(jì)師會(huì)好奇，原子設(shè)計(jì)理論到底是什么、如何運(yùn)用、能解決什么問題？現(xiàn)在筆者就和大家一起聊一聊，相信會(huì)對原子設(shè)計(jì)有一個(gè)全新的理解。

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

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

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

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

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

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

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

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

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

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

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

二、從原子到頁面的五個(gè)階段

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

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

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

2. 分子-原子的組合

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

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

3. 組織-界面組件

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

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

4. 模板-頁面框架

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

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

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

6. 階段小總結(jié)

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

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

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

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

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

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

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

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

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

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

1. 存在問題

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

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

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

2. 解決問題

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

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

五、結(jié)語

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

作者：能量眼球