60 秒決策
先確認使用者要完成的事。
適合使用
- 手機使用者需要快速查看一筆摘要、選擇少量下一步或處理短任務。
- 從底部出現更接近拇指操作區，且內容可以在有限高度內說完。
不適合使用
- 內容是很長的編輯表單、複雜設定、多人比較或必須長時間閱讀的資訊。
- 桌面資料表脈絡才是主要價值，卻硬把同一個底部面板搬到寬螢幕。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
先讓人知道它能從底部離開
可見拖曳把手、關閉入口與清楚的取消方式，讓面板不會像突然卡住的頁面。
摘要和下一步優先
先顯示對象與關鍵狀態，再給一兩個下一步；不把整張桌面表單縮進手機底部。
底部留給手勢與系統區域
按鈕不能貼在螢幕最下方；保留安全留白，也避免內容被系統手勢遮住。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
收合
入口要說明會查看或處理哪一筆資料。
展開
把手、標題、摘要與少量動作在可視區內看得懂。
前往完整流程
需要大量欄位時，提供清楚入口，不在底部面板裡無限堆內容。
取消或關閉
Escape、關閉或向下手勢的規則要安全，焦點回到開啟入口。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
手機快速查看成員
先觀察：Bottom Sheet 是否只呈現成員摘要與兩個下一步，而不是一張很長的表單。
操作：在 360px 寬度開啟面板，檢查把手、關閉、按鈕與底部留白，再按 Escape。
預期結果：內容不會水平溢出；關閉後回到「快速查看林子安」按鈕，且不會變更示範資料。
Bottom Sheet Demo
手機上先給摘要與下一步，不塞長表單成員部門角色
林子安產品設計專案管理員
陳可欣行銷編輯者
黃柏翰工程檢視者
面板從底部展開，只顯示成員摘要與兩個後續動作；需要多欄位編輯時再前往完整頁面。
尚未開啟底部面板。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 手機版製作 Bottom Sheet。使用者點選成員後，從底部展開一個可快速查看林子安角色與部門的面板，提供「查看完整資料」與「變更角色」兩個清楚動作。面板要有可見拖曳把手、關閉方式、足夠的底部安全留白，以及不超出 360px 視窗的排版。這個 Bottom Sheet 只放摘要與下一步；若要編輯多個欄位，導向完整頁面，不要把長表單塞進狹窄面板。驗收清單
不要只確認欄位能不能點。
- 面板是否以短摘要和少量操作為主？
- 是否有可見把手或其他可理解的收合提示？
- 360px 寬度下，按鈕與內容是否仍能完整閱讀？
- 底部是否保留足夠安全留白，不被系統手勢或瀏覽器列遮住？
- 長表單是否被導向完整頁面，而不是塞在 Bottom Sheet？
- 關閉後焦點是否回到原本開啟它的位置？