60 秒決策
先確認使用者要完成的事。
適合使用
- 用短文字或數字補充未讀數量、狀態或醒目提示，不承擔複雜操作。
- 需求能說清楚「3 則待處理」是資訊還是操作。
不適合使用
- 只是想在資料表放一些彩色小東西。
- 文字本身太長，或元件需要承接完整流程。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
先寫出它代表什麼
Badge 只報告數量或短狀態，不能只靠顏色表達意義。
顏色不能是唯一線索
文字、圖示或位置要能獨立說明狀態，避免只用紅綠區分。
看起來能點就真的要能點
互動元件使用 button 等原生控制項；唯讀資訊不要加 hover 手勢誤導。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
預設
顯示「3 則待處理」並保留清楚文字。
聚焦或選取
若可以操作，焦點與選取不能只靠顏色。
移除或清除
可移除值要有具名按鈕，移除後更新結果與狀態訊息。
缺值或載入失敗
保留可讀文字或替代，不用破圖與空白代表未知。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
Badge 行為檢查
先觀察：先判斷它是資訊還是控制項，再查看名稱與狀態。
操作：使用 Tab 聚焦示範控制，按 Enter 或 Space 切換。
預期結果：可見狀態、可存取名稱與結果文字同步；唯讀內容不會假裝可點。
badge Demo
LumenDesk 實際操作情境待處理申請 3
尚未操作此 Demo。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 建立 Badge（徽章）示範。Badge 只報告數量或短狀態，不能只靠顏色表達意義。提供預設、聚焦、選取或缺值等適用狀態；操作若會改變篩選或資料，必須使用原生按鈕並提供可辨識名稱。驗收清單
不要只確認欄位能不能點。
- 它是在報告資訊還是讓使用者操作？
- 顏色拿掉後仍看得懂嗎？
- 互動元件是否有原生語意與可辨識名稱？
- 可移除值是否說清楚要移除什麼？
- 狀態改變後結果是否同步？
- 手機版是否不因膠囊過多而水平溢出？