Atomic Design原子設計┃構建科學規範的設計系統

摘要： 最近在medium上看到一個設計理念正在興起，這個設計方法逐漸被國外一些大公司運用於建立有層次和成熟規範的設計系統中。筆者很興奮地讀了相關的外文文章，準備把這個非常棒的獨角獸設計流程分享給大家。 Introduction背景介紹 在2013年網頁...

最近在medium上看到一個設計理念正在興起，這個設計方法逐漸被國外一些大公司運用於建立有層次和成熟規範的設計系統中。筆者很興奮地讀了相關的外文文章，準備把這個非常棒的獨角獸設計流程分享給大家。

Introduction背景介紹

在2013年網頁設計師Brad Frost從化學中受到啟發：原子（Atoms）結合在一起，形成分子（Molecures），進一步結合形成的生物體（Organisms）。

在已知宇宙中的所有事物都可以分解為一組有限的原子元素（下圖是化學元素週期表）。

Brad將這個概念應用在介面設計，我們的介面就是由一些基本的元素組成的。Josh Duck的“HTML元素週期表”（下圖）完美闡述了我們所有的網站、APP、企業內部網、hoobadyboops等等是如何由相同的HTML元素組成的。

通過在大層面（頁）和小層面（原子）同時思考介面，Brad認為可以利用原子設計建立一個適應元件的動態系統。

Definition概念

原子設計是一種方法論，由原子、分子、組織、模板和頁面共同協作以創造出更有效的使用者介面系統的一種設計方法。

原子設計的五個階段分別是：

1. Atoms原子。 為網頁構成的基本元素。例如標籤、輸入，或是一個按鈕，也可以為抽象的概念，例如字型、色調等。

2. Molecules分子。 由原子構成的簡單UI元件。例如，一個表單標籤，搜尋框和按鈕共同打造了一個搜尋表單分子。

3. Organisms組織。 由原子及分子組成的相對複雜的UI構成物 。

4. Templates模版。 將以上元素進行排版，顯示設計的底層內容結構。

5. Pages頁面。 將實際內容（圖片、文章等）套件在特定模板，頁面是模板的具體例項。

Cases案例

在這裡介紹一個華人設計師將Atomic Design應用在網頁設計。

1. 專案背景

FEVO主要業務為協助客戶銷售業務，因此我們有一個default的活動頁面，客戶提供活動資訊及促銷機制，消費者即可上網購票。

2. 客戶需求

客戶希望可以根據他們的品牌，設計定製化的網頁，在有限的開發時間內要保持一致性。

3. 問題定義

• UI反饋方式不一致：易造成使用者經驗混亂，增長認知時間。

• 重點（購票）資訊不明顯：按鈕在視覺上與促銷優惠的黑色一致，沒有重點的介面減低了銷售的機會。

  

4. 設計過程

明確我們的設計目的是要用最少資源達到目的資源化，減少開發成本，讓客戶滿意，這時我們可以利用原子設計。

• 建立素材庫，即Atomic Design的歸納元素。通過組織元素建立視覺層次，突出重點。並將此作為一致性的標準。

  

• 根據使用情境，改變原子。

  由於素材庫將網頁拆解成元素，更方便重複使用、創造不同的視覺效果。最後設計師設計了四種模板，客戶可以選擇相對的顏色，頁面主要色彩會應改變，符合品牌形象。

  圖1：Modern現代簡潔版，高濃度的Primary Color，產生有活力、精神的視覺效果。

  

  圖2：Royal深色底創造出高貴的形象，適合百老匯、奢侈品牌等。

  
  圖3：Spring Breeze利用女性柔和的顏色搭配，適合婚禮策劃、春夏活動。
  
  
  圖4：Vibrant動感：漸變的背景，圖片與促銷優惠結合，在視覺上更為突出，適合演唱會、時尚秀等活動型別。
  
  

Benefits優點

• Consistency一致性。

  由於分解網站成單一元素，不論在哪一個頁面，UI元素的互動性是相同的，例如顏色變化、字型的排序、以及回饋。不但讓使用者經驗相同，在視覺上更為和諧。

  

• Efficiency效率。

  由於建立了Pattern Library元件庫，一旦要更改某一個元素，可以馬上施行、應用。

  

