60 秒決策
先確認使用者要完成的事。
適合使用
- 每列都有一個輔助圖像與主要文字，圖像能快速辨識對象。
- 內容結構與使用者掃讀方式已經能被說清楚。
不適合使用
- 圖像本身是主要內容，或圖片比例與大小差異很大。
- 只是因為想讓畫面更豐富或更像 SaaS。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
先讓資料關係成立
媒體與文字要有穩定對齊；裝飾圖不重複朗讀，人物圖要有合理替代。
主內容先於裝飾
名稱、數值與主要操作要先能被讀懂，再決定陰影、邊框與圖示。
窄螢幕重新排序
手機版依任務保留必要資訊，不只是把桌面寬度縮小。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
預設內容
圖片失敗時仍保留名稱、縮寫或替代內容。
內容不足或缺值
用可理解文字處理缺值，不用空白或破版暗示。
載入與失敗
只替受影響區域提供等待或復原，不清空仍可信的內容。
鍵盤與手機
閱讀順序、焦點順序與視覺順序保持一致。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
媒體物件資料責任
先觀察：先看主要內容、輔助資訊與操作是否各自清楚。
操作：切換 Avatar 載入失敗，確認成員名稱與文字替代仍可辨識。
預期結果：資料關係、狀態文字與鍵盤焦點同步更新。
media object Demo
LumenDesk 實際操作情境林
林子安
產品設計 · 最近更新 LumenCore
尚未操作此 Demo。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 建立成員 Media Object，每列包含 Avatar、姓名、部門與最近活動。Avatar 載入失敗時顯示姓名縮寫；姓名仍是主要可讀內容，不把人名只藏在圖片替代文字裡。驗收清單
不要只確認欄位能不能點。
- 這些資料需要獨立閱讀還是跨筆比較？
- 主要名稱是否比裝飾更早被看見？
- 操作是否有清楚名稱且不與整列互相衝突？
- 缺值、載入與錯誤是否有合理結果？
- 手機版是否保留任務所需資訊？
- 視覺順序是否和程式閱讀順序一致？