狀態、分類與識別
小小一顆,不代表都叫標籤。
先分清它是在報告數量、描述分類、代表篩選、顯示狀態,還是協助辨認一個人。
選擇流程
先判斷資訊還是操作。
- 報告數量?Badge。
- 描述分類?Tag。
- 可移除的值或篩選?Chip/Filter Chip。
- 人物或狀態?Avatar/Status Indicator。
差異對照
外觀相似,操作承諾完全不同。
| 判斷面向 | Badge徽章 | Tag標籤 | Chip資訊膠囊 | Filter Chip篩選膠囊 | Status Indicator狀態指示 | Avatar頭像 |
|---|---|---|---|---|---|---|
| 負責什麼 | 數量或短狀態 | 內容分類 | 緊湊的值或操作 | 目前篩選條件 | 系統狀態 | 人物或組織識別 |
| 是否互動 | 通常否 | 通常否 | 依規格而定 | 是,可切換或移除 | 通常否 | 通常否 |
| 不能只靠 | 顏色與圓點 | 彩色外觀 | 看起來像按鈕 | 背景色表示選取 | 紅綠顏色 | 照片本身 |
示範情境
把顏色拿掉,意思還要留得住。
「進行中」Filter Chip 必須說明選取狀態;「已同步」Status Indicator 必須有文字;人物 Avatar 旁仍要看得到姓名。
查看 Filter Chip Demo →