60 秒決策
先確認使用者要完成的事。
適合使用
- 使用者必須先完成、取消或確認一個小任務，背景工作暫時不能繼續。
- 任務的內容短、動作數少，而且保留原頁脈絡比跳轉新頁更有幫助。
不適合使用
- 使用者需要同時查看大量背景資料、長篇內容或跨多個步驟。
- 只是提供參考資訊，不需要阻斷或立即取得回應。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
背景真的要停下來
遮罩、滑鼠操作與鍵盤焦點必須一致；只把背景變暗卻仍能點擊，是錯誤的 Modal。
第一個焦點依內容決定
短表單可落在第一個輸入欄；資訊量大時先讓標題或起始文字取得焦點，別直接跳到危險按鈕。
不要做成迷你頁面
內容一長，Dialog 會讓捲動、焦點與閱讀變得不舒服；改頁面或 Drawer 更誠實。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
觸發前
開啟按鈕說明用途，例如「邀請成員」。
模態開啟
背景不可操作，焦點進入 Dialog，Tab 在內容內循環。
取消或 Escape
關閉而不做變更，焦點回到觸發按鈕。
送出
完成小任務後關閉，原頁能看見合理的更新或回饋。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
邀請成員
先觀察：開啟後背景是否真的停止互動，焦點是否落在邀請表單內。
操作：開啟 Modal，按 Tab 走訪動作，再按 Escape。
預期結果：焦點不離開 Modal；Escape 關閉後回到「開啟邀請 Modal」按鈕。
Modal Dialog Demo
需要先完成或取消，才回到上一個任務成員管理
林子安產品設計 · 專案管理員背景在此時不可再操作；焦點會留在對話框內，關閉後才回到開啟按鈕。
尚未開啟對話框。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 製作 Modal Dialog，讓管理員邀請一位成員加入工作區。開啟後背景視覺要被遮罩且不能點擊，焦點移到 Dialog 內第一個合理控制項，Tab 與 Shift+Tab 不可離開 Dialog，Escape 與取消都可關閉，關閉後焦點回到開啟按鈕。內容只保留姓名、角色與邀請動作；若表單變成多步驟或很長，改用獨立頁或後續的 Drawer 流程。驗收清單
不要只確認欄位能不能點。
- 背景是否在視覺與操作上都不可用？
- 初始焦點是否符合內容與風險，而非機械地放第一顆按鈕？
- Tab 與 Shift+Tab 是否不會離開 Dialog？
- Escape 與取消是否可用，且不做意外變更？
- 關閉後焦點是否回到觸發元件或合理的後續工作點？
- 內容變長時是否改用頁面或 Drawer？