【前端開發】什麼是原子設計（Atomic Design)？優化網頁元件架構的設計原則
更新於 2023/04/01閱讀時間約 2 分鐘
前端工程師可能會隨著工作經驗的累積，而開始想要寫出更好的網頁架構，又或者是能有一套方法讓組織間的溝通、工作模式更加順暢。
在一次面試中，我向面試官分享了我在元件拆分、模組化網頁服務架構時的難題，對方向我建議了「原子設計」這套方法，使用了一年多後，我覺得這套模式真的很讚，所以想要寫一篇文章來分享這個簡單，卻能大大提升網頁元件開發效率的設計原則：「原子設計（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
430會員
100內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
C2 開始終於使用到 visual studio code，
這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構，
每天都在 coding，每週都在追進度，
用壓縮到極致的時間寫完作業，
但跟著課程內容寫程式碼，真的有學到嗎？
有，吧。
畢竟在寫最後的電影清單
今天想透過這篇文章與各位分享如何透過 Chrome Devtool 的 Performance Tab 來檢測網頁在執行時的各種效能指標，讓網頁的 Runtime Performance 不再成為你 debug 時的瓶頸！
老師請問tailwind是什麼呢？
Tailwind 是一個現代化的 CSS 框架，它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是，Tailwind 不是基於預先定義好的樣式類別和樣式集合，而是提供了大量的 CSS 實用類別，讓開發者可以更靈活地自由組合和應用。
請您現在扮演一位幽默博學的老師，回答什麼是sass中的mixin概念
很高興回答這個問題！在 Sass 中，Mixin 是一種可以將一組 CSS 屬性集合放在一起，以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性，使其更加靈活和強大。
在跟社群朋友私訊時，他說我可以考慮分享「我的前端之路」之類的啊。覺得這真是一個很不錯的主題，每個人都有自己的故事！不愧是個老師，會因材施教XD
本科系畢業、碰前端之前
憧憬前端工作，但沒自信、不敢
設計與美感 - 一生從沒碰過的東西
Vue 比 React 簡單？
與設計師的合作
跨足APP
無須基礎，只要「複製 ＋ 貼上」就能學會
(RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart)
每個特效均為您示範 WebFomr + MVC 雙重範例
ASP.NET 教學 — 前端特效輕鬆學 (9.9小時)
課程介紹
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
C2 開始終於使用到 visual studio code，
這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構，
每天都在 coding，每週都在追進度，
用壓縮到極致的時間寫完作業，
但跟著課程內容寫程式碼，真的有學到嗎？
有，吧。
畢竟在寫最後的電影清單
今天想透過這篇文章與各位分享如何透過 Chrome Devtool 的 Performance Tab 來檢測網頁在執行時的各種效能指標，讓網頁的 Runtime Performance 不再成為你 debug 時的瓶頸！
老師請問tailwind是什麼呢？
Tailwind 是一個現代化的 CSS 框架，它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是，Tailwind 不是基於預先定義好的樣式類別和樣式集合，而是提供了大量的 CSS 實用類別，讓開發者可以更靈活地自由組合和應用。
請您現在扮演一位幽默博學的老師，回答什麼是sass中的mixin概念
很高興回答這個問題！在 Sass 中，Mixin 是一種可以將一組 CSS 屬性集合放在一起，以便在需要的地方重複使用的功能。Mixin 可以包含變量、條件語句、迴圈和其他 CSS 屬性，使其更加靈活和強大。
在跟社群朋友私訊時，他說我可以考慮分享「我的前端之路」之類的啊。覺得這真是一個很不錯的主題，每個人都有自己的故事！不愧是個老師，會因材施教XD
本科系畢業、碰前端之前
憧憬前端工作，但沒自信、不敢
設計與美感 - 一生從沒碰過的東西
Vue 比 React 簡單？
與設計師的合作
跨足APP
無須基礎，只要「複製 ＋ 貼上」就能學會
(RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart)
每個特效均為您示範 WebFomr + MVC 雙重範例
ASP.NET 教學 — 前端特效輕鬆學 (9.9小時)
課程介紹