範例：1. Atoms = 按鈕、Logo、輸入框；2. Molecules = 搜尋框（標籤 + 輸入框 + 按鈕）；3. Organisms = 導覽列（Logo + 搜尋框 + 選單）；4. Templates = 商品頁結構（無內容）；5. Pages = 實際商品頁（有內容）。從小到大組合。

原子設計系統：用 5 層架構打造一致網站的方法

Q: 什麼是原子設計？

原子設計（Atomic Design）由 Brad Frost 提出，把 UI 拆成「化學」的 5 層：1. Atoms 原子（按鈕、輸入框）；2. Molecules 分子（搜尋框 = 輸入框 + 按鈕）；3. Organisms 有機體（導覽列）；4. Templates 模板（頁面結構）；5. Pages 實際頁面。系統化設計的基礎。

Q: 為什麼用原子設計？

五大優勢：1. 一致性（所有頁面同個按鈕）；2. 效率（重用元件）；3. 可維護（改一處改全部）；4. 跨團隊協作；5. 可擴展（新頁面快）。電商有 100+ 頁面，沒設計系統會「每頁不同」。Airbnb、IBM 等大廠都用。

Q: 如何建立設計系統？

五步驟：1. 盤點現有 UI（找出元件）；2. 分類到 5 層；3. 在 Figma 建元件庫；4. 文件化使用規範；5. 全團隊培訓使用。建立要 2-3 個月，但建好後速度倍增。中小電商可從基礎元件做起、漸進完善。

Q: 原子設計的限制？

五大限制：1. 過度抽象（簡單頁過度複雜）；2. 分層界線模糊；3. 不適合小團隊（過度工程）；4. 維護成本高；5. 改一處要測試全部。建議：1. 小團隊用簡化版；2. 大型項目才完整套用；3. 不要為了系統而系統。

⚡ 30秒快速掌握重點

原子設計把 UI 拆 5 層。本文涵蓋層級劃分、為何用、建立步驟、限制。

5 層架構

Atoms：按鈕、Logo、輸入框
Molecules：搜尋框（輸入框 + 按鈕）
Organisms：導覽列
Templates：頁面結構（無內容）
Pages：實際頁面（有內容）

五大優勢

一致性（所有頁面同個按鈕）
效率（重用元件）
可維護（改一處改全部）
跨團隊協作
可擴展（新頁面快）

建立五步驟

盤點現有 UI
分類到 5 層
Figma 建元件庫
文件化使用規範
全團隊培訓

2-3 個月建好、速度倍增。

五大限制

過度抽象
分層界線模糊
不適合小團隊
維護成本高
改一處要測全部

小團隊用簡化版、不要為系統而系統。

電商必備元件

商品卡片（圖片 + 名稱 + 價格 + CTA）
篩選器
麵包屑
導覽列
頁尾
表單元件
提示框
載入動畫

設計系統文件

每個元件文件應含：1. 何時使用；2. 變體（Variant）；3. 範例；4. 不要這樣用；5. 程式碼片段。文件是「設計與工程的橋樑」。Material Design、Apple HIG 是典範。

命名規範

統一命名：1. Button-Primary、Button-Secondary；2. Card-Product、Card-Article；3. Layout-Header、Layout-Footer。好的命名讓「找元件」變快、「跨團隊」溝通順。

與開發整合

設計系統 → 程式碼：1. 設計變數對應 CSS 變數；2. 元件對應 React 元件；3. 設計改 = 程式碼改；4. Storybook 顯示元件庫；5. 自動化測試。設計系統真正力量在「設計與開發同源」。

🚫 電商大忌：千萬不要犯這些錯誤

沒設計系統，每頁不一致
系統過度複雜，沒人想用
建好不維護，元件過時
設計與工程不同步
小團隊套大系統，浪費資源

🚀 Shopto 如何幫您解決這個問題？

NT$24,800/年起，享受完整電商解決方案：

✓電商設計系統範本

✓Figma 元件庫

✓設計變數管理

✓文件化工具

✓設計開發同步

常見問題解答

Q：什麼是原子設計？

Brad Frost 提出，UI 拆 5 層：原子/分子/有機體/模板/頁面。

Q：為什麼用原子設計？

五優勢：一致、效率、可維護、協作、可擴展。

Q：5 層怎麼劃分？

按鈕→搜尋框→導覽列→頁面結構→實際頁面。從小到大組合。

Q：如何建立設計系統？

五步：盤點、分類、Figma 建庫、文件化、培訓。2-3 個月建好。

Q：原子設計的限制？

五限：過度抽象、分層模糊、不適小團隊、維護成本、改處影響大。

準備好打造成功電商了嗎？

立即加入 Shopto，讓專業平台幫您解決所有電商難題

立即免費試用 → 聯繫顧問

← 返回電商知識庫

原子設計系統完整指南