60 秒決策
先確認使用者要完成的事。
適合使用
- 頁面需要跨頁共用的品牌、主要入口或帳號工具。
- 使用者需要一眼辨識目前正在使用哪一個產品或工作區。
不適合使用
- 把每個設定、篩選與頁面專屬操作都塞到最上方。
- 用 Header 取代頁面自己的標題與主要內容層級。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
保留真正共用的東西
品牌、帳號、全站搜尋或最高層級入口才適合留在 Header；頁面專屬按鈕應靠近它服務的內容。
Header 裡的導覽要有名稱
同時出現主要導覽與帳號選單時，以不同的 nav 名稱讓使用者知道各自用途。
手機版先保留辨識與入口
小螢幕通常保留品牌、目前工作區與開啟選單的按鈕，不讓所有連結擠到同一排。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
一般桌面
品牌、少量主要入口與必要工具可同時清楚呈現。
窄螢幕
次要連結退出頂部列，留下可開啟 Drawer 的明確控制。
選單開啟
控制按鈕反映展開狀態，並讓焦點能進入與離開選單。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
LumenDesk 的共用頂部
先觀察：Header 裡保留的是品牌、工作區與全站入口，不是所有頁面按鈕。
操作：縮小視窗後開啟主選單，再用 Esc 關閉。
預期結果：手機版仍有清楚的產品辨識與選單入口；焦點會回到開啟按鈕。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立 LumenDesk 後台的 Header。左側放品牌名稱，中央只保留 2 到 4 個最高層級入口，右側保留帳號與必要工具。Header 使用語意化 header；若裡面有多組導覽，分別以有名稱的 nav 表示。小螢幕時保留品牌與「開啟主選單」按鈕，其他目的地不要硬擠成一排。驗收清單
不要只確認欄位能不能點。
- Header 是否只放跨頁共用內容？
- 多組導覽是否各自有可理解的名稱？
- 小螢幕是否有明確的主選單入口？
- 展開與收合是否有 aria-expanded 狀態？
- 頁面專屬操作是否沒有被硬塞進 Header？