简单列表
List View
布局模式也叫:列表、条目列表、纵向列表、List
一句话:把同类条目从上到下排成一列,每行只有图标、标题和一两项辅助信息,适合条目简单、需要快速扫读和点选的场景。
详细解释
简单列表是最轻量的多条目展示方式:每条占一行,左边可以有图标或头像,中间是标题和一行灰色说明,右边是时间、箭头或一个小按钮,比如通知列表、文件列表、联系人、设置入口。
它和数据表的区别在于字段少、不对齐成列:列表每行只有两三项信息,用户关心的是「这一条是什么」,而不是把多条记录的某个字段放在一起比。所以它比表格轻,也更适合手机。
它和信息流的区别在于每条内容短、结构统一、高度一致:列表里的一行只是入口,点击后才进入详情;信息流里的每一条是完整内容,可以直接在流里阅读、点赞、评论。
示例
灰度线框示意,只表达结构,不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具,把里面的业务内容换成你自己的。
用简单列表(List)展示通知:每条一行、高 64px,左侧 40px 圆形图标,中间是加粗标题和一行灰色摘要(超出省略),右侧是时间;条目之间用 1px 浅灰分割线,未读条目在标题前显示小圆点,点击整行进入详情。不要做成表格或卡片。
结构与适用场景
结构描述
条目从上到下排成一列,每行由左侧图标、中间标题与说明、右侧辅助信息或操作组成,行与行之间用分割线隔开。
适用场景
- 条目结构相同、每条只有两三个字段时
- 用户只需要快速扫读、认出目标后点进去查看时
- 在手机或窄栏里展示多条同类内容时
- 条目以文字为主、不依赖大图时
不适用场景
- 每条字段较多且需要逐列对照比较时(应该用数据表)
- 每条都是完整内容、需要在列表里直接阅读和互动时(应该用信息流)
- 内容以图片为主、靠看图挑选时(应该用卡片网格)
常见坏用法
- 每行塞进七八个字段,排得像一张没有表头的表格
- 行高和内边距太小,手机上很难点中
- 只有一行文字标题,却给每条套上带阴影的大卡片
识别特征
- 一列高度一致的横条,用细线分隔
- 每行左边是图标或头像,右边是时间或箭头
- 没有表头,也没有多列对齐的字段
DOM 线索
插件本地识别时匹配的 CSS 选择器(标签、ARIA role、常见组件库 class)。
.ant-list.arco-list.t-list.n-list.MuiList-root