60 秒決策
先確認使用者要完成的事。
適合使用
- 一組相關連結需要讓使用者知道哪個對應目前頁面、步驟或位置。
- 同一個目的地在 Header、Sidebar 與手機底部導覽都可能出現。
不適合使用
- 同一組導覽同時標了兩個「目前」項目。
- 只用顏色差異，讓色覺、低對比或輔助科技使用者失去位置資訊。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
一組只標一個目前項目
同一個 nav 中只讓正在對應的連結使用 aria-current="page"。
語意與視覺同步
背景、底線、圖示或文字狀態可協助掃讀，但 aria-current 才能把目前位置提供給輔助科技。
跨裝置維持同一個目的地
桌面 Sidebar 與手機 Bottom Navigation 的外觀可以不同，但標示的目前位置應一致。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
初始頁
各組導覽都標示同一個目前目的地。
切換目的地
舊項目移除目前頁狀態，新項目接手。
不同呈現模式
Desktop、Drawer、Bottom Navigation 之間切換時，狀態不遺失。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
成員頁的同步標示
先觀察：Header、Sidebar、Drawer 與 Bottom Navigation 都指向同一個目前頁。
操作：選取不同目的地並檢查各組導覽。
預期結果：每組只剩一個 aria-current="page"，同時保有文字或樣式提示。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 的 Header、Sidebar 與 Bottom Navigation 都標示目前頁「成員」。每一組中只標示一個目前頁連結，使用 aria-current="page"；視覺上搭配文字、底線、背景或圖示等至少一種非色彩線索。切換目的地後，同步更新各組導覽的 aria-current、可見標示與 Live status。驗收清單
不要只確認欄位能不能點。
- 每一組導覽是否只標示一個目前項目？
- 是否使用 aria-current="page"？
- 是否有非色彩的可見提示？
- 切換目的地後是否同步更新所有導覽模式？
- 頁面標題是否也能和目前位置對得上？