【前端開發】什麼是原子設計（Atomic Design)？優化網頁元件架構的設計原則
更新於 發佈於 閱讀時間約 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
436會員
102內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
幾年前看到《原子習慣》這本書，今年終於去買回來看，覺得有些方法很受用，在這裡做個重點筆記和跟大家分享。《原子習慣》主要在說明培養習慣的方法，本文將以2個部分來說明，分為《原子習慣》之重點概要，和個人的執行感想。
Part A：《原子習慣》之重點概要
前言：形成習慣的基本原理
1）讓提示顯而
這學期我們主要學習了原子的基本結構和定律，週期表與性質，還學習了價電子和化學鍵，在學習的過程中，讓我了解到非常多知識，同時又結合了課本的的題目練習，讓我對於這些知識更加熟悉。
這些知識中最讓我印象深刻的應該是價電子和化學鍵，每個價電子的數量都不同，價電子是指原子最外層的那層電子，同時因為價電子的
前陣子翻了一下《原子習慣 (Atomic Habits) 》，覺得裡面寫的東西很有道理...
原子習慣作者寫作風格乾淨俐落，
我讀一讀突然發現作者在很多段落會用像是「三明治」的方式鋪陳觀點：
1. 開門見山點出主觀點
2. 用類似句型架構舉幾個例子
3. 收尾下結論 (呼應開頭觀點)
舉三個書中的例子，並拆解其中用到的句型給你看囉~
原子筆記改變了很多人的生活，原子電子報現在也很流行，原子想法則讓每個人能比閃電更快地思考。來瞭解如何將這些原子元素結合，創建一個 Atomic Side Hustle，以及如何在部落格、電子郵件和社群媒體上宣傳你的副業吧。
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
是的，身為前端工程師的基本功！
還是需要時不時拿出來打磨一番，這系列文章每個禮拜三都會更新一題CSS Battle的題目，歡迎與我交流喔！
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域
五、網頁設計師要做什麼？
說實話，每間公司不一樣。
我不是只面試一間而已，光是網頁設計我應該至少投了十間以上，我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架，會有滿大的差別。
網頁設計主要分成以下工作：
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
幾年前看到《原子習慣》這本書，今年終於去買回來看，覺得有些方法很受用，在這裡做個重點筆記和跟大家分享。《原子習慣》主要在說明培養習慣的方法，本文將以2個部分來說明，分為《原子習慣》之重點概要，和個人的執行感想。
Part A：《原子習慣》之重點概要
前言：形成習慣的基本原理
1）讓提示顯而
這學期我們主要學習了原子的基本結構和定律，週期表與性質，還學習了價電子和化學鍵，在學習的過程中，讓我了解到非常多知識，同時又結合了課本的的題目練習，讓我對於這些知識更加熟悉。
這些知識中最讓我印象深刻的應該是價電子和化學鍵，每個價電子的數量都不同，價電子是指原子最外層的那層電子，同時因為價電子的
前陣子翻了一下《原子習慣 (Atomic Habits) 》，覺得裡面寫的東西很有道理...
原子習慣作者寫作風格乾淨俐落，
我讀一讀突然發現作者在很多段落會用像是「三明治」的方式鋪陳觀點：
1. 開門見山點出主觀點
2. 用類似句型架構舉幾個例子
3. 收尾下結論 (呼應開頭觀點)
舉三個書中的例子，並拆解其中用到的句型給你看囉~
原子筆記改變了很多人的生活，原子電子報現在也很流行，原子想法則讓每個人能比閃電更快地思考。來瞭解如何將這些原子元素結合，創建一個 Atomic Side Hustle，以及如何在部落格、電子郵件和社群媒體上宣傳你的副業吧。
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
是的，身為前端工程師的基本功！
還是需要時不時拿出來打磨一番，這系列文章每個禮拜三都會更新一題CSS Battle的題目，歡迎與我交流喔！
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域
五、網頁設計師要做什麼？
說實話，每間公司不一樣。
我不是只面試一間而已，光是網頁設計我應該至少投了十間以上，我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架，會有滿大的差別。
網頁設計主要分成以下工作：