60 秒決策
先確認使用者要完成的事。
適合使用
- 桌面工作區需要顯示多個目的地、群組或較深的導覽層級。
- 使用者會長時間在同一產品內切換不同工作區域。
不適合使用
- 手機版只把桌面側欄縮窄到圖示剩猜謎遊戲。
- 目的地只有兩三個，Header 或 Navbar 已足以處理。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
以任務分組
把工作區、管理與帳號設定分開，比照字母或想到什麼就列什麼更容易掃讀。
收合後仍可理解
若收合成圖示，保留可取得的文字名稱與目前頁狀態；不要把意義交給猜圖遊戲。
側欄不是手機的唯一答案
小螢幕可改為 Drawer 或 Bottom Navigation，依使用頻率重新安排入口。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
展開
群組名稱、連結名稱與目前頁一併可見。
收合
保留可理解的入口與可還原控制，不失去目前位置。
手機 Drawer
由 Header 的控制按鈕開啟，關閉後焦點回到原控制。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
工作區與管理側欄
先觀察：側欄處理的是較多、可分組的目的地，並且可收合。
操作：切換收合，選取「成員」，再縮到手機寬度開啟 Drawer。
預期結果：桌面可收合、手機改由 Drawer 承接；目前頁保持可理解。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立 LumenDesk 桌面版 Sidebar Navigation，依「工作區」與「管理」分組顯示概覽、成員、專案與設定。支援收合：收合時仍保留每一項可理解的名稱與 tooltip 或文字替代，不可只剩沒有說明的圖示。每一組 nav 都要有可辨識名稱，目前頁使用 aria-current="page"。手機版不要硬塞窄側欄，改為可開關的 Drawer。驗收清單
不要只確認欄位能不能點。
- 目的地是否有符合任務的群組？
- 收合後是否仍可知道每個入口用途？
- 目前頁是否在群組與項目上清楚標示？
- 手機是否改為 Drawer 或其他合適模式？
- Drawer 關閉後焦點是否回到開啟控制？