60 秒決策
先確認使用者要完成的事。
適合使用
- 階層列旁還要看負責人、狀態、日期或數值等多欄資訊。
- 展開子列、比較欄位與列選取都是真正的工作需求，且團隊能實作完整鍵盤模型。
不適合使用
- 只有名稱與單一層級關係，Tree View 已能完成任務。
- 產品沒有足夠工程與測試能力處理 Grid 的鍵盤焦點、排序、手機版與輔助科技行為。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
第一欄說階層，其餘欄說資料
只有階層欄縮排；狀態、負責人與截止日維持欄位對齊，才能掃讀。
列選取和展開分開
不要讓點到列就同時展開、選取又跳頁；清楚標示目前動作會改變什麼。
先定手機策略
多欄資料通常需要局部橫向捲動、摘要列或切換成詳細頁，不能把每欄縮成兩個字。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
父列收合
子列暫時不顯示，但父列仍保留欄位資料與展開提示。
父列展開
子列在同一張表中出現，第一欄縮排清楚，其他欄仍對齊。
列焦點與選取
鍵盤目前列與已選列各有明顯視覺，不把兩種狀態混成一個底色。
窄螢幕
表格可在自己的容器橫向捲動，頁面本身不產生水平溢出。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
專案工作樹狀表格
先觀察：第一欄可展開，其他欄仍能比較負責人、狀態與截止日。
操作：聚焦「產品策略組」，按 Right 展開，按 Down 到子列，再按 Left 收合。
預期結果：只改變父列的孩子可見性；欄名與欄位資料保持對齊，頁面不被寬表格撐破。
可操作 Demo
階層和欄位比較都需要時，才承擔 Treegrid 的互動成本。
LumenDesk／產品與設計中心
同一份部門與專案資料，依任務換成不同的呈現方式。專案工作總覽
Treegrid：第一欄講階層，其他欄用來比較資料聚焦父列後按 Right 展開、Left 收合；上下方向鍵走訪目前可見的列。手機版表格在自己的區塊橫向捲動。
單位或專案負責人狀態截止日
產品策略組林子安進行中8/30
LumenCore 平台林子安進行中8/18
行動應用程式陳思妤規劃中9/12
設計系統組游庭瑜進行中8/22
元件盤點計畫游庭瑜規劃中9/03
已選列：LumenCore 平台。焦點可獨立移動。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 建立 Treegrid，第一欄是可展開的部門與專案階層，其他欄顯示負責人、狀態與截止日。父列的展開或收合只影響它的子列；已選列與鍵盤焦點需清楚區分。至少支援以鍵盤進入表格、上下走訪列、Right 展開、Left 收合與 Enter 切換展開。每個欄位都有可讀欄名；手機版保留局部橫向捲動或改用摘要，不要把多欄硬擠成難讀的窄欄。驗收清單
不要只確認欄位能不能點。
- 是否真的同時需要階層與多欄資料？
- 階層縮排是否只出現在第一欄，其他欄仍可比較？
- 父列與子列的 aria-expanded、aria-level、列／儲存格角色是否符合選定的互動模型？
- 鍵盤能否進入表格並移動、展開、收合與離開？
- 焦點、選取與展開是否各自清楚？
- 手機版是否使用容器捲動、摘要或其他明確策略？