🤔為什麼要寫這篇小記？
我們在生活中時常可以看到借鏡其他學科所發展的新學問，近幾年常聽到的「原子習慣」、「原子設計」就是從化學延伸出來，不同學科的概念往往能激起本學科的不同的做事方式。
今天我們來說說「原子設計(Atomic Design)[¹]」，這是2013年由設計師Brad Frost 提出來的新概念，目的是要讓設計「使用者介面(User Interface, 簡稱UI)」能夠結構化。
過去設計師使用的設計系統(Design System) 強調的是顏色(color), 排版(typography), 格線(grids), 組織(texture)…等應該怎麼設計，雖然設各個元素有其設計方法，但最後的成品總是有點偏向設計師的主觀經驗。
Brad Frost 思考到：設計應該也有一定的邏輯與結構才對呀！最後他在「化學」中找到了解答，那就是「原子設計(Atomic Design)」。
🤔原子設計是什麼東西？
知名的 UI 流程設計教授 Stephen Hay 曾說：
We’re not designing pages, we’re designing systems of components.
這句話很好地體現出「原子設計」的精神。那麼「原子設計」到底是怎麼來的呢？
原子設計的提出人 — Brad Frost 從化學元素週期表中體悟到：
化學中最小的元素是原子(Atom)，原子與原子結合會形成分子(Molecules)，分子又能組合成有機體(Organisms)、有機體再構築成與宇宙萬物。軟體的使用者介面(UI)也是由各種小元件組成(components)，就像是堆積木一樣。
原子設計中總共有5個項目，下方依序介紹。
原子 (Atoms)
介面上最基礎的積木，套用到網頁設計上就是HTML標籤，例如 label, input, button…等。除此之外，如調色盤(color palettes), 字體(fonts), 動畫(animations)也都算是原子的範疇。
原子常出現在設計元件庫(Library)中，但通常一個原子是沒什麼用的。
分子 (Molecules)
如果我們將原子與原子組合起來就會形成分子，分子通常帶有自己的屬性，成為設計系統的基礎。例如我們組合上方提到的 Label, Input, Button原子，可以成為一個有用的搜尋功能。
分子可以很複雜，但畢竟還是由單純的原子組合而成。將原子組合成分子的過程其實是在鼓勵設計師：
只做一件事情而且把它做好(do one thing and do it well)。
再複雜的事情，其實也是由簡單的元素組合而成。
有機物 (Organisms)
分子就像是一個個已經拼好的小積木模塊，我們可以自由組裝這些模塊並使其變成有機物。
有機物更複雜，在介面上是相對獨立的區塊，例如下方是常見的導覽區塊 (Navigation Section)。
實際上客戶可能對分子沒什麼興趣，它們太破碎了。但有機物已經開始有一點最終畫面的影子，下方的例子是各家網路公司的「導覽區塊」，通常位於網頁的最上方：
值得留意的是，有機體可能包含類似的分子，但卻有不同的功能。舉例來說，一個標題有機體(masthead organism)包含了：
- Logo
- 主要導覽列
- 搜尋欄位
- 許多的社群連結
而一個產品區塊(product grid)也可能包含相同/類似的分子，例如：
- 產品標題
- 產品圖片
- 搜尋欄位
- 許多的社群連結
這邊的核心精神是：
盡量從「分子」組建成「有機體」， 讓「分子」可以被重複利用。
模板 (Templates)
在這個階段我們不再使用化學的名詞，也終於可以看到傳統上設計師產出的成品。「模板」由非常多的「有機體」組合而成，例如下方：
在軟體產品開發流程中，Wireframe(線框圖)就屬於Template(模板)的一個範例。當然在不了解原子設計之前，一個網頁上的元件應該怎麼擺幾乎都是憑設計師經驗，想當然沒設計經驗的人畫出的Wireframe，使用者體驗也不會好到哪去…
頁面 (Pages)
頁面(Pages)是將模板(Templates)進一步美化，以下方的範例來說，Placeholder(提示區塊)都換上真實的圖片。
頁面(Pages)也可以讓我們用來測試模板(Templates)的有效性，例如一個有40字元的標題 vs 一個有340字元的標題，其模板(Templates)就可能長得不一樣。
在沒有模板(Templates)的概念下，產品團隊可能花了過多的時間在 Page(頁面) 內容的呈現，但可能問題可能是出在模板(Templates)的排版上。
🤔 小結：為什麼要用原子設計？
原子設計之所以在UI設計中流行，是因為：
- 有一套邏輯清楚、步驟明確的設計方法學，可以讓團隊成員、老闆、客戶看到成品完成的階段性成果。
- 讓設計作品具有一致性與可擴充性，因為我們是在對元素進行不同的「排列組合」。
如果你對有哪些「UI 原子」，可以繼續閱讀下方文章：
[¹]原文連結：https://bradfrost.com/blog/post/atomic-web-design/我是朱騏，一個渴求新知、熱愛學習的產品經理。也是一個喜歡研究各種生產力工具、熱愛將專案管理知識應用在魔術學習上的魔術愛好者。如果有任何疑問、想聽的主題，歡迎留言給我 📒你會看到這篇文章是因為我在進行365天寫作挑戰，詳情可參考《365天寫作挑戰第二季，關於寫作的新想法》。如果想給我一點鼓勵，請給我 1–10 個拍手；
如果覺得文章對你有幫助，請給我 10–40 個拍手；
如果你覺得文章寫的不錯，請給我40+ 個拍手讓我知道 👏🏻如果有任何想閱讀的主題請留言分享給我。 最後，謝謝你的閱讀！喜歡我的文章，可以點擊下方「Follow」我～| LinkedIn @ Chi Chu 歡迎交流
