跳到主要内容
前端术语库

简单列表

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