รายการ
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
รายการคือการแสดงภาพรายการที่เกี่ยวข้องอย่างน้อย 1 รายการ
โดยมักใช้เพื่อแสดงคอลเล็กชันตัวเลือก
แหล่งข้อมูล
ไฮไลต์
- รายการคือคอลเล็กชันข้อความหรือรูปภาพที่ต่อเนื่องกัน
- รายการควรดูเป็นธรรมชาติและอ่านง่าย
- รายการประกอบด้วยรายการที่มีการดำเนินการหลักและการดำเนินการเสริมซึ่งแสดงด้วยไอคอนและข้อความ
เวอร์ชัน
รายการมี 3 ประเภท ได้แก่ รายการแบบบรรทัดเดียว รายการแบบ 2 บรรทัด และรายการแบบ 3 บรรทัด
- รายการแบบบรรทัดเดียว: บรรทัดเดียวเพื่อสื่อสารแต่ละรายการ การออกแบบที่เรียบง่ายนี้ช่วยให้แต่ละรายการมีความแตกต่างกันอย่างชัดเจน
- รายการ 2 บรรทัด: ใช้เส้นขนาน 2 เส้นเพื่อสื่อสารแต่ละรายการ
การออกแบบที่มีโครงสร้างนี้ช่วยให้อ่านได้อย่างเป็นธรรมชาติและหลีกเลี่ยงการประมวลผลข้อมูลมากเกินไป
- รายการ 3 บรรทัด: ใช้เส้นขนาน 3 เส้นเพื่อแสดงแต่ละรายการ
การออกแบบตกแต่งนี้ทำให้ภาพมีความโดดเด่นในระดับสูง
กายวิภาคศาสตร์
- ไอคอน: กราฟิกขนาดเล็กที่แสดงถึงวัตถุหรือการกระทำที่เฉพาะเจาะจง ซึ่งมักใช้เพื่อสื่อถึงแนวคิดหรือคอนเซ็ปต์ด้วยภาพ
- บรรทัดบน: บรรทัดข้อความสั้นๆ ที่ปรากฏเหนือชื่อหรือคำบรรยายย่อย ซึ่งมักใช้เพื่อระบุบริบทเพิ่มเติมหรือเน้นข้อความ
- ชื่อ: บรรทัดข้อความขนาดใหญ่ตัวหนาที่ทำหน้าที่เป็นบรรทัดแรกหลักขององค์ประกอบหรือหน้าการออกแบบ
- คำบรรยาย: บรรทัดข้อความขนาดเล็กที่ให้ข้อมูลเพิ่มเติมหรือบริบทใต้ชื่อหลัก
- การควบคุม: องค์ประกอบอินเทอร์แอกทีฟที่อนุญาตให้ผู้ใช้ป้อนการตัดสินใจ
รัฐ
ข้อกำหนด
การใช้งาน
รายการคือกลุ่มข้อความและรูปภาพที่จัดระเบียบในแนวตั้ง
รายการที่เพิ่มประสิทธิภาพเพื่อการอ่านทำความเข้าใจประกอบด้วยคอลัมน์รายการแบบต่อเนื่องคอลัมน์เดียว
รายการในลิสต์อาจมีการดำเนินการหลักและการดำเนินการเสริมที่แสดงด้วยไอคอนและข้อความ
check_circle
ควรทำ
รายการในลิสต์ไม่ใช่ปุ่ม รายการไม่มีคอนเทนเนอร์ โดยค่าเริ่มต้น รายการในรายการจะไม่ได้รับการเลือกและโฟกัส
warning
ข้อควรระวัง
ใช้พื้นหลังคอนเทนเนอร์สำหรับรายการในลิสต์เมื่อจำเป็นเท่านั้น
การควบคุมการเลือก
ควบคุมการแสดงข้อมูลและการดําเนินการของรายการในลิสต์ โดยสามารถจัดแนวให้อยู่ตรงขอบหน้าหรือขอบหลังของรายการในลิสต์
- ช่องทําเครื่องหมาย: เลือกรายการในรายการอย่างน้อย 1 รายการ
- ปุ่มตัวเลือก: เลือกรายการในรายการเพียงรายการเดียว
- สวิตช์: เปิดหรือปิดการควบคุม
check_circle
ควรทำ
ใช้ตัวบ่งชี้การเลือกไอคอนเพื่อแสดงรายการที่เลือกในรายการอย่างชัดเจน ซึ่งจะช่วยให้ผู้ใช้ระบุรายการที่เลือกได้อย่างง่ายดายและปรับปรุงประสบการณ์โดยรวมของผู้ใช้
cancel
ไม่ควรทำ
หลีกเลี่ยงการใช้สีพื้นหลังเพียงอย่างเดียวเพื่อระบุรายการที่เลือก
cancel
ไม่ควรทำ
หลีกเลี่ยงการวางปุ่มภายในรายการของรายการ เนื่องจากอาจทำให้สับสนว่าองค์ประกอบใดมีโฟกัสอยู่
ไอคอน
check_circle
ควรทำ
หากคุณแสดงเนื้อหาประเภทเดียวกันในรายการ ให้ละเว้นไอคอนเพื่อลดสิ่งรบกวนทางสายตาและปรับปรุงประสบการณ์ของผู้ใช้ หลีกเลี่ยงการใช้ไอคอนในรายการเมื่อไอคอนไม่มีจุดประสงค์และไม่ได้ให้ข้อมูลเพิ่มเติม
cancel
ไม่ควรทำ
หลีกเลี่ยงการใช้ไอคอนเดียวกันสำหรับรายการทั้งหมดในรายการ เนื่องจากอาจทำให้ผู้ใช้สับสนและรู้สึกไม่สบายตา แต่ให้ใช้ไอคอนเฉพาะในกรณีที่ไอคอนเหล่านั้นให้คุณค่าหรือให้ข้อมูลเพิ่มเติมเท่านั้น
รูปโปรไฟล์และรูปภาพ
รายการในลิสต์อาจมีรูปภาพในภาพวงกลมเพื่อแสดงบุคคลหรือนิติบุคคล
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[null,null,["อัปเดตล่าสุด 2025-07-27 UTC"],[],[],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."]]
