List
列表
WebMobileDesktop上手难度: 容易
一列一列排下来的信息，每一行是同一类东西。
Live Demo
真的可以点你刚才看到的这个：微信聊天列表、设置里的功能列表、系统「设置」App 的每一行、邮件列表——左边头像右边标题再右边时间。
它到底是什么
List 是信息展示的基本单位。它的关键决策是「一行里放多少信息」和「哪些行可点」。一行可点时，整行都要有 hover 反馈和热区。
列表list列表项list item行feed
Anatomy · 它由什么组成
Row / Item列表行
最小热区 48px，整行可点
Leading前导
头像 / 图标
Title主标题
一行截断
Subtitle副标题
次要色，一行
Trailing尾部
值 / 时间 / 箭头
Divider分隔线
与文字左对齐，不通栏
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 同类内容有 3 项以上需要纵向浏览 | 用 |
| 每项信息结构相同（标题+副标题+值） | 用 |
| 需要快速扫读 | 用 |
| 需要对比各项的横向数值 | 不用 |
| 只有 1–2 项 | 视情况 |
行内塞了五个字段就成表格了——横向对比请用 Table。
行与行之间必须有分隔线或留白，否则会看成一坨。
Similar Patterns
别搞混一句话区分：一列一列排下来的信息，每一行是同一类东西。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个设置列表：每行左侧图标 + 标题 + 右侧当前值 + 箭头，整行可点，行间有细分隔线，分组之间有分组标题。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个列表显示数据。
改成这样说
加设置 List：每行用 button 包裹保证整行可点、高度 ≥48px、行左侧图标 + 标题 + 右侧值 + 箭头，分隔线与文字左对齐不通栏，分组用标题 + 间距而非分隔线。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。