我們翻譯的這本書，可能是下一個設計趨勢

兩個月前，我看到了下面這張圖，第一次知道 Atomic Design。Atomic Design 還處在成長期，國內也沒找到多少相關的資料。於是我找到了原子設計這個概念的提出者bradfrost的個人網站，然後發現了這本在線電子書《Atomic Design》。

作者如下圖。他覺得按照傳統方式花幾個月的時間去寫一本書然後出版實在太老土，他要寫一本會成長會呼吸的不完整的書，於是他直接在他自己的網站上連載，並且不斷的修訂，他將寫書的過程直接開放了，並且無償的分享給大家。

下面簡單的介紹一下原子設計的概念：

原子設計是一種網頁設計方法，出自於Brad Frost在2013年時發表的文章

Atomic Design Introduction 原子設計理論簡介

1 Introduction 背景介紹

於2013年Brad Forst提出此設計概念：

靈感來自於他高中時期的化學實驗室，可以用肉眼看到的物體都是由原子(Atoms)組成，原子結合在一起形成分子(Molecures)，分子組合成相對更複雜的組織(Organisms)。於是Brad藉此概念應用在介面設計。

Interfaces are made up of smaller components 介面是由許多元素所組成的。

還記得高中化學元素周期表嗎？Brad Forst認為網頁也是由小元素所組成

2 定義Definition

原子設計是一個設計方法論，由五種不同的階段組合，創建一個有層次、計畫性的介面系統。

此五種階段為：

• Atoms原子：為網頁構成的基本元素，HTML的tags，例如標籤、輸入，或是一個按鈕，也可以為抽象的概念，例如字體、色調等。
• Molecules分子：由元素構成的簡單UI物件
• Organisms組織：相對分子而言，較為複雜的構成物，由原子及分子所組成。
• Templates模板：以頁面為基礎的架構，將以上元素進行排版
• Pages頁面：將實際內容（圖片、文章等）套件在特定模板

3 優點 Benefits

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

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

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

最後，感謝下翻譯的小夥伴們

譯文多虧了大家的辛苦翻譯。譯者如下：

第一章：Lisa、krtek、邵瑞琪

第二章：bluesbone

第三章：主物質界面 reg

第四章：梅小菜

第五章：megan、maker

本書一共五章，從明天開始每周連載一章。

想先睹為快？這裡是作者網站：Atomic Design | Atomic Design by Brad Frost