安安～我是ChiYu～
昨天，我用 Escape 取消了「停用林子安」這個危險動作。帳號保住了，管理員也沒有因此下班，反而接著問：
那我可以先看一下林子安的部門、角色和目前專案嗎？
很合理。停用帳號以前先把資料看完，總比按下去之後才開始考古好。
於是需求變成：
點成員資料表的一列，顯示完整資料。
AI 很快交出一張置中的白色卡片，背景順便變暗。林子安的資料確實出現了，但其他成員的部門、角色和目前篩選結果也被蓋得乾乾淨淨。
下面是依照第一版需求重建的錯誤現場，不含真實帳號與個人資料：
圖 1：林子安的資料出現了，原本拿來比較的成員清單卻被遮罩鎖住。
想比較下一位成員？先關掉 Modal、記住剛才看到的內容，再打開另一位。畫面沒有壞，使用者的記憶力倒是被當成系統資源用得很勤勞。
這就是今天的核心問題：
詳細資料出現時，原本的工作脈絡還要不要留在畫面上？
我們會用 LumenDesk 的虛構成員管理情境，拆開 Sheet、Drawer 與 Bottom Sheet。這三個名稱常被拿來描述面板外觀或位置，卻不會自動回答背景能不能操作、焦點要去哪裡，以及內容多到什麼程度該改用完整頁面。
我把這組判斷放進 Vibe UI Atlas 的 Dialog、Drawer 與 Bottom Sheet 比較頁：
圖 2：先看原頁資料是否仍有用，再判斷任務長度、背景規則與裝置空間。
第一題不是「面板從哪裡滑出來」，而是：
我先在桌面 Demo 點「查看林子安的資料」。右側面板打開後，林子安的部門、角色與加入日期出現在眼前，背景的三筆成員資料仍看得見。
注意，是「看得見」，不是「還能點」。
目前 Drawer 裡可以變更角色，所以 Demo 採模態行為：背景清單保留作為視覺脈絡，但操作暫停，焦點留在面板內。若產品要讓管理員直接點下一列、逐人比對，就應改成 Non-modal Drawer，並另外設計焦點如何在清單與面板間移動。
這條分界很重要：
| 背景狀態 | 適合的任務 | 需要補上的規則 |
|---|---|---|
| 看得見，但不能操作 | 在面板裡編輯一小段資料 | 焦點限制、取消、儲存與關閉後返回。 |
| 看得見，也能操作 | 逐列比較、監看或參考 | 清單與面板的焦點順序、目前對象同步與關閉方式。 |
| 不需要保留 | 獨立、完整或高風險工作 | 改用 Dialog 或完整頁面，不必勉強留背景。 |
面板從右邊滑出來，不會自動獲得 Non-modal 能力。Drawer、Sheet 與 Bottom Sheet 是設計系統常見的版型名稱，不各自對應固定 ARIA 角色；互動仍要依任務選擇 Dialog、Non-modal 區域或其他合適結構。
Sheet 最容易讓人以為元件名稱已經把需求講完。
這篇把 Sheet 當成泛用家族稱呼：一塊浮動表面，用來承載內容或操作。問題是，「有一塊面板」只說了一半，至少還缺：
我在 Sheet 元件頁 放了一個刻意寫完整的版本：面板置中出現、背景暫停、Escape 可以關閉。以互動語意來看，它是一個 Modal Dialog，只是使用 Sheet 的視覺樣式。
圖 3：Sheet 描述的是浮動面板樣式；這個 Demo 另外指定置中、模態與 Escape 關閉，所以互動上屬於 Modal Dialog。
所以「做一個 Sheet」比較像在說「我要一台車」。四輪、兩輪、載人還是載貨，最好還是補一下。
Drawer 通常從側邊出現，但方向只是外觀。真正的用途是讓使用者靠近一筆資料，同時保留原本清單、畫布或工作區的脈絡。
LumenDesk 的管理員本來就在成員清單比對部門、角色與狀態。點擊林子安後，右側 Drawer 保留：
面板裡則只放：
圖 4：右側 Drawer 顯示林子安的資料與角色操作；背景清單保留視覺脈絡，但在編輯期間暫停操作。
更重要的是，面板標題直接寫「林子安」，不是一個套到誰身上都成立的「詳細資料」。使用者不用猜自己剛才點了哪一列。
我故意什麼都不改，直接按 Escape。結果是：
這串結果看起來很普通，卻是 Drawer 真正有價值的地方：使用者只是暫時靠近一筆資料，看完還能回到原本的位置。
若 Drawer 裡有尚未儲存的角色變更，Escape、叉叉與點擊遮罩不能悄悄把內容丟掉。可以把 Escape 視同取消，也可以先詢問是否放棄；重點是規格要選一套，不能讓不同關閉方式各自決定資料命運。
我不會把下面這些工作硬塞到側邊：
內容縮到側邊不會變簡單，只會讓捲動、錯誤修正和欄位比較一起變辛苦。
當面板開始需要自己的 Breadcrumb、Tabs、長表單和固定 Footer，它大概已經不是「快速查看」，而是一張被迫住進側邊的完整頁面。
把同一個情境搬到 360px，桌面 Drawer 很快就出事了。
左邊想留一點清單，右邊又要塞完整資料，最後兩邊都只剩一條縫。這時若只把 Drawer 改成由下往上滑、名字換成 Bottom Sheet，工作也只完成一半。
手機版還要重新決定：
LumenDesk 的 Demo 只保留林子安摘要，以及「查看完整資料」「變更角色」兩個下一步。需要編輯更多欄位時，就進完整頁面，不讓 Bottom Sheet 一路長到使用者開始懷疑自己是不是打開了另一個網站。
Android 的官方文件也把 Bottom Sheet 描述為錨定在畫面底部、用來呈現次要內容的表面。這很適合「先看摘要，再決定下一步」，不是把桌面設定頁整包塞進手機。Android Developers：Create a bottom sheet
圖 5：手機版 Bottom Sheet 保留可見把手、關閉按鈕、成員摘要與兩個下一步，沒有把完整表單硬塞進去。
拖曳把手只是「這張面板可能可以移動」的提示，不是所有人都能理解或操作的關閉控制。Demo 還保留可見的關閉按鈕與 Escape；面板不會造成整頁水平捲動，關閉後焦點回到「快速查看林子安」。
動畫是否絲滑可以晚點看。使用者能不能關、關閉後回哪裡，以及軟體鍵盤打開後還能不能按到操作，才是手機版真正的驗收。
| 使用者正在做的事 | 最需要留下什麼 | 建議出口 | 不要硬塞成 |
|---|---|---|---|
| 桌面資料表查看或比對成員 | 原本的列、排序、篩選與捲動位置 | Drawer；再決定 Modal 或 Non-modal | 把清單完全遮住的置中面板 |
| 只看一段摘要，再決定下一步 | 目前頁面與一兩個主要動作 | Sheet，但要補方向與背景規則 | 只有「做一個 Sheet」的模糊需求 |
| 手機快速查看或處理少量動作 | 拇指可及性、返回與底部安全空間 | Bottom Sheet | 被硬壓窄的桌面 Drawer |
| 編輯多欄資料、跨步驟審核或長篇閱讀 | 完整工作空間、網址與歷史導覽 | 完整頁面 | 不斷加高、加寬的浮動面板 |
| 停用、刪除等高風險決策 | 對象、後果與安全取消 | Confirmation Dialog | Drawer 角落的一顆紅色按鈕 |
若內容需要被分享、重新整理後直接回到相同對象，或使用者會透過瀏覽器上一頁返回，還要決定是否把成員 ID 寫入 URL。Drawer 可以是路由的一部分，也可以只是本地 UI 狀態；兩種都能做，但不能讓重新整理後對象無故消失，再假裝這是面板的正常行為。
圖 6：先判斷使用者是否必須停下來回應，再看原頁脈絡是否有用，最後才處理裝置寬度。
在 LumenDesk 的成員管理頁製作「查看成員詳細資料」流程。
桌面版：使用者點選成員列表中的「林子安」後，從右側開啟 Drawer。保留背景資料表的視覺脈絡、搜尋、篩選、排序與捲動位置；Drawer 顯示姓名、部門、角色與加入日期，只允許變更一個角色欄位。
因為這次包含編輯，採 Modal 行為：背景暫停操作，焦點留在面板內。提供關閉、取消與儲存；Escape 或取消不變更資料，關閉後焦點回到開啟 Drawer 的按鈕。若存在尚未儲存的變更，叉叉、Escape 與遮罩關閉不得直接丟棄內容。
若需求改為直接逐列比對，改用 Non-modal Drawer，並補上清單與面板之間的鍵盤移動、目前成員同步與關閉方式。
手機版：改用 Modal Bottom Sheet，從底部顯示林子安摘要與「查看完整資料」「變更角色」兩個動作。除了拖曳把手，還要提供明確的關閉按鈕、Escape／系統返回路徑與底部安全留白；背景暫停操作，360px 下不得水平溢出。軟體鍵盤開啟後，主要動作仍要可見或可捲動到達。
若需要編輯多個欄位、跨多步驟、長篇說明或可分享網址，改到完整頁面。停用帳號等高風險動作另用 Confirmation Dialog。
這段 Prompt 沒有要求「像現代 SaaS」，但把真正會影響操作的條件說清楚了：桌面保留什麼、手機留下什麼、資料如何保存、關閉後回哪裡，以及內容長大後該從哪個出口離開。
我會沿著這條路徑驗收：
只要其中一題開始答得很勉強，通常不是再多加一點寬度就能解決，而是這份內容已經該搬到完整頁面。
最後，我在桌面選擇 Drawer，在手機改用 Bottom Sheet。兩邊都只保留摘要與少量下一步；按 Escape 關閉時，資料不會改變，焦點也回到原本的觸發點。
和昨天的 Confirmation Dialog 相比，今天沒有逼管理員先回答危險問題，而是讓他靠近資料、看完，再回到清單繼續工作。
不過 Drawer 裡又冒出三個需求：角色欄位旁的問號要解釋權限規則、管理員要能變更角色，滑過主管姓名時還想先看人物摘要。最初的 Prompt 把它們揉成一句：
在問號圖示上滑過去，顯示詳細說明和操作。
下面是依第一版需求重建的錯誤現場，不含真實帳號與個人資料：
圖 7：短提示被做成迷你設定頁。滑鼠一移開，權限說明、角色選擇、儲存按鈕和主管資料就一起消失。
明天，我們就從 Drawer 裡繼續拆 Tooltip、Popover 與 Hover Card。滑過去會出現，只能證明它會出現；裡面該放說明、操作還是人物摘要，又是另一場選型現場。
<dialog>（查閱日期：2026-08-07）
iThome鐵人賽
看影片追技術