編輯導讀：一些設計師在設計產品時會用借鑒別的大廠的設計系統，對自己的產品進行拆解，這樣的做法只是知其然不知其所以然。原子設計理論的出現就是為了幫助設計師去搭建屬于自己的設計系統，在國內大廠中應用比較廣泛。本文從七個方面對原子設計理念展開深入分析，希望對你有幫助。

“我們不設計頁面，我們設計構成元素的系統?！薄猄tephen Hay

一、前言介紹

原子設計理論并不是什么高大上的規則。

隨著網頁設計的持續發展，我們認識到開發設計系統（design system）的重要性，它最早就是為了讓網頁設計師更容易理解網頁的構成，后來才延伸到UI設計當中。

簡單來說，當公司的業務產品逐漸擴大時，我們需要制定一套完整的設計系統，提升設計和開發的協作效率，統一所有設計師的輸出物。

開始設計系統的制定時，大部分設計師可能都會先去網上找到大廠現成的設計系統，當拿到他們的成品的時候，會把自己的產品進行拆解和借鑒。這的確能快速解決問題，但是如果不理解其中的組織規則和邏輯，只是借鑒他們現成的設計系統，只能了解個大概，知其然而不知其所以然。

因此，原子設計理論的出現就是為了幫助我們去搭建設計系統，這套理論已經逐漸被國外一些大廠應用于創建統一和富有層次的設計系統。

原子是所有事物的基本構成物質，每一個化學元素都具有不同的性質，并且它們一旦被分解就會失去其意義。

分子是由兩個或兩個以上的原子通過化學鍵結合在一起的，這些原子的組合具有自己獨特的性質，并且相較于原子來說，更具實際意義和可操作性。

有機體是由分子有機地組合在一起的，這些相對復雜的結構可以從單細胞生物一直到像人類這樣難以置信的復雜生物體。

宇宙中的物質都可以被分解成為原子元素。

碰巧的是，我們的界面就是由一些基本的元素組成的。Josh Duck的“HTML元素周期表”完美闡述了我們所有的網站、APP、企業內部網、hoobadyboops等等是如何由相同的HTML元素組成的。

△Josh Duck的“HTML元素周期表”

接下來和大家細聊一下什么是原子設計；原子設計到底好在哪里；為什么要有設計系統；以及該如何利用原子理論創建自己的項目組件庫。

二、什么是原子設計

原子設計（Atomic Design）理念最早是由國外網頁設計師Brad Frost提出的，他從化學元素周期表中得到啟發，發現原子結合在一起，可以形成分子，進一步形成組織，從科學的角度來講，在宇宙中的所有事物都是由一組有序的原子組成。

Brad將這個概念應用到界面設計中，仔細觀察后我們不難發現，界面其實就是由一些基本的元素組成，文字，顏色和圖標等都是一個個原子。

通過原子設計，我們可以把界面看作是一個連貫的整體，同時也是一些元素的集合，每個元素都不盡相同，互相結合產生更多層次和結構，模塊之間相互統一。說到底，原子設計其實是一種設計方法論，它由原子、分子、組織、模塊和頁面共同協作，由此創作出統一和富有層次的設計系統。

簡單來說：原子結合在一起，形成分子，進一步結合形成的生物體。原子理論意味著在已知宇宙中的所有事物都可以分解為一組有限的原子元素。

原子設計是一種方法，由五個不同的階段一起工作，以更慎重和更具層次的方式創建界面設計系統。從而創造出更有效的用戶界面系統的一種設計方法。

它的五個不同階段是：

1. 原子(Atoms)：為頁面構成的基本元素，例如標簽、輸入框、文字、顏色等；
2. 分子(Molecules)：由原子構成的簡單UI元素，例如按鈕；
3. 組織(Organisms)：相對分子而言，較為復雜的構成物，由原子及分子所組成；
4. 模板(Templates)：以頁面為基礎的架構，將以上元素進行排版；
5. 頁面(Pages)：將實際內容（圖片、文章等）放置在特定模板內；