• Collaboration跨部門的共通語言。

  不僅方便設計師思考頁面的和諧性，也可以讓工程師、品質檢驗清楚頁面的邏輯架構及變化，減少不必要的來回溝通。

  

Criticism批評

• WHAT我們變成了用元件設計的機器人？

  很多人當聽到原子設計“工業化”和“再利用”的特點時，都將它們理解“標準化”和“創造性限制”。

  我不同意。當你真正找到了如何使用原子設計的方法時，你可以精確地決定何時何地給創造力騰出空間。

  

• WHEN“我們什麼時候需要創造力，什麼時候需要一致性？

  我們可以在使用設計系統和原子設計方法的同時富有創造性。明確一個評判標準：在哪裡保持強烈的一致性，在哪裡創造驚喜或者展示品牌的獨特性。

  如果我們想要一個強大的一致性和大量的重用系統，我們將從更具體和複雜的元件（如模板和頁面）開始。

  如果我們想給設計師更多創造性的可能性，我們會給他們原子和分子，這樣他們就可以創造新的成分，同時保持系統相似性。

  

• HOW我們該怎麼辦呢？

  工業化可以幫助我們節省重複設計和無用工作的時間，而設計者卻沒有額外的價值，例如：在15個不同的螢幕上執行相同的修改，建立20個相同元件，或者替換10個相同的例項。

  這種新獲得的空閒時間應該允許我們為使用者或客戶設計更多有趣的元素：正確的使用者流、品牌標識、使用者反饋分析、開發創新的解決方案和進行相關的情感設計…

  

Significance意義

• The part and the whole區域性與整體。

  使用Atomic Design構建元件系統，是建立一組相互依賴的元素。原子設計包含“區域性影響整體，整體影響區域性”的關係。我們不斷地放大和縮小我們的介面。我們將花費時間在細節，微觀互動，或者精煉一個元件，然後再後退一步來驗證它在上下文中的樣子，然後再後退一步，看看它作為一個整體做了什麼。

  

• Mutualize the work分擔工作。

  我們所有的元件都與我們的原子相連。由於一切都是相連的，我們可以很容易地驗證修改系統的部分內容（比如色調原子）對系統其餘部分的影響！

  
  我們最終可以像開發者一樣，擁有自己的風格指南，並圍繞這些風格指南構建完整的系統。
  
  

• Share the system共享系統。

  系統的共享對於保持不同產品之間的一致性是至關重要的。但當我們與其他設計師合作時，這一點更加困難，而且這種情況越來越頻繁。

  
  在這裡，我們需要一個所有人可以訪問，並且始終是最新的共享庫，共享庫允許幾個設計人員從相同的基礎開始設計。其實這是簡化了我們的工作，因為如果我們在共享庫中更新元件，則修改將自動應用在使用此元件的所有設計內容中：
  
  
  就現狀而言，還沒有一個完全適應原子設計的庫……仍然缺少原子和元件之間的這種強相互依賴性，這使得我們需要建立一個生動的、不斷髮展的系統。
  另一個問題是，我們仍然有兩個不同的庫：設計器庫和開發庫……因此必須同時進行維護，容易發生錯誤並需要大量額外的工作。
  我對完美共享庫的設想是：一個單一的庫，它同時向設計者和開發人員提供資源：
  
  
  Airbnb設計副總裁Alex Schleifer在IXDC2017國際體驗設計大會上分享了這一創新 React Sketch app 管理設計系統， 這是為Airbnb的設計系統而設計的，其實就是個實時更新的程式碼資料庫，可以實時查詢sketch資料、程式碼，也可以下載圖示、設計模組，所有工程師、設計師都可以免費下載。看到這個，我想完美共享庫也許並不是那麼的遙遠的未來…
  
  

References參考資料:

這次我只是創意的搬運工，有興趣的旁友可以翻牆品味下原汁原味的Atomic Design。

1. http://atomicdesign.bradfrost.com/table-of-contents/

2. https://uxdesign.cc/atomic-design-how-to-design-systems-of-components-ab41f24f260e

3. https://uxdesign.cc/atomic-design-creativity-28ef74d71bc6

4. http://www.ui.cn/detail/248670.html

5. https://zhuanlan.zhihu.com/atomicdesign

彩蛋：在公眾號idatadesign後臺回覆【IXDC】即可獲得IXDC2015-2017的ppt乾貨（上次傳送IXDC2017的資料後續還有更新）。