設計師要了解的原子設計理論

Sponsor

原子設計理論是當下比較火熱也非常實用的設計理念，它是一種分層思考的思維模式，能很好的指導我們去落地設計系統，幫助我們提升對產品設計整體把控的能力。

原子設計是指導設計實踐的基礎理論，并非什么高大上的原則，它套用了英國化學家/物理學家約翰·道爾頓提出的“物質的最小單位是原子”這一理論，即宇宙中已知所有物體都可以分解為一組有限的原子。在人們的認知中，原子不管發生任何化學變化都是不可再分的最小單位，也是構成各種物質的基礎。（PS：微粒（原子）在化學反應中不可分割，但在物理狀態中可以分割。比原子更小的單位有電子，中子，質子，介子，光子，夸克等）。

在互聯網非常發達的今天，原子設計理論更是成為了UI設計中不可分割的一部分，既增加了團隊工作效率、降低成本，同時更易于產品設計維護、推動著迭代與更新。那么就有設計師會好奇，原子設計理論到底是什么、如何運用、能解決什么問題？現在筆者就和大家一起聊一聊，相信會對原子設計有一個全新的理解。

一、原子設計的基礎知識

1.源于現實世界

由于化學變化中的最小單位是原子，絕大多數物品都是從原子級別開始、經過一系列化學物理反應而生，所以從這個角度出發，可以把物品的構成從小到大分為：原子<分子<材料<結構<物品，在生物學中也是類似這種概念，即：細胞<組織<器官<系統<生物體。在現實世界中，所有物質都是按照這種結構，逐漸從基礎到復雜的一個過程。

如果將現實世界中物質的這種組成方式應用在數字產品中，從構建一個基礎元素開始，如文字、色彩、按鈕、圖標、輸入框等，按照一級一級的過程來設計，最終就成了大家所看到的用戶界面，也就是本文筆者要講的從分子到界面的整個過程。

2.原子設計理論背景

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

Brad Frost“打散重組式”的設計思路被廣泛應用于產品界面設計中，當底層模版相同時，用戶界面為反應內容所發生的動態變化將直接影響基礎分子、組織以及模版的構建方式，因此，在清楚這些變化后所創建的頁面更有助于打造彈性、動態的設計系統。

3.什么是原子設計

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

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

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

原子設計從抽象到具象、從元素到組件，讓設計師從底層思考，為制作設計系統提供了清晰的方法。當項目一開始時就可以對產品設計的質量進行嚴格把控，使后續的界面視覺效果更加統一。

原子設計可以最大程度的保證設計師的組件庫與開發組件一一對應，當某個組件需要批量修改時，能確保同一個組件的更新可以同步覆蓋到任何一個已使用的這個組件中去，省時省力。

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

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

1.原子-基礎元素

如果說現實世界中的原子是構成物質的基礎部分，那么在用戶界面中的原子就是構成設計的基礎元素了，例如顏色、文字、圖標、分隔線等，這些小元素本身并不具備特有功能，但需要高度重視，因為頁面中的任何內容都是由原子組成。

在設計系統中，原子清晰地展示了各種基本樣式，只要動手開始設計頁面，就要將頁面中的原子進行設定，以保持風格的統一。后續管理維護設計系統時，這也是一份極其重要的參考指南。

2.分子-原子的組合

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

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

3.組織-界面組件

組織（有機體）是由多個分子、原子構成并具有特定功能的集合體，設計師可利用組織建立模塊化意識，以便對頁面結構有更深入的理解。

組織是界面中較為復雜的部件，其擴展性和復用性很強，在解放設計師生產力方面有著重要作用，例如承載各類信息的卡片、列表、表單等，通過這些部件便形成了界面的不同部分。

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

4.模板-頁面框架

原子、分子和組織能幫助我們有意識地構建設計系統，但需要有一個合適的產品形態來描述我們最終產出的語言，這個形態就是模版，也可以將其理解為產品的低保真線框圖。

在這個階段中，設計師并不知道具體的填充內容是什么，但可以根據業務需求，合理地限定內容性質及展示區間，搭建出一個抽象的產品框架，為最后的頁面做鋪墊。模版并不是最終內容，可以隨時調整，通過多模版的不同方案對比來確保頁面底層結構的合理性，降低后續的改動和溝通成本。

5.頁面-最終產出

當模版的合理性驗證通過，就要在其中填充真實的數據內容（圖片、文字等）和完善細節，以便向用戶精準的傳達信息，最終形成完整的高保真效果圖，即視覺稿。

需要注意的是，在此階段的模版進一步驗證中，若存在問題需要返回上一階段繼續優化，直到通過為止。一旦填充了具有代表性的真實內容后再回去優化，則會事倍功半，這也是很多設計師容易犯下的錯誤。

6.階段小總結

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

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

三、原子理論的實際運用

1.構建設計系統

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

2.界面設計分析

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

3.產品更新迭代

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

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

1.存在問題

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

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

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

2.解決問題

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

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

五、結語

從自然組成到人造物品、再到現在的互聯網應用，原子設計理論的運用范圍之廣毋庸置疑，雖然這只是諸多方法論中的一種，但用來構建科學、嚴謹的設計系統的確非常有效。

原子設計理論以全新的方式助力設計師打造好每一個元素組件，通過應用規則和組織原理，對設計系統的建立和團隊之間的相互協作都具有極為重要的指導意義，如此，廣大設計師都有必要將其掌握，以便在后續的實際項目中熟練運用。

來源：能量眼球（ID：nengliangyanqiu）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。