60 秒決策
先確認使用者要完成的事。
適合使用
- 資料真的有父子關係，使用者需要逐層展開、收合與瀏覽，例如部門、資料夾或專案分類。
- 使用者需要在同一個階層中選取一個或多個節點，且這與「目前焦點」有不同意義。
不適合使用
- 內容只是文章大綱、說明文字或少量固定項目，沒有展開與選取任務。
- 每一筆資料都要比較多個欄位、排序或批次處理；這時 Treegrid 或一般資料表較合適。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
縮排要能讀出父子關係
每一層的起點一致，父節點、子節點與葉節點不能只靠一個小箭頭猜。
展開、選取、焦點分開畫
箭頭方向表示展開；底色或標記表示選取；Focus 外框表示鍵盤目前位置。三者不要共用同一個藍色底。
不要讓樹無限變深
當常見路徑超過三、四層，先重新整理資訊架構或提供搜尋，別要求人一直開資料夾。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
收合父節點
子節點不可見，並讓人知道還有多少內容在裡面。
展開父節點
子節點出現在正確縮排下，Right 與 Left 的行為能預期。
已選取節點
選取結果獨立於焦點；焦點移動時不應偷偷換掉使用者已選資料。
鍵盤焦點
有清楚外框或等效提示，使用者知道下一次按鍵會影響哪個節點。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
部門與專案樹
先觀察：「產品策略組」的展開箭頭、已選專案與焦點外框是否各自可辨認。
操作：先選取一個專案，再用上下方向鍵移動焦點；對父節點按 Right 或 Left。
預期結果：焦點會在可見節點間移動；父節點可展開或收合，先前選取的專案不會因焦點移動而消失。
可操作 Demo
有父子關係時，縮排之外還要能展開、選取與走訪。
LumenDesk／產品與設計中心
同一份部門與專案資料，依任務換成不同的呈現方式。部門與專案
Tree View：焦點走訪，選取不跟著亂跳先選一個專案，再用方向鍵移動。藍色底是「已選取」，外框是「鍵盤焦點」，箭頭方向才是「展開」。
- 產品與設計中心2 個部門
- 產品策略組2 個專案
- LumenCore 平台進行中
- 行動應用程式規劃中
- 設計系統組1 個專案
- 元件盤點計畫進行中
- 研究中心3 個專案
- 可用性研究準備中
目前選取：LumenCore 平台。焦點可獨立移動。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 建立部門與專案的 Tree View。節點有父子關係，父節點可展開或收合，葉節點可以被選取。視覺上要區分「已展開」、「目前選取」和「鍵盤焦點」；使用者可用上下方向鍵走訪可見節點、Right 展開或進入子節點、Left 收合或回到父節點、Enter 選取。不要只用 CSS 縮排和點擊效果假裝成樹狀元件。驗收清單
不要只確認欄位能不能點。
- 資料是否真的有父子關係，而非只是排版分組？
- 展開、選取與 Focus 是否能在畫面上同時看懂？
- 父節點是否有 aria-expanded，葉節點是否沒有假裝成可展開？
- 上下、Left、Right、Home、End 與 Enter 是否有可預期行為？
- 樹太深或節點太多時，是否另有搜尋、篩選或資訊架構調整？
- 選取模型是否明確：焦點移動會不會改變選取？