60 秒決策
先確認使用者要完成的事。
適合使用
- 資料列大致平面，但偶爾需要打開一段補充說明、檢核內容或次要欄位。
- 使用者通常先比較表格摘要，只有選定一列後才需要更多細節。
不適合使用
- 展開後出現的是多層父子資料，且每一層都要繼續展開。
- 每一列都必須常態顯示詳細內容；這時把重要欄位直接放進表格或詳細頁更誠實。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
明細屬於同一列
展開區放在對應資料列正下方，並標示它補充的是哪一筆資料。
觸發文字說明結果
「顯示檢核明細」比只放一個向下箭頭更能預期按下後發生什麼。
摘要仍要足夠做判斷
名稱、狀態、負責人等關鍵資料先留在表格；不要讓每列都得展開才知道是什麼。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
收合列
只顯示可掃讀的摘要欄位與可理解的明細入口。
展開明細
同一列下方出現補充內容，觸發按鈕同步更新 aria-expanded 與文字。
收合後回到入口
關閉明細時焦點仍留在同一個觸發按鈕，使用者不需要重新找列。
窄螢幕
保留能判斷的摘要欄位；明細在同一列下方自然換行。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
任務檢核明細
先觀察：展開的是「活動頁無障礙檢查」自己的補充資料，不是它的子任務。
操作：按「顯示檢核明細」，閱讀內容後再按「收合檢核明細」。
預期結果：aria-expanded、按鈕文字與明細可見性同步；收合後焦點還在原按鈕。
可操作 Demo
打開的是同一筆任務的明細，不是它的子節點。
LumenDesk／產品與設計中心
同一份部門與專案資料，依任務換成不同的呈現方式。任務檢核表
Expandable Row：用摘要看全部，用明細看一筆這張表沒有父子任務。展開區只是「活動頁無障礙檢查」自己的檢核資料。
| 任務 | 負責人 | 狀態 | 截止日 | 明細操作 |
|---|---|---|---|---|
| 活動頁無障礙檢查 | 陳怡安 | 進行中 | 8/18 | |
本列補充資料活動頁無障礙檢查 已完成標題層級與鍵盤焦點檢查；下一步是用 360px 寬度驗證表單錯誤訊息。
| ||||
| 素材尺寸確認 | 張書銘 | 待處理 | 8/20 | 無補充明細 |
目前顯示任務摘要；可展開第一列查看它的檢核明細。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 的任務表建立 Expandable Row。每列先顯示任務名稱、負責人、狀態與截止日；使用者可按「顯示檢核明細」展開該列下方的完整說明、檢核項目與下一步。觸發按鈕需同步 aria-expanded，收合後焦點留在同一個按鈕。不要把平面任務表誤做成有多層父子節點的 Tree View；明細是同一列的補充，不是孩子資料。驗收清單
不要只確認欄位能不能點。
- 展開內容是否真的是同一筆資料的補充，而不是子節點？
- 摘要列是否已保留判斷所需的重要欄位？
- 觸發按鈕是否有文字、aria-controls 與同步的 aria-expanded？
- 展開區是否緊接在正確資料列下方？
- 收合後焦點是否留在同一個入口？
- 若所有列都必須展開才能理解，是否改為詳細頁或直接增加欄位？