清單以視覺化方式呈現一或多個相關項目。 通常用於顯示一組選項。
資源
| 類型 | 連結 | 狀態 |
|---|---|---|
| 設計 | 設計來源 (Figma) | 可使用 |
| 實作 | Jetpack Compose | 可使用 |
重點特色
- 清單是一組連續的文字或圖片。
- 清單內容必須自然且易於瀏覽。
- 清單由包含主要和補充資料的項目組成 以圖示和文字表示的動作
版本
清單分為三種類型：單行清單、雙行清單及 三行清單
- 單行清單：以單行說明每個項目。這麼簡單 可確保每一個項目之間有明顯區別。
- 兩行清單：使用兩行平行線來傳達每個項目。 這種結構分明的設計可確保清晰易讀，避免認知高 超載
- 三行清單：使用三行平行線來表示各個項目。 這種裝飾設計能創造出高水準的視覺顯眼程度。
圖解
- 圖示：代表特定物件或動作的小型圖像，通常是 透過視覺元素傳達想法或概念
- 頂線：顯示在標題或副標題上方的一小段文字。 經常用來提供額外的背景資訊或強調內容
- 標題：大型粗體文字，是 設計元素或網頁
- 副標題：提供額外資訊的一小段文字 或主標題下方的背景資訊
- 控制項：這個互動式元素可讓使用者輸入決策。
狀態
規格
用量
清單是垂直整理的文字和圖片群組。 清單含有單一 項目。 清單項目可包含主要和補充動作 例如圖示和文字
正確做法
清單項目不是按鈕。項目沒有容器。清單項目預設為未選取和未聚焦。
注意
請只在必要時將容器背景用於清單項目。
選取控制項
控制項會顯示清單項目的資訊和動作。您可以對齊 附加至清單項目的前方或結尾邊緣。
- 核取方塊：選取一或多個清單項目。
- 圓形按鈕：只選取一個圓形按鈕 清單中的項目
- 切換鈕：開啟或關閉控制項。
正確做法
使用圖示選取指標，清楚顯示清單中已選取的項目。這有助於使用者輕鬆識別所選項目，並改善整體使用者體驗。
錯誤做法
避免僅透過背景顏色來指定清單中的選項。
錯誤做法
避免將按鈕放在清單項目內，否則可能會導致使用者混淆目前關注的元素。
圖示
正確做法
如果您在清單中顯示相同類型的內容，請省略圖示以減少視覺雜訊，提升使用者體驗。避免在清單中使用毫無用途且未提供額外資訊的圖示。
錯誤做法
避免為清單中的所有項目使用相同的圖示。這種標題在視覺上可能會令人眼花撩亂，造成使用者困惑。建議只在圖示要增加價值或提供額外資訊時才使用。
顯示圖片和圖片
清單項目可以加入圓形裁剪的圖片來代表 人物或實體