原子設計不是一個線性的過程， 它更像是一個心理模型，來幫助我們把用戶界面看作是一個連貫的整體，同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色。下面，讓我們更深入的了解每一個階段哦～

1. 原子

如果原子是物質的基礎組成部分，那么我們用戶界面的“原子”就是那些構成我們用戶界面的基本構件了 。在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線等。

在團隊開始新項目時，為了保證各個頁面具有統一的設計風格，我們會制定一套簡易的視覺規范，在關鍵的設計元素上，各個設計師達成一致，這樣就能很大程度保證不同頁面的風格統一，并在這個基礎上去探索更有創新意義的設計方案。

在模式庫中，原子一目了然地展示了所有的基本樣式，當你回來繼續開發和維護你的設計系統時，這是一份很有用的設計參考指南。

2. 分子

分子是原子組合建立的元素，兩個原子即可組成一個分子。

在界面中，分子就像是一個由UI元素組成的相對簡單的組織。例如，搜索框里的文字和圖標共同打造一了個搜索表單分子。

以按鈕為例，它的組成元素包含了文字、色塊、圖標和柵格。合并后，這些抽象的原子從毫無關聯到又一個共同的目的，圖標和文字互相配合傳達意義，顏色定義了按鈕的特性，柵格為按鈕定義了一個尺寸和規范。

將單個元素組裝為簡單的功能組是我們一直以來構建用戶界面的方式，可幫助UI設計人員和開發人員堅持單一職責原則，這種方式簡單且復用性高，可以保證界面具有良好的可用性。

以界面設計中的表單為例，表單是一個非常常見的設計元素，一個表單分子是由文字、圖標和線條原子組成。這些原子合并后，得到的是一個可以應用在任何信息展示或者功能入口的組合。

3. 組織

組織是由分子或原子或其它有機體組成的相對復雜的UI部分 。這些組織組成了界面的不同部分。

通過結合分子和原子，我們可以構建更復雜和可擴展性的模塊，這個稱之為組織，其實也可以稱之為組件，這些組件組成了界面的不同部分。同樣以表單為例，一個表單我們可以通過數量的組合，以及間距的調整，元素的增減，在界面中表達不同的場景和含義。從建立分子到建立更精細的組件，這為設計師和開發人員提供了重要的內容構建思路。

組件在解放設計師生產力方面有著重要的作用，我們可以把界面中常見的組件進行分類整理，如搜索、表單、圖片和卡片等，這些常用組件基本能滿足日常的設計需求。

以Aribnb為例，他們主要分為3類：卡片、表單和內容。

每個標簽內容的設計形式盡量都保持統一，因此負責不同內容模塊的設計師只要選擇同一個組件就能完成頁面的設計。在短時間內就可以完成頁面超多的復雜項目，極大的提升了團隊的設計效率。

在網頁端最典型的例子就是網站導航，搜索表單，我們幾乎訪問的每個網站都會看到這些類型的組件。

4. 模板

原子，分子和組織的這種語言有助于我們有意識地構造設計系統的組件。但是，最終我們必須采用一個更適合描述我們最終產出的語言，這樣才好匯報給老板、客戶和同事，簡單來說就是說人話。

模版的本質就是線框圖，在這一步我們基本可以看到一個產品的形態。我們可以不斷調整組件和分子組合在一起的效果來嘗試不同的方案，找到一個相對合適的方案。

模版的意義就在于可以專注于頁面的內容結構布局，而不是頁面的最終內容，此時模版內容是隨時可以調整的，嘗試不同的方案，在多個模版中進行對比，在這個階段改動和溝通保證了最低成本。因此，模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。

模板是頁面級別的對象，它將組件放置在布局中，并顯示設計的底層內容結構。在設計一個有效的設計系統時，必須在布局的環境中展示組件的外觀和功能，以證明這些部件組成了一個功能良好的整體。

