狀態、分類與識別

小小一顆,不代表都叫標籤。

先分清它是在報告數量、描述分類、代表篩選、顯示狀態,還是協助辨認一個人。

選擇流程

先判斷資訊還是操作。

  1. 報告數量?Badge。
  2. 描述分類?Tag。
  3. 可移除的值或篩選?Chip/Filter Chip。
  4. 人物或狀態?Avatar/Status Indicator。

差異對照

外觀相似,操作承諾完全不同。

判斷面向Badge徽章Tag標籤Chip資訊膠囊Filter Chip篩選膠囊Status Indicator狀態指示Avatar頭像
負責什麼數量或短狀態內容分類緊湊的值或操作目前篩選條件系統狀態人物或組織識別
是否互動通常否通常否依規格而定是,可切換或移除通常否通常否
不能只靠顏色與圓點彩色外觀看起來像按鈕背景色表示選取紅綠顏色照片本身

示範情境

把顏色拿掉,意思還要留得住。

「進行中」Filter Chip 必須說明選取狀態;「已同步」Status Indicator 必須有文字;人物 Avatar 旁仍要看得到姓名。

查看 Filter Chip Demo →