60 秒決策
先確認使用者要完成的事。
適合使用
- 使用者需要在同一批資料中反覆查看細節，原本的列表、表格或畫布仍是重要脈絡。
- 內容是摘要、檢視或少量編輯，能在側邊用短欄位和清楚動作完成。
不適合使用
- 內容需要長時間閱讀、跨多步驟、密集表單或大量比較資料。
- 使用者必須先做出高風險決定，背景工作此刻應完全暫停。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
標題要接住原頁的選取對象
「編輯林子安的角色」比單寫「詳細資料」更讓人知道這個面板從哪一列而來。
留住背景，但不要讓兩邊搶主角
Drawer 的價值是保留列表脈絡；面板內容仍要有足夠層級與留白，別把它做成縮小版後台。
寬度要服務少量工作
摘要、少量欄位與一兩個動作可以放側邊；內容一長就換到完整頁面。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
尚未選取
資料列或查看入口要說清楚會開啟哪一筆細節。
已開啟
面板標題、選取對象、可編輯範圍與關閉出口要同時清楚。
儲存或取消
輕量變更有可理解回饋；取消不改資料並回到原列。
窄螢幕
當側邊寬度不足時，改為 Bottom Sheet 或完整頁面，不壓縮成難讀的直條。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
查看並調整成員角色
先觀察：右側 Drawer 是否仍保留成員表格脈絡，且只放一項可完成的輕量修改。
操作：開啟 Drawer、變更示範角色後儲存，再用 Escape 開啟並取消一次。
預期結果：儲存只更新示範訊息；取消不變更，並且關閉後焦點回到開啟 Drawer 的按鈕。
Drawer Demo
看細節，也保留資料表脈絡成員部門角色
林子安產品設計專案管理員
陳可欣行銷編輯者
黃柏翰工程檢視者
桌面資料表還留在眼前；右側只處理林子安的摘要與一項輕量角色調整。
尚未開啟側邊面板。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 成員管理頁製作右側 Drawer。使用者點選「林子安」這列後，Drawer 顯示姓名、部門、角色與加入日期，並只提供一項輕量編輯，例如變更角色。桌面版保留成員列表作為背景脈絡；Drawer 要有明確標題、關閉按鈕、Escape 與取消路徑，關閉後焦點回到原本點選的列。若編輯內容超過少量欄位、需要跨多步驟或大量查閱資料，改到完整頁面，不要硬塞進 Drawer。驗收清單
不要只確認欄位能不能點。
- 原本的列表或資料表是否真的仍是判斷細節所需的脈絡？
- Drawer 內是否只放摘要與少量操作，而不是一整套長流程？
- 標題是否指向目前選取的資料，而非模糊的「詳細資料」？
- 是否有按鈕、Escape 與關閉圖示等可預期的退出路徑？
- 在窄螢幕時，是否已有 Bottom Sheet 或完整頁面的替代策略？
- 若背景必須暫停，是否應改用 Dialog 而不是只是加一層遮罩？