清單以視覺化方式呈現一或多個相關項目。 這類函式通常用於顯示選項集合。
資源
類型 | 連結 | 狀態 |
---|---|---|
設計 | 設計來源 (Figma) | 可使用 |
導入作業 | Jetpack Compose | 敬請期待 |
重點特色
- 清單是一組連續的文字或圖片。
- 清單應自然且易於瀏覽。
- 清單由項目組成,包含以圖示和文字代表的主要和補充動作。
變化版本
清單分為三種類型:單行清單、兩行清單和三行清單。
- 單行清單:一行用來傳達各個項目的文字。這種簡單的設計可確保每個項目都能明確區別。
- 兩行清單:使用兩行平行線傳遞各個項目。這種結構化的設計可確保內容的可讀性,並避免認知超載。
- 三行清單:使用三行平行線代表各個項目。 這種裝飾設計可以提高視覺顯著性,
圖解
- 圖示:代表特定物件或動作的小型圖像,通常用來透過視覺效果傳達想法或概念。
- 上行:顯示在標題或副標題上方的短行文字,通常用於提供額外的背景資訊或強調效果。
- 標題:大型粗體文字行,做為設計元素或頁面的主要標題。
- 副標題:一小段文字,在主要標題下方提供額外資訊或背景資訊。
- Control:一種互動元素,可讓使用者輸入決定。
狀態
規格
使用方式
清單是垂直組織的文字與圖片群組。 清單已針對閱讀理解最佳化,其中包含單一連續的項目欄。清單項目可包含以圖示和文字表示的主要和補充動作。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/container-do.webp?authuser=3&hl=zh-tw)
正確做法
清單項目不是按鈕。這些項目沒有容器。根據預設,清單項目會處於未選取狀態且未聚焦。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/container-dont.webp?authuser=3&hl=zh-tw)
注意
只在必要時對清單項目使用容器背景。
選取控制項
控制顯示清單項目的資訊和動作。這些項目可以對齊清單項目的開頭或結尾。
![選項核取方塊](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-checkbox.webp?authuser=3&hl=zh-tw)
![選取電台](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-radio.webp?authuser=3&hl=zh-tw)
![選取切換按鈕](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-switch.webp?authuser=3&hl=zh-tw)
- 核取方塊:選取一或多個清單項目。
- 圓形按鈕:從清單中選取一個項目。
- 切換按鈕:開啟或關閉控制項。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-do.webp?authuser=3&hl=zh-tw)
正確做法
使用圖示選取指標,在清單中清楚顯示所選項目。這可協助使用者輕鬆辨識已選取的項目,改善整體的使用者體驗。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-dont.webp?authuser=3&hl=zh-tw)
錯誤做法
避免僅使用背景顏色來表示在清單中選擇的項目。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/action-dont.webp?authuser=3&hl=zh-tw)
錯誤做法
請避免將按鈕放在清單項目內,因為這樣可能會造成使用者混淆目前聚焦的元素。
圖示
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/icon-do.webp?authuser=3&hl=zh-tw)
正確做法
如果您在清單中顯示相同類型的內容,請省略圖示來減少視覺幹擾,並改善使用者體驗。如果圖示沒有用途,且沒有提供額外資訊,請避免在清單中使用圖示。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/icon-dont.webp?authuser=3&hl=zh-tw)
錯誤做法
避免為清單中的所有項目使用相同的圖示。這可能會讓使用者感到不堪負荷或感到困惑。請僅在有附加價值或提供額外資訊時才使用圖示。
顯示圖片與圖片
清單項目可以包含圓形裁剪圖片,來代表某人或實體。