資深設計師都會的原子設計理論

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

一、原子設計的基礎知識

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

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

2. 原子設計理論背景

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

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

3. 什么是原子設計

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

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

4. 為什么能作為理論指導

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

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

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

1. 原子-基礎元素

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

2. 分子-原子的組合

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

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

3. 組織-界面組件

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

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

4. 模板-頁面框架

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

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

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

6. 階段小總結

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

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

三、原子理論的實際運用

1. 構建設計系統(tǒng)

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

2. 界面設計分析

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

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

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

四、原子設計能解決什么問題

1. 存在問題

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

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

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

2. 解決問題

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

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

五、結語

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

（本文來此互聯(lián)網(wǎng)，僅供交流學習)