单个对象的只读属性核对——订单、成员、设备、合同详情；字段名稳定、值需要贴近可读、关键字段要可复制。
界面与交互 · 内容与数据展示
描述列表Descriptions
以标签—值对呈现单个对象只读属性的详情组件；对齐、缺值占位、长值折行、敏感值掩码与响应式堆叠的状态长在行上。
订单详情：标签值对齐、缺值与复制都长在行上
亲手把这张「订单 #1024」描述表的 4 处缺陷逐个修好，切桌面/窄屏视图，再复制订单号——每一处变化都长在描述表的行上，不只靠底部说明。
第 0 步：这是「订单 #1024」的只读详情，初始有 4 处缺陷（标签错位、长值截断、缺值空白、手机明文）。 逐个点修正，看描述表每一行怎么变；切视图看响应式堆叠；最后复制订单号。
订单详情 · #1024待修正 4
- 订单号
#1024- 收货地址
- 上海市静安区南京西路 1788 号恒隆广场 3 座 45 层
- 联系电话
- 138-9024-4821
- 发票信息
- （空白）
- 备注
- 客户要求周末送达，请避开周一至周五的工作日
修正：
视图：
对照：还有 4 处未修（标签对齐、长值折行、缺值占位、手机掩码）。原因：未修时标签列宽错位、长值被截断、缺值空白、手机号明文，核对时要逐字猜。下一步：把剩余修正逐个打开，描述表每一行的状态会即时变化。
面板教会的知识点
把刚才操作里看到的现象命名为六条规则。
- 标签—值是一对：dl/dt/dd 把字段名和当前值绑定；标签稳定命名，值贴近可读，这是描述列表区别于表格和列表的核心。
- 对齐让配对可见：标签列宽统一后，眼睛沿一条竖线扫就能配对；错位时每行标签宽度不同，要逐行找值。
- 缺值要有占位：未填用「—」，加载中、失败、无权限各用状态文案；留白会让人分不清「没有」还是「没加载」。
- 长值优先折行：地址、备注等长文本默认折行而非截断，省略号只在确认可截断时使用，避免丢信息。
- 敏感值默认掩码：手机号、证件号只露核对所需的末几位；掩码是只读展示态，不是把字段变成不可用。
- 窄屏改单列堆叠：桌面两列对齐，窄屏改成标签在上、值在下的单列，不依赖横向滚动。
什么时候用描述列表
从「看一个对象的属性」判断，而不是看字段多不多。
跨记录比较（→ 表格）、单项富内容逐条扫（→ 列表）、需要编辑（→ 表单）、按时间线阅读（→ 时间线）。
怎么用：从字段到窄屏的最短路径
一次到位的检查顺序。
- 定字段：列出标签和值的来源，标签用业务稳定名词，值来自只读数据，不内嵌编辑。
- 给占位与掩码：未填写「—」；加载/失败/无权限各自文案；敏感值默认掩码，查看是明确动作。
- 桌面对齐：标签列固定宽度对齐，长值默认折行；仅关键字段（订单号、ID）给复制入口。
- 窄屏堆叠：改单列，标签在上、值在下；不强迫横向滚动，复制与掩码规则保持一致。
正反例：同一个「订单详情」需求
只改一处关键判断——是否让状态长在物件上。
标签列对齐、缺值显示「—」、手机号掩码、订单号可复制；窄屏自动堆叠。用户一眼配对、分清缺值、能存单号。
标签错位、缺值留白、手机号全显、订单号不可复制；窄屏硬挤两列。用户逐行找值、猜缺值、手抄单号还看不全。
快速自测
设备详情页里某个字段显示空白，用户反馈分不清是没填还是没加载，最直接的改进是？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。