Tags/Chips 標籤
概述
表格是一種以行列方式組織和呈現資料的組合元件，可以有效呈現大量結構化資訊，方便使用者閱讀、比較和分析，提高資訊的可讀性。
使用時機
表格常用於以下情境：
- 資料展示：需要以結構化方式呈現大量資料時，例如產品列表、訂單記錄、使用者資訊、財務報表等。
- 資料比較：方便使用者比較不同資料時，例如產品規格比較、價格比較、方案比較等。
- 資料分析：支援資料分析功能時，例如數據排序、篩選、分組等。
使用規範
當您取用表格進行設計時，應考慮以下原則：
- 標題清晰：每個欄位的標題應簡潔明瞭，準確反映數據含義。
- 斑馬紋（選擇性）：使用交替的背景顏色來區分相鄰行，以提高可讀性。
- 排序（選擇性）：提供資料排序功能，讓使用者按照不同欄位排序資料。
- 篩選（選擇性）：提供資料篩選功能，讓使用者可以篩選符合特定條件的資料。
- 分頁（選擇性）：當資料較多時，可提供分頁功能，避免一次顯示過多資訊。
- 空狀態：當表格無資料時，顯示空狀態提示，例如「沒有找到資料」、「無資料」或「請新增資料」等。
設計範例
![]()
- 標題列/欄（Header Row/Column）：表格的標題行或列，用於描述每個欄位的內容。
- 資料列（Data Row）：各欄位對應的資料行。
概述
標籤是一種小型、非互動式（或輕度互動式）的元件，用於顯示和標記內容的元數據（metadata），例如關鍵字、屬性、分類或狀態。它們通常由文字、圖示或兩者的組合構成，並以視覺化的方式呈現，幫助使用者快速理解和組織資訊。
使用時機
標籤常用於以下情境：
- 內容標記和分類：以標籤標記文章/多媒體/商品的分類、主題或關鍵字，幫助使用者快速理解內容的主題、類別或關鍵字，方便瀏覽、搜尋和篩選資訊。
- 篩選和導航：使用標籤讓使用者可以透過點擊該標籤，導航到相關的主題或分類。
- 狀態和屬性：顯示內容的狀態或屬性，提供額外的資訊。
使用規範
當您取用標籤進行設計時，應考慮以下原則：
- 標籤內容：
- 簡潔明瞭：標籤應簡短扼要，準確描述內容的特徵或屬性，避免使用過長的詞彙或句子。
- 一致性：在同一應用程式或網站中，標籤的格式和風格應保持一致。
- 標籤樣式：使用不同的顏色來區分不同類型的標籤。
- 標籤數量：
- 限制數量：避免在單個項目上添加過多的標籤，請考量視覺疲勞與辨識性。
- 提供管理功能：若允許使用者自定義標籤，應提供管理功能如新增、編輯或刪除功能。
設計範例
![]()
- 標籤容器（Container）：標籤的外部框架。
- 標籤文字（Label Text）：顯示的文本內容。
- 刪除（Remove）（選擇性）：允許使用者刪除標籤的功能。
