清單
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
清單是一種視覺化呈現方式，可用於一或多個相關項目。通常用於顯示一組選項。
資源
重點特色
- 清單是連續的文字或圖像集合。
- 清單應讓使用者感覺自然，且易於瀏覽。
- 清單由項目組成，這些項目包含主要和輔助動作，並以圖示和文字表示。
版本
清單分為三種類型：單行清單、雙行清單和三行清單。
- 單行清單：單行清單可用於傳達每個項目。這項簡單的設計可確保每個項目都與其他項目清楚區隔。
- 兩行清單：使用兩個平行線來顯示每個項目。這種結構化設計可確保自然可讀性，並避免認知超載。
- 三行清單：使用三條平行線代表每個項目。這種裝飾設計可營造出極高的視覺效果。
圖解
- 圖示：代表特定物件或動作的小型圖形，通常用於以視覺方式傳達想法或概念。
- 上線：顯示在標題或副標題上方的短行文字，通常用於提供額外的背景資訊或強調。
- 標題：大型粗體文字，可做為設計元素或網頁的主要標題。
- 副標題：在主要標題下方提供額外資訊或背景資訊的較小文字行。
- 控制項：可讓使用者輸入決策的互動式元素。
狀態
規格
用量
清單是垂直排列的文字和圖片群組。清單是為了提升閱讀理解能力而最佳化，由單一連續的項目欄所組成。清單項目可包含主要和輔助動作，並以圖示和文字表示。
check_circle
正確做法
清單項目並非按鈕。項目沒有容器。根據預設，清單項目不會選取或聚焦。
warning
注意
請只在必要時為清單項目使用容器背景。
選取控制項
控管清單項目的顯示資訊和動作。可對齊清單項目的前端或尾端。
- 核取方塊：選取一或多個清單項目。
- 圓形按鈕：在清單中選取單一項目。
- 切換鈕：切換控制項的開啟或關閉狀態。
check_circle
正確做法
使用圖示選取指標，清楚顯示清單中的所選項目。這有助於使用者輕鬆辨識所選項目，並改善整體使用者體驗。
cancel
錯誤做法
請勿只依靠背景顏色來指出清單中的選取項目。
cancel
錯誤做法
請勿在清單項目中放置按鈕，否則使用者可能會混淆，不知道目前焦點在哪個元素上。
圖示
check_circle
正確做法
如果清單中顯示的是相同類型的內容，請省略圖示，以減少視覺干擾並改善使用者體驗。避免在清單中使用圖示，除非圖示有用途，且可提供額外資訊。
cancel
錯誤做法
避免在清單中的所有項目中使用相同的圖示。這可能會讓使用者感到視覺疲勞和困惑。請只在圖示可提供額外資訊或價值時使用。
顯示圖片和圖片
清單項目可包含圓形裁剪的圖片，用來代表人物或實體。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間：2025-07-27 (世界標準時間)。
[null,null,["上次更新時間：2025-07-27 (世界標準時間)。"],[],[],null,["# Lists are a visual representation of one or more related items.\nThey are commonly used to display a collection of options.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#ListItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.ListItemShape,androidx.tv.material3.ListItemColors,androidx.tv.material3.ListItemScale,androidx.tv.material3.ListItemBorder,androidx.tv.material3.ListItemGlow,androidx.compose.foundation.interaction.MutableInteractionSource)) | Available |\n\nHighlights\n----------\n\n- Lists are a continuous collection of text or images.\n- Lists should feel natural and be scannable.\n- Lists are made up of items containing primary and supplemental actions represented by icons and text.\n\nVariants\n--------\n\nThere are three types of lists: one-line list, two-line list, and\nthree-line list.\n\n1. **One-line list**: A single line to communicate each item. This simple design ensures each item is clearly distinct from the other.\n2. **Two-line list**: Uses two parallel lines to communicate each item. This structured design ensures natural readability and avoids cognitive overload.\n3. **Three-line list**: Uses three parallel lines to represent each item. This decorative design creates a high level of visual prominence.\n\nAnatomy\n-------\n\n1. **Icon**: A small graphic that represents a specific object or action, often used to visually communicate an idea or concept.\n2. **Overline**: A short line of text that appears above title or subtitle, often used to provide additional context or emphasis.\n3. **Title**: A large, bold line of text that serves as the main heading of a design element or page.\n4. **Subtitle**: A smaller line of text that provides additional information or context below a main title.\n5. **Control**: An interactive element that allows the user to input a decision.\n\nStates\n------\n\nSpec\n----\n\nUsage\n-----\n\nLists are vertically organized groups of text and images.\nOptimized for reading comprehension, a list consists of a single\ncontinuous column of items.\nList items can contain primary and supplemental actions represented\nby icons and text. \ncheck_circle\n\n### Do\n\nList items are not buttons. The items don't have containers. List items are, by default, unselected and unfocused. \nwarning\n\n### Caution\n\nUse container background for list items only when necessary.\n\n### Selection controls\n\nControls display information and actions for list items. They can be aligned\nto the leading or trailing edge of the list item.\n\n\n\u003cbr /\u003e\n\n1. **Checkboxes**: Select one or more list items.\n2. **Radio buttons**: Select exactly one item in the list.\n3. **Switches**: Toggle a control on or off.\n\ncheck_circle\n\n### Do\n\nUse an icon selection indicator to clearly show the selected item in a list. This will help users easily identify which item they have selected and improve the overall user experience. \ncancel\n\n### Don't\n\nAvoid relying solely on the background color to indicate selection in a list. \ncancel\n\n### Don't\n\nAvoid placing buttons inside a list item as it can cause confusion about which element is currently in focus.\n\n### Icons\n\ncheck_circle\n\n### Do\n\nIf you're showing the same type of content in the list, omit icons to reduce visual noise and improve the user experience. Avoid using icons in a list when they serve no purpose and don't provide additional information. \ncancel\n\n### Don't\n\nAvoid using the same icon for all items in a list. This can be visually overwhelming and confusing for users. Instead, use icons only when they add value or provide additional information.\n\n### Avatars and images\n\nList items can include images in a circular crop to represent a\nperson or entity."]]
