60 秒決策
先確認使用者要完成的事。
適合使用
- 內容是一組「欄位名稱對應欄位值」的靜態摘要。
- 內容結構與使用者掃讀方式已經能被說清楚。
不適合使用
- 內容需要直接編輯，或多筆資料需要欄對欄比較。
- 只是因為想讓畫面更豐富或更像 SaaS。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
先讓資料關係成立
名稱和值要有程式上的關聯；窄螢幕可以直向堆疊，但不能失去配對。
主內容先於裝飾
名稱、數值與主要操作要先能被讀懂，再決定陰影、邊框與圖示。
窄螢幕重新排序
手機版依任務保留必要資訊，不只是把桌面寬度縮小。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
預設內容
缺值要寫「尚未設定」或合適狀態，不用空白讓人猜。
內容不足或缺值
用可理解文字處理缺值，不用空白或破版暗示。
載入與失敗
只替受影響區域提供等待或復原，不清空仍可信的內容。
鍵盤與手機
閱讀順序、焦點順序與視覺順序保持一致。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
描述列表資料責任
先觀察：先看主要內容、輔助資訊與操作是否各自清楚。
操作：切換「顯示完整資料」，觀察新增欄位是否仍維持名稱和值的配對。
預期結果：資料關係、狀態文字與鍵盤焦點同步更新。
description list Demo
LumenDesk 實際操作情境林子安
- 部門
- 產品設計
- 角色
- 專案管理員
- 加入日期
- 2026-03-12
- 最後登入
- 今天 09:42
尚未操作此 Demo。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 成員 Drawer 中使用 Description List 顯示部門、角色、加入日期與最後登入。使用語意化 dt／dd 配對；沒有值時顯示「尚未設定」。手機版改成直向排列，但不能讓欄位名稱和值失去關係。驗收清單
不要只確認欄位能不能點。
- 這些資料需要獨立閱讀還是跨筆比較？
- 主要名稱是否比裝飾更早被看見？
- 操作是否有清楚名稱且不與整列互相衝突？
- 缺值、載入與錯誤是否有合理結果？
- 手機版是否保留任務所需資訊？
- 視覺順序是否和程式閱讀順序一致？