【前端開發】什麼是原子設計（Atomic Design)？優化網頁元件架構的設計原則

前端工程師可能會隨著工作經驗的累積，而開始想要寫出更好的網頁架構，又或者是能有一套方法讓組織間的溝通、工作模式更加順暢。

在一次面試中，我向面試官分享了我在元件拆分、模組化網頁服務架構時的難題，對方向我建議了「原子設計」這套方法，使用了一年多後，我覺得這套模式真的很讚，所以想要寫一篇文章來分享這個簡單，卻能大大提升網頁元件開發效率的設計原則：「原子設計（Atomic Design）」。

原子設計最初是一種設計方法，旨在幫助設計師更好地組織和管理網頁元素。

它可以將網頁元素拆分成更小、更可重用的元件，這些元件被稱為「原子」，並被組合成更大的模塊和模板。這種設計方法能夠提高效率、減少重複工作、促進團隊協作，並提高網頁的可維護性和可擴展性。

原子化網頁設計中的元素按照不同的層次來分類，包括原子（Atoms）、分子（Molecules）、組織(Organisms) 和模板（Templates），這些元素最終會組成頁面（Pages）。

原子是最基本的元素，例如：標籤、按鈕、文字輸入框、Checkbox、Input、Select 等。

分子是由多個原子組成的元素，例如：複合 Input 、Modal 、Dialog 等。

組織是由多個分子和原子組成的元素，例如：頁首（header）、導覽列（Navigator）等。

模板是網頁的整體布局和結構，我個人覺得這邊與頁面的定義有點模糊，所以個人的使用習慣是只會採用頁面這個層級，不會特別使用模板，大家可以根據自己的需求進行調整。

如果我們把這個結構展開來可能會長這樣，以 React 結構為例：

是不是很簡單明瞭呢？

先講缺點，很多人一開始使用原子設計可能會覺得「很麻煩」、「花太多時間在拆分層級」，因為要拆分很細不得不花更多時間設計一個好用的元件。

雖然初期開發共用元件會花比較多時間去思考一些使用者情境，但後續接手維護的開發者相較起來就不需要每接到一個需求，嚴謹開發出來的元件可被擴充的空間更大，也比較好維護，如果搭配一些第三方套件，例如：Storybook，甚至可以與跨部門的人透過這套原子設計，協同開發組織等級的設計系統。

不論是對開發者或是設計師來說，就不需要花多餘的時間開發可能已經既有的元件，出現重工的狀況，真的是一個很棒的設計方法，推薦給跟曾經的我一樣苦思更好網頁元件管理方法的你！

我是 Vivian 我們下次見 ：）

關於我：

一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。

｜Instagram: Vivian Yeh｜vivian_enlife

｜聯絡我：vivian.enlife@gmail.com

參考資料：Atomic Web Design by Brad Frost