浮動介面與確認

點一列資料後，不一定要跳一個 Modal。

先看使用者要不要暫停背景工作；再看原本的列表是否仍值得留在眼前；最後才看螢幕寬度。這三件事會把 Dialog、Drawer 與 Bottom Sheet 分到不同位置。

選擇流程

先決定中斷與脈絡，再決定面板從哪裡出現。

差異對照

點選欄位名稱可進入各元件的閱讀路徑、實際 Demo 與可複製的 AI Prompt。

判斷面向	Dialog對話框	Drawer側邊面板	Bottom Sheet底部面板
背景工作	暫停。使用者先完成、取消或回應眼前任務。	依需求決定；本質是保留原本列表或資料表脈絡。	常用於手機短任務；若採模態，背景要真的不可操作。
最適合的內容	需要立即回應的小任務、確認或重要訊息。	某一筆資料的細節、摘要與少量編輯。	一筆資料的快速摘要、少量選項與下一步入口。
螢幕與脈絡	內容比原頁更需要當下注意力。	桌面寬度足夠，且原頁資料表仍是理解細節的重要線索。	窄螢幕下快速處理；內容要短，拇指容易操作。
不該放什麼	長表單、跨多步驟流程或需要反覆比對背景的工作。	完整設定頁、長表單與需要大量閱讀的複雜流程。	多欄位編輯、長篇文字、多人比較或任何必須一直捲動的任務。
關閉與焦點	開啟時焦點進入，關閉後通常回到觸發點；Escape 走安全取消。	要有可見關閉、取消與焦點回復；模態 Drawer 才限制背景與焦點。	提供把手或明確關閉方式；在手機也要能安全回到開啟入口。

示範情境

在 LumenDesk 中，桌面使用者若還要比對成員列表，就由 Drawer 顯示林子安的摘要與一項輕量編輯；手機使用者只想快速決定下一步時，改用 Bottom Sheet。若要停用帳號這類有明確後果的動作，則回到 Dialog 家族中的 Confirmation Dialog。