60 秒決策
先確認使用者要完成的事。
適合使用
- 只有少量、同層級且高頻的主要目的地需要隨時可見。
- 每個項目都代表前往另一個位置，而不是在目前頁面執行工作。
不適合使用
- 目的地已多到需要分組、說明或較深層結構。
- 想把「儲存」「新增」等動作按鈕偽裝成導覽項目。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
同層級才並排
概覽、成員、專案可並列；設定、權限、稽核等若是次級區域，應進入較合適的群組。
連結看起來也要像連結
導覽項目使用 Link 的行為與焦點，不使用只因為好看而沒有目的地的 Button。
目前頁不只靠顏色
文字、底線、背景或位置提示至少保留一項，讓目前位置在各種情況下都看得出來。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
目前頁
只有一個項目標示 aria-current="page"，且視覺與程式語意一致。
Hover 與 Focus
滑鼠與鍵盤都能看見目前可操作的位置。
空間不足
連結不是縮到看不懂；依任務移入 Drawer、選單或手機底部導覽。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
三個主要目的地
先觀察：概覽、成員、專案是同一層級的目的地，而不是三個不同動作。
操作：以 Tab 走過導覽項目並選取「成員」。
預期結果：目前頁標示在每一組導覽同步更新，且焦點仍清楚可見。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立 LumenDesk 的 Navbar，放置「概覽、成員、專案」三個主要目的地。使用 nav 與連結；目前頁以 aria-current="page"、文字與可辨識的視覺狀態共同標示。不要把儲存、刪除、開啟設定等操作混進 Navbar；小螢幕時將這組導覽交給 Drawer 或 Bottom Navigation。驗收清單
不要只確認欄位能不能點。
- 每個 Navbar 項目是否都有真正目的地？
- 項目是否同層級且數量有限？
- 目前頁是否有 aria-current="page"？
- Focus 是否與 Hover 同樣清楚？
- 空間不足時是否有重新編排，而不是壓縮文字？