清單是以視覺化方式呈現一或多個相關項目。經常用於顯示一系列選項。
資源
| 類型 | 連結 | 狀態 |
|---|---|---|
| 設計 | 設計來源 (Figma) | 可使用 |
| 導入作業 | Jetpack Compose | 即將推出 |
重點特色
- 清單是連續一組文字或圖片。
- 清單應自然流暢，且易於瀏覽。
- 清單由項目組成，其中包含以圖示和文字表示的主要和補充操作。
版本
清單有三種類型：單行清單、兩行清單和三行清單。
- 單行清單：以一行列出每個項目。這個簡單的設計可確保每個項目之間都有明顯區別。
- 兩行清單：使用兩行平行線傳達每個項目。這種結構化的設計可確保自然易讀，避免造成認知超載。
- 三行清單：使用三行平行線來代表每個項目。這種裝飾設計能大幅提升視覺顯眼程度。
圖解
- 圖示：代表特定物件或動作的小型圖片，通常用於以視覺方式傳達概念或概念。
- 頂線：顯示在標題或子標題上方的簡短文字，通常用於提供額外的背景資訊或強調效果。
- 標題：大型粗體文字行，可做為設計元素或網頁的主要標題。
- 副標題：小行文字，提供在主要名稱下方提供的額外資訊或背景資訊。
- 控制項：可讓使用者輸入決定的互動式元素。
狀態
規格
使用方法
清單是垂直編排的文字與圖片群組。針對閱讀理解最佳化，一份清單是由單一連續資料欄組成。清單項目可包含以圖示和文字呈現的主要和補充動作。
正確做法
清單項目不是按鈕，項目沒有容器。根據預設，清單項目為未選取且未聚焦。
注意
只在必要時使用清單項目容器背景。
選取控制項
控制清單項目顯示資訊和動作。這些元素可以對齊清單項目的開頭或結尾邊緣。
- 核取方塊：選取一或多個清單項目。
- 圓形按鈕：只要選取清單中的一個項目即可。
- 切換鈕：開啟或關閉控制項。
正確做法
使用圖示選取指標清楚顯示清單中的所選項目。這項資訊有助於使用者輕鬆辨別自己選擇了哪些商品，並改善整體使用者體驗。
錯誤做法
避免只仰賴背景顏色來表示清單中的選項。
錯誤做法
請避免在清單項目中放置按鈕，以免造成使用者混淆目前焦點的元素。
圖示
正確做法
如果要在清單中顯示相同類型的內容，請省略圖示以減少視覺幹擾並改善使用者體驗。如果圖示沒有用途，且沒有提供額外資訊，請避免在清單中使用圖示。
錯誤做法
避免為清單中的所有項目使用相同的圖示。這可能會讓使用者感到困惑，並讓使用者感到困惑。而是只有在具備附加價值或提供額外資訊時才使用圖示。
顯示圖片和圖片
清單項目可包含圓形裁剪圖片，用於代表特定人物或實體。
