跳到主要内容
Termlib

布局模式 · 内容展示

描述列表

Description List

也叫：详情描述、键值对列表、属性列表、Descriptions

把一条记录的多个属性按「字段名：值」成对排列，常用两到三列网格展示，适合只读查看详情。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

这里是只读的详情展示，请用描述列表（Description List）布局：每个字段显示为「标签：值」，两到三列网格排列，标签用浅灰色，值用正文色，字段按业务含义分组并加分组标题。不要用输入框展示只读数据，右上角放一个「编辑」按钮。

发给

01判断

你的内容是这样吗？

对照两列，确认描述列表是不是你要找的。

符合这些情况，用描述列表

  • 展示单条记录的详情，字段较多且以只读查看为主时
  • 用户需要快速扫读一条记录的各项属性时
  • 字段之间可以按业务含义分组时

是这些情况，换成别的

  • 用户需要编辑、填写这些字段时

    改用单页表单

  • 需要同时展示和比较多条同类记录时

    改用数据表

  • 字段只有两三个、放进一行文字就能说清时

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    把只读详情做成单列表单，每个字段都显示成禁用的输入框

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    几十个字段不分组，全部平铺成一长串

  3. 03

    标签和值字号颜色完全一样，看不出哪个是字段名

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由若干「标签-值」对组成，按两到三列网格排列；字段多时分为几组，每组带小标题。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1成对出现的「浅色标签 + 深色值」
  2. 2两到三列整齐的网格，没有输入框边框
  3. 3分组小标题把字段分成几块

04解释

详细解释

描述列表用来展示一条记录的全部属性，每一项由「标签」和「值」组成，比如「订单号：20260901」「下单时间：2026-09-01」。

它通常按两列或三列排成网格，标签颜色浅、值颜色深，用户可以快速扫读。字段很多时可以分组，每组加一个小标题，比如「基本信息」「收货信息」「支付信息」。

和表单的区别在于它是只读的：值直接显示成文字，而不是输入框。需要修改时，一般放一个「编辑」按钮，点击后再切换成表单。和数据表的区别在于它只展示一条记录：数据表是一行一条、竖着比较多条记录，描述列表是把一条记录的字段摊开来看。

开发者信息
术语 ID
layout-description-list
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-descriptions
  • .el-descriptions
  • .arco-descriptions
  • .t-descriptions
  • .n-descriptions
  • dl
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • descriptions
  • description-list
  • detail-list
  • details-list
  • info-list
  • kv-list
  • key-value
  • properties
  • property-list
  • meta-list
  • info-grid
  • detail-grid
  • info-table
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Descriptions
  • DescriptionList
  • DetailList
  • KeyValueList
  • PropertyList
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 标签 + 值
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v3 · 更新于 2026/10/22