布局模式 · 内容展示
简单列表
List View
也叫：列表、条目列表、纵向列表、List
把同类条目从上到下排成一列，每行只有图标、标题和一两项辅助信息，适合条目简单、需要快速扫读和点选的场景。
点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。
怎么跟 AI 说
改成你的业务内容再发用简单列表（List）展示通知：每条一行、高 64px，左侧 40px 圆形图标，中间是加粗标题和一行灰色摘要（超出省略），右侧是时间；条目之间用 1px 浅灰分割线，未读条目在标题前显示小圆点，点击整行进入详情。不要做成表格或卡片。
发给
01判断
你的内容是这样吗？
对照两列，确认简单列表是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
每行塞进七八个字段，排得像一张没有表头的表格
下面的线框画的就是这种情况，红色虚线框是出问题的地方。右边的线框画的就是这种情况，红色虚线框是出问题的地方。
- 02
行高和内边距太小，手机上很难点中
- 03
只有一行文字标题，却给每条套上带阴影的大卡片
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
条目从上到下排成一列，每行由左侧图标、中间标题与说明、右侧辅助信息或操作组成，行与行之间用分割线隔开。
组成部分点一下，在上面的线框里标出来
识别特征
- 1一列高度一致的横条，用细线分隔
- 2每行左边是图标或头像，右边是时间或箭头
- 3没有表头，也没有多列对齐的字段
04解释
详细解释
简单列表是最轻量的多条目展示方式：每条占一行，左边可以有图标或头像，中间是标题和一行灰色说明，右边是时间、箭头或一个小按钮，比如通知列表、文件列表、联系人、设置入口。
它和数据表的区别在于字段少、不对齐成列：列表每行只有两三项信息，用户关心的是「这一条是什么」，而不是把多条记录的某个字段放在一起比。所以它比表格轻，也更适合手机。
它和信息流的区别在于每条内容短、结构统一、高度一致：列表里的一行只是入口，点击后才进入详情；信息流里的每一条是完整内容，可以直接在流里阅读、点赞、评论。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
layout-list- DOM 选择器
插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。
.ant-list.arco-list.t-list.n-list.MuiList-root
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
list-layoutsimple-list
- 结构特征
根据元素的排列和样式算出来的特征，只用来加分，单独不判定。
重复子项
- 优先级
- 1 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30