模板的另一個重要特征是它們專注于頁面的底層內容結構，而不是頁面的最終內容。

設計系統必須考慮內容的動態性質，因此，把例如標題和文字段落的圖像大小和字符長度此類組件的重要屬性說清楚是很有幫助的。

5. 頁面

頁面是模板的具體實例，填充了真實的內容（圖片、文字等）后形成頁面，也就是常說的「視覺稿」，將占位符替換為有代表性的真是內容，使設計系統有了生命。在模版的基礎上進行優化和完善就形成了頁面最終的視覺方案。

頁面階段是原子設計中最具體的階段，由于一些眾所周知的原因這個階段非常重要。別忘了，這可是用戶在訪問你的界面時會實際看到和交互的內容。

除了演示用戶所看到的最終界面之外， 頁面對于測試底層設計系統的有效性是必不可少的 。在頁面階段，我們可以看到當將真實內容應用于設計系統時，所有這些模式如何運作。

所有的一切看起來都很棒嗎？如果答案是否定的，那么我們可以回過頭去修改我們的分子、生物體和模板，以更好地滿足我們內容的需求。

頁面還提供了一個表達模板變量的地方，這對建立強大而可靠的設計系統至關重要。以下是模板變量的幾個例子：

1. 用戶在其購物車中有一個商品，另一個用戶在其購物車中有十個商品。
2. 網頁APP的儀表板通常顯示最近的活動，但是該部分對于首次使用的用戶是禁用的。
3. 一篇文章標題可能是40個字符長，而另一篇文章標題可能是100個字符長。

在所有這些例子中，底層的模板是相同的，但用戶界面將會隨著內容的動態性質而改變。這些變化直接影響了底層分子，有機體和模板的構建方式。因此，創建解釋這些變量的頁面有助于我們建立更具彈性的設計系統。

這就是原子設計！這五個不同的階段同時協同工作，以產生有效的用戶界面設計系統。

總結：

• 原子是最基礎的UI元素，并且是可以用作界面的元素構建塊；
• 分子是用于形成相對簡單的UI組件的原子集合；
• 組織是形成界面各個部分的相對復雜的部件；
• 模板將組件放置在布局中，并演示設計的底層內容結構；
• 頁面將真實內容應用于模板，設計出視覺稿，并最終成為開發落地的依據；

三、為何要用原子設計作為理論指導

原子設計為制作設計系統提供了清晰的方法?？蛻艉蛨F隊成員通過實際的設計流程與步驟，能更好的去理解設計系統的概念。

原子設計使我們能夠從抽象的設計中過渡到具體的設計中來，因此我們可以對一個設計系統進行一致性和可伸縮性等類似特性的控制。

通過模塊化的設計系統調動組件，可以使我們開發新的產品時，從開始就可以對產品進行嚴格的把控與一定程度上的控制，進而規避了事后風險。

開發之前不確定好系統模塊化，毫無邏輯的去開發，開發到一半發現功能與需求對不上等問題逐漸產生，會導致產品的延期、人員成本的浪費、資金成本的增加，產品的迭代率的下降、進而影響市場先機與市場占有率。

原子化設計與原來的樣式庫設計思路不一樣，原子化設計從抽象到具象，從元素到組件，讓設計師從底層開始思考，對整個設計會有更清晰的理解。同時也能讓設計更加統一，在新增組件的時候更謹慎。

原子設計的原理可以最大程度保證任何一個設計組件的構成與開發構建組件一一對應。

同時應用原子設計的設計軟件（e.g., Sketch, Figma)可以給新設計師足夠的自由滿足需求變通，并且可以保證同一個設計組件的更新會覆蓋到任何一個使用這個組件的設計中。

原子設計為我們提供了一些關鍵的見解，幫助我們創建更有效、更深思熟慮的UI設計系統。

四、如何創建設計系統

如果產品規模小只需要1，2個設計師，大概率是前期不需要大費周章搞一個需要開發配合的設計系統，可以只利用Sketch或者Figma做一個像貼紙一樣的設計組件庫。

