Modal vs Page：不是 UI 選擇，而是「你要不要中斷使用者」

在產品開發裡，有一個問題幾乎每個團隊都會吵過：

這個功能要用 Modal，還是開一個新頁面？

大多數時候，答案是：「看情況」。

問題是——
「看情況」三年後，會變成一個體驗不一致的產品。

有些操作跳頁、有些跳 Modal，使用者無法預期；
工程師也開始複製貼上各種 implementation，最後誰都說不清為什麼這樣設計。

這篇文章的目標很簡單：

把「看情況」變成一個可以重複使用的決策框架。

Modal vs Page，本質差在哪？

這不是 UI 元件的差異，而是**認知模式（cognitive mode）**的差異。

Modal 是「暫停世界」
Page 是「切換世界」

• Modal

  • 中斷當前流程
  • 強制聚焦
  • 限制背景互動

• Page

  • 建立新的導航狀態
  • 支援返回 / 多分頁
  • 可被分享（URL）

Modal 的本質是：

它會打斷使用者，並要求立即處理某件事。

這也是為什麼——選錯會很痛。

什麼時候該用 Modal？

不是「小功能就用 Modal」，而是看這三個條件。

1. 它是「附屬動作」，不是主流程

如果這個操作只是當前任務的一部分，Modal 很適合。

典型場景：

• 刪除確認（Are you sure?）
• rename / quick edit
• 選日期、選分類
• 圖片放大檢視

真實案例：

• Google Drive

  • rename → Modal
  • move file → Modal

因為這些都是「不應該打斷主要任務」的操作

2. 你想降低操作的心理門檻

Modal 的優勢是「不離開當前頁面」。

這會降低使用者的潛在焦慮：

「我點下去會不會迷路？」

真實案例：

• Facebook / X（Twitter）發文
  → 使用 Modal 讓使用者一邊看 timeline 一邊輸入內容

如果改成 Page，反而增加切換成本

3. 操作依賴當前情境（context）

如果使用者需要「看到背景資訊」才能完成操作，Modal 很有價值。

例子：

• CRM：在客戶列表直接新增備註
• 電商：在商品列表快速設定規格

核心原則：

Modal 保留了上下文，而 Page 會切斷上下文

什麼時候應該用 Page？

這裡的判斷其實更明確：很多情況是「不要硬用 Modal」。

1. 任務複雜（最關鍵）

只要符合以下任一條件：

• 多步驟流程（wizard）
• 大量輸入
• 使用時間長
• 使用者可能中途離開

就應該用 Page

真實產品：

• Notion → 所有內容都是 Page
• Google Docs → 文件編輯是完整頁面
• GitHub → PR / Issue 全部是 Page

原因：

這些任務需要「持續狀態」，而不是暫時中斷

2. 需要 Deep Link（可分享 / 可還原）

如果某個狀態需要：

• 被分享
• 被 bookmark
• reload 後還原

就不應該只存在於 Modal

常見錯誤設計：

• 把整個「設定頁」做成 Modal
• URL 沒變
• refresh → 狀態消失

結果：

• 使用者迷路
• 無法分享
• 工程師開始補各種 workaround

3. 使用者需要「多工」

Modal 是單任務模型：

一次只能做一件事

但 Page 可以：

• 開多個分頁
• 左右對照
• 同時處理不同任務

真實案例：

• GitHub → 同時開多個 PR
• 設計工具 / 文件工具 → 多文件切換

為什麼團隊會濫用 Modal？

這是最現實的一段。

很多時候，不是 UX 問題，而是工程選擇：

Modal 比 routing 簡單

常見原因：

• 不想處理 router state
• 不想設計 URL
• 不想處理返回行為
• 想快速交付 feature

於是：

「先用 Modal 做」

幾個月後：

• Modal 裡面開始有多步驟
• 出現巢狀 Modal
• state 管理變複雜

Modal 的三個經典災難

1. 背景可以滾動（scroll leak）

使用者滾動時，背景也跟著動。

body.modal-open {
  overflow: hidden;
}

2. 沒有 focus trap（無障礙問題）

Tab 跑到背景 → 使用者完全迷路

這不是加分項，是基本要求

3. URL 不同步（最致命）

• Modal 開著
• refresh
• Modal 消失，但資料改了

建議做法：

/products?modal=edit&id=123

Modal 狀態應該可被 URL 還原

Page 的坑：返回後狀態消失

Page 也不是完美。

經典問題：

使用者返回上一頁 → 篩選條件全部消失

常見解法

1. 把狀態寫進 URL
2. 使用 sessionStorage
3. keep-alive / cache state

原則：

使用者花時間建立的狀態，不應該消失

實務決策 Checklist

下次不要再「憑感覺」，直接問：

1. 完成後，使用者會回來嗎？
2. 需要被分享或 bookmark 嗎？
3. 任務複雜嗎？（>3 steps / heavy input）
4. 需要同時開多個嗎？
5. 做成 Modal 會讓人迷路嗎？

最後結論

Modal 是「暫停世界」
Page 是「切換世界」

如果你的功能不值得「暫停整個世界」——
那就不要用 Modal。

參考

• Nielsen Norman Group
  Modal and Nonmodal Dialogs

• Smashing Magazine
  Modal vs. Separate Page UX Decision Tree