data-table-design

数据表设计

概述

设计方便用户快速浏览、比较和执行操作的数据表。表格是信息密度最高的 UI 组件之一——微小的设计决策（列顺序、对齐方式、数字格式）会叠加成显著的易用性差异。本技能采用成熟的约定，确保团队构建的每个表格都一致且易读。

适用场景

• 设计新的数据表或网格组件
• 检查现有表格是否存在易用性问题
• 使用表格数据构建仪表板、报告或管理界面
• 选择列顺序、对齐方式或格式
• 让表格适配较小的屏幕
• 设置表格中数字、日期、货币或状态值的格式

说明

第 1 步：了解数据和上下文

向用户收集以下信息（已提供的内容可跳过）：

1. 显示哪些数据？ — 有哪些列？数据类型是什么？
2. 受众是谁？ — 是快速浏览的高级用户，还是探索内容的普通用户？
3. 主要任务是什么？ — 比较数值、查找特定行、执行操作，还是导出？
4. 有多少行？ — 几十行（全部显示）、几百行（分页），还是几千行（虚拟滚动）？
5. 表格位于何处？ — 全页表格、仪表板组件、模态框，还是嵌入内容中？

第 2 步：排列列顺序

列顺序决定视线首先落在哪里。请遵循以下优先级：

1. 标识列放在最前。 能让用户知道“我正在看哪一行”的列放在最左侧。通常是名称、标题或 ID。
2. 接下来放置最常比较的维度。 用户最常跨行比较的列放在标识列右侧。通常是状态、日期或关键指标。
3. 数字和定量列放在右侧。 数字采用右对齐，并且放在表格右侧集中排列时最易阅读。这与电子表格和财务报告的惯例一致——视线先向左扫视以获取上下文，再向右查看数值。
4. 操作列放在最右侧。 编辑、删除、查看或其他行级操作放在最后一列。用户通常预期操作位于行尾。
5. 元数据和次要信息放在中间。 提供上下文但不是主要比较对象的列（类别、负责人、标签）放在中间。

订单表的列顺序示例：

| Order # | Customer | Status | Date | Items | Total | Actions |
|---------|----------|--------|------|-------|-------|---------|
  ↑ ID      ↑ Context  ↑ Key    ↑ Mid   ↑ Num   ↑ Num   ↑ Acts

第 3 步：应用对齐规则

对齐方式是对表格设计影响最大的单项决策。对齐错误会让数字难以阅读、文本参差不齐。

数据类型	对齐方式	原因
文本（名称、描述）	左对齐	符合自然阅读方向；右侧参差是正常的
数字（计数、金额、ID）	右对齐	对齐小数点和数位，便于比较
货币	右对齐	必须对齐小数点；统一小数位数
百分比	右对齐	属于数字；对齐后便于比较
日期	左对齐或右对齐	以文本形式显示时（“Mar 15, 2025”）左对齐；以数字形式显示时（“2025-03-15”）右对齐
状态 / 标签	左对齐或居中	使用徽标 / 胶囊标签时居中；使用纯文本时左对齐
布尔值（是 / 否、复选框）	居中	对称的内容居中显示效果最佳
操作（按钮、图标）	居中或右对齐	图标按钮居中；文本操作右对齐

关键规则：数字始终右对齐。 这一点不可妥协。数字右对齐后，用户可以通过扫视首位数字来比较大小。数字左对齐时，用户必须逐位数位数，才能比较 1,234 和 12,345。

列标题的对齐方式应与数据一致。 如果数据右对齐，标题也应右对齐。这样可以保持列的视觉轴线一致。

第 4 步：统一数据格式

完整的格式参考请参阅 references/table-formatting.md。主要规则：

数字：

• 使用符合区域习惯的千位分隔符：1,234,567（而不是 1234567）
• 同一列的小数位数保持一致：如果一个值是 4.50，所有值都显示两位小数
• 使用右对齐；如果字体支持，请使用等宽字体或等宽数字
• 在仪表板中缩写较大的数字：1.2M、$34K——但在悬停提示或详情视图中显示完整精度