但是功能多了怎么辦，公司來新人了，當新設計師產出后就會發現與原設計師設計的風格不一樣，慢慢發現整體設計風格不統一了，只靠一個簡單的組件庫很難能滿足新功能需求，新功能貼紙上沒有設計或者設計需要變通，又或者是新設計師忙著交工忘記檢查自己新組件和已有組件的異同。

這時候就會需要一個設計師領頭去重新整理設計系統，走查發現同一個正文所用的十幾個不同字號，又或者是十幾個透明度不同的灰黑色字體，所有組件跟現有上線產品對比整理好后一并交給開發，開發再一一整理代碼庫。

設計系統（Design Systems）對于很多年輕設計師可能十個新名詞，但是設計規范和組件等我們應該還是有一定認知的。在設計的過程中，我們會被其影響。

在我們日常所使用的APP產品中，如Apple、Google、Airbnb、Uber、滴滴等，他們的產品體驗非常流暢，用戶使用產品時能夠高效地滿足需求，在其良好的體驗背后都有著一套強大的設計系統做支撐。

1. 為什么需要設計系統

1）團隊協作，體驗一致

以滴滴為例，雖然只是一個簡單的打車應用，但是其旗下的業務卻很多，快出、出租車、順風車等，每個業務都由不同的團隊和設計師負責。

可以想象如果沒有設計系統，任由各模塊設計師自由發揮，風格各異，出來的結果可想而知。而有了設計系統的幫助，就會感覺界面風格非常統一，感覺是出自同一個設計師之手，可見其設計系統的功勞不小。

2）系統的管理多樣性

在設計過程中，我們會發現過程中，我們會發現每個業務的形態都是基于不同的場景，因為場景的多樣性，在表現上就會催生出不同的樣式。

如果每個業務都用一種樣式表達，久而久之當業務增長過快時，我們現有的設計模式就會難以滿足。

Airbnb的設計方式就是非常值得參考的一個案例，從最開始是提供民宿，到后來新增的餐館服務，你會發現房源和餐館都用了同一套圖文信息結構，只是在內容的細節上有一些不同，這樣可以降低設計的難度。

設計師不用為每個場景思考一個設計模式而煩惱。同時，用戶在瀏覽不同場景的內同時，在相互切換中也不會產生為違和感，一切都是很自然的操作。

3）幫助產品成長，避免一次性設計

互聯網產品的成長模式是一種漸進式迭代，在產品初期的主要訴求是快速上線，等到產品上線獲取一定的用戶，證明它可以活下去時再逐步完善，增加更多的功能。每一次的迭代都是站在我們之前的思考之上，每一次的優化都會讓我們的設計更進一步，這是我們期望達到的結果。

以Uber為例，新版本繼承了黑色按鈕的設計，并和地圖進行了結合，地圖的配色和舊版本相比也變得生動了，這種改變并不是一蹴而就，而是建立在原有版本之上。

• 一致性（Consistency）：由于分解界面成單一元素，不論在哪一個頁面，UI元素的互動性是相同的，例如顏色變化、字體的排序、以及反饋。不但讓使用者體驗相同，在視覺上更為和諧。
• 效率（Efficiency）：由于建立了組件庫，一旦要更改某一個元素，可以馬上施行、應用。
• 跨部門的共通語言（Collaboration）：不僅方便設計師思考頁面的和諧性，也可以讓工程師、測試檢驗清楚頁面的邏輯架構及變化，減少不必要的來回溝通

在此，順便淺談下設計系統。

通常，設計系統包含的內容由設計原則、設計語言和組件庫，這是一個整體的概念。

2. 設計原則

設計原則是一個產品的核心設計理念，設計的本質就是解決問題，在制定設計原則時要建立在這個中心思想之上。

這些問題也許是一個業務形態，例如打車的場景，也許是一個設計形式，如表單。

設計形式又很多，我們應該如何選擇呢？相對合理的方法就是建立一個規則，所有的問題和形式都想這個規則靠攏，減少不確定性，這就是設計原則的出發點。因此我們可以理解為，設計原則就是一系列的規則，是我們設計過程中要遵循的中心思想。

例如：蘋果把審美作為第一要素存在于設計原則中，它的產品往往也是品味的代名詞，看看它的設計原則就知道了：

• 審美的完整性
• 一致性
• 直接操作
• 即使的反饋
• 隱喻
• 用戶可控
  

△ 官網：https://developer.apple.com/design/

再來看看Material Design，Google對其定義是一個完整統一的系統，結合了理論、資源和工具的數字體驗產品，相比而言它的設計原則就是更加獨特，這是它的設計原則：

• 材料是一種隱喻
• 大膽/圖形/強調/
• 運動賦予意義
• 靈活的基礎
• 跨平臺

△ 官網：https://material.io/design

由此可以看出，和iOS相比，Material Design的設計原則更加的抽象，因為他擁有一個獨特的設計世界觀，用還原的方法和物理方法呈現出它的本質，通過抽象的視覺卡片傳遞出設計的目的和原則。

3. 設計語言

在建立設計原則后，下一步就是制定一套設計語言規范，設計規范是設計系統的表現層，面向的對象是團隊設計師和開發者，他能幫助設計師的設計輸出保持風格統一。同樣也能幫助開發者高度還原設計。非常有利于設計師和開發者的協作。這套規范包含的有：字體、顏色、圖標和柵格。

4. 組件化設計

組件化設計主要作用有兩點，一是保證多人協作效率，組件化設計可以快速完成一個簡單頁面的設計，提升設計效率；二是保持產品體驗的統一性。

同時，組件化設計環節在設計系統中是一個相對重要的工作，需要有一個全局觀，要有較強的設計水平和溝通協作能力，這樣，組件化的落地才會得到很好的推進。

五、那些以原子理論構件的設計系統

在多屏時代，我們時時刻刻都在設計產品界面，需適配多系統，其中很重要的一點是如何在多系統之間保持體驗一致性，很多人想到的就是規范，要想做一套嚴謹邏輯好，靈活的設計規范，那么原子設計可以幫助我們來很好的實現它，它在構建設計系統中算是比較科學的一種方法，國外很多設計團隊都在使用這樣的設計方法。比如以下這幾個團隊：

1. Airbnb

Airbnb設計副總裁Alex Schleifer在IXDC2017國際體驗設計大會上分享了這一創新React Sketch app 管理設計系統， 這是為Airbnb的設計系統而設計的，其實就是個實時更新的代碼數據庫，可以實時查詢sketch數據、代碼，也可以下載圖標、設計模塊，所有工程師、設計師都可以免費下載。

△ 官網：https://airbnb.design/events/when-we-use-systems/

2. Frames

Frames 使用了精致的組件和先進技術，并結合 Sketch 構建了強大的 Web 設計系統，同樣能滿足修改原子，全局同步更新的功能，支持響應式布局。提供了近百個網頁模板，可以非常迅速地完成效果圖制作。

△ 官網：>http://framesforsketch.com

3. Nested Symbols

這是一套免費的設計系統，它將按鈕、輸入框、下拉菜單、通知等控件，都制作成了嵌套符號，方便自定義和編輯。

△ 官網：https://www.janlosert.com/

六、如何利用原子理論創建自己的組件庫

原子設計理論最大的價值，就是為設計體系/組件庫的構建提供思路和方法，如果你不滿足于市場上現有的設計系統，我們還可以自己創建。因此我們首先要為產品設計出一個獨特的視覺語言作為起點。這個視覺語言一定要有力度、易于擴展，必須能在所有地方奏效！

接下來就以 Sketch Library 功能來實現組件庫的創建。

1. 第一步：定義顏色（color）

將顏色添加 Main、Text、Status 等一級分類，例如：Color/Status；再添加二級分類，例如：Color/Status/Success 等，命名需使用「 / 」 符號區分層級結構。定義好顏色和命名后，將每個顏色轉換成 Symbol，便可統一調用。

2. 第二步：定義字體（font）

根據設計規范，將不同字號的文字樣式羅列出來，例如：Title 1、Body、Body2 等，按照「樣式名稱/顏色/對齊方式」的層級結構，將文字賦予 Text Style，整理出所有的字體樣式。

3. 第三步：定義圖標（icon）

將圖標放置在 24*24px 大小畫板內，從定義好的顏色系統中選擇合適的 Symbol，這樣替換圖標顏色時直接選定義好的顏色就可以了。在屬性面板中鎖定尺寸（size）大小，并把調整尺寸（Resizing） 設為上下左右同時吸附，以確保圖標在使用時可以等比縮放。

4. 第四步：加入其他元素（Elements）

根據以上對原子的定義和命名方式，依次完成對其他原子、分子和組織的定義，例如：按鈕、表單、空狀態等，整個過程都是通過 Symbol 的不斷嵌套，最終實現組件庫的創建。

5. 第五步：加入組件庫

使用快捷鍵「cmd+, 」打開 Preferences 面板，選擇「Libraries」（組件庫）標簽，點擊「Add Library」（添加組件庫）按鈕添加剛才的 Sketch 文件，完成后就可以從其他的 Sketch 文件中，對此庫里的元素進行調用了。

七、原子理論總結

寫在最后，原子設計是一套具有科學嚴謹的創建設計系統的方法論，是一個構建UI系統的心理模型。

原子設計使我們可以將我們的界面UI細分為原子元素，并通過這些元素組合在一起形成最終的界面。

原子作為整個理論最基礎的元素，當我們改變其中的原子時，整個體系都會發生變化。

原子的設計概念和sketch中的“符號”有異曲同工之妙，當我們改變其中一個元素時，其他所有包含這個元素的頁面都會發生變化，可以保證整個系統的一致性和層次感。

原子設計為界面元素提供了應用規則和組織原理，這套方法論對于設計系統建立、團隊協作、產品迭代都具有非常重要的指導意義。

拓展閱讀：

經常有同學問ios設計規范，安卓設計規范在哪看這類問題，最后，來推薦一些大平臺的設計網站，上文出現過的下面就不重復了。我們耳熟能詳的優秀設計都是來自于這些世界頂級互聯網公司，說真的，審美這東西還真是人家說了算～

反正看看又不要錢，都去康康唄～

Google Design：

谷歌設計中心，它非常全面的展示了谷歌的設計工作和概念。包括Material Design在內的所有關于設計、體驗、產品等互聯網領域的探索。

△ 網址：https://design.google/

Fluent Design：

微軟基于Windows10的設計語言，包括人機界面布局、控件、樣式及資源下載。

△ 網址：https://www.microsoft.com/design/fluent/#/

IBM Design Language：

IBM設計語言是偉大設計的代名詞，他將人們的需求轉化成精心打造的產品。在這里可以學習IBM設計團隊一用戶為中心設計的新思維方式。

△ 網址：https://www.ibm.com/design/

Facebook Design：

臉書設計官網，在國內，我們常?？吹侥槙脑O計文章被翻成中文為中國設計師所學習

△ 網址：https://facebook.design/

Uber Design：

作為全球第一家即使打車應用，優步其超前的設計理念和優秀的用戶體驗成為同類產品競相模仿的對象。

△ 網址：https://www.uber.deign.com/

Ant Design：

螞蟻金服設計平臺是阿里旗下子公司，基于螞蟻金服生態系統的跨設計與開發的體驗解決方案。

△ 網址：https://design.alipay.com/

參考資料：

《原子設計》官網

Airbnb 設計規范

Apple 設計規范

Material Design設計規范

Google及其他

本文由 @清秋印跡 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議