货币：

• 符号置于数字前，中间不留空格：$1,234.56
• 对于使用小数位的货币，始终显示两位小数
• 包含货币符号的完整字符串右对齐

百分比：

• 数字后紧跟 %，中间不留空格：42.5%
• 同一列的小数位数保持一致
• 可考虑在数字旁添加可视化进度条或迷你趋势指示器，便于快速浏览

日期：

• 每张表选择一种格式并保持一致
• 对于活跃工作流中的近期条目，使用相对日期（3 hours ago）
• 对于记录和报告，使用绝对日期（Mar 15, 2025）
• 只有在对用户的任务有意义时才显示时间
• 使用带 ISO 日期时间的 <time> 元素，以提升无障碍体验

状态：

• 使用颜色编码的徽章或标签：绿色表示成功/活跃，琥珀色表示警告/待处理，红色表示错误/严重，灰色表示非活跃/草稿
• 始终在颜色旁显示文字标签，切勿仅依赖颜色（无障碍要求）
• 在整个应用中统一状态用词

空值 / 缺失值：

• 缺失值使用长破折号 — 或短破折号 –，不要使用「N/A」、空字符串或「null」
• 区分「无值」和「零」——分别使用 — 和 0

第 5 步：设计行行为

密度。 根据数据类型和受众选择：

密度	行高	使用场景
紧凑	32–36px	数据密集型表格、高级用户、财务数据
默认	40–48px	大多数表格、受众多样的场景
宽松	52–64px	包含头像、多行内容或触控目标的表格

悬停状态。 悬停时显示细微的背景高亮（浅色背景下使用 background: rgba(0,0,0,0.04)，深色背景下使用 rgba(255,255,255,0.06)）。这有助于在宽表格中追踪行内容。

条纹行。 仅在难以横向追踪内容的宽表格（6 列以上）中使用交替行背景。对于窄表格，条纹行会增加视觉干扰。

选择。 如果行可供选择，请在最前面添加复选框列（置于标识符之前）。在表头复选框中使用不确定状态表示「部分选中」。

排序。 在表头中使用箭头图标标明当前排序列和方向。默认排序应符合用户最常见的任务。可为高级用户提供多列排序，但不要将其设为必需。

第 6 步：处理响应式行为

小屏幕上的表格需要仔细规划：

1. 优先列。 定义哪些列是必需的（始终可见），哪些列可以在断点处隐藏。标识符和主要指标应始终可见。
2. 水平滚动。 对于数据密集型表格，配合首列（标识符列）固定的水平滚动通常是最佳选择，比强行压缩或截断内容更好。
3. 卡片布局。 屏幕宽度低于某个阈值（通常是 < 600px）时，可考虑将每行转换为卡片，并将标签和值纵向排列。
4. 列切换。 允许用户显示或隐藏列，并记住他们的偏好。

步骤 7：审核清单

定稿前，请确认：

• 标识符列位于最左侧
• 所有数值列均右对齐
• 列标题的对齐方式与其数据一致
• 数字使用统一的小数位数和千位分隔符
• 货币数值显示货币符号，且小数位数一致
• 状态同时使用颜色和文本标签
• 空值使用长破折号，而非留空或写作「N/A」
• 操作列位于最右侧
• 行密度符合使用场景
• 悬停状态有助于追踪行
• 以可视方式指示排序，并默认采用最实用的顺序
• 已为小屏幕定义响应式策略
• 颜色对比度符合 WCAG AA 标准（文本为 4.5:1，UI 元素为 3:1）

输出格式

提供以下一项或多项：

• 表格设计规范（列、类型、对齐方式、格式、默认排序）
• 表格实现标记/代码（HTML、React 等）
• 对现有表格的审核，指出具体问题并提供修复方案

参考资料

• 完整的格式参考及示例请参阅 table-formatting.md