ux-tables

表格与列表技能

此技能的行为方式（请先阅读）

这是一项生成式技能。默认的失败模式包括：装饰胜过数据（粗重边框、所有行都用斑马纹、文本居中、格式混杂）、缺少操作功能（没有排序、无法自定义——真实数据量下这很致命），以及密度极端（行高仅 32px，拥挤不堪；或间距浪费空间）。表格唯一的任务，就是让用户能够浏览、比较并操作数据——每项视觉设计选择要么为此服务，要么与之背道而驰。本技能把关以下方面：

1. 确定数据形态和任务——二维比较（表格）还是一维浏览（列表）、数据量，以及用户如何操作各行。
2. 应用始终适用的核心原则——对齐规则、层级、格式、交互状态。
3. 呈现依赖具体情境的决策（密度、分页类型、自定义功能、列表变体）及其权衡。

随后将移交给 ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit 和 ux-microcopy-audit 进行验证。

---

步骤 0 — 设计前先明确情境

如果信息未知，请先询问；如果没有答案仍要继续，请说明所采用的假设：

• 表格还是列表？ 跨列比较多个属性 → 表格。每行一个项目，按顺序浏览（电子邮件、结果、设置）→ 列表。简单表格的内容通常用列表呈现效果更好，而且列表对屏幕阅读器用户更友好。
• 数据量及增长情况——几十行数据无需复杂功能；数千行则需要排序、筛选、分页、每页项目数设置和搜索。
• 用户如何操作各行？ 只读、单行操作（内嵌 ⋮ 菜单）、批量操作（多选复选框）还是编辑——每种情况都需要特定的 UI。
• 对密度的容忍度——数据密集型运营工具（紧凑的 40px 行高）与面向消费者的舒适体验（常规 48px / 宽松 56px）。

---

始终适用的核心原则（几乎所有情况都正确）

对齐与格式（人人都会忽略的隐性规则）

• 文本左对齐（LTR），与阅读方向一致。
• 数字右对齐，并使用等宽数字（每个数字宽度相同）——这样才能让各列数字一眼可比。
• 每列格式保持一致——绝不要让“22.04.2018”紧挨着“4.6.2018”；日期、货币和单位格式都应统一。
• 使用清晰易读的无衬线字体；列间距应足够宽，便于舒适地浏览、比较和编辑。

明确层级，避免视觉噪声

• 表头应明显突出（字重、略深的背景），但不要过于醒目；表头单元格不得留空——包括左上角单元格。
• **边框是最后手段：**少量线条胜过处处网格线。仅在行间距很小或表格很长时使用水平分隔线；宽而密集的数据集可使用斑马纹。
• **明确处理溢出内容：**使用省略号截断并通过工具提示显示完整文本、调整列宽，或隐藏／重新排列列。

交互（让它成为工具，而不是图片）

• 为每个有意义的列提供排序功能——按字母、数值、日期排序，支持升序／降序。数据量大时不可或缺。
• 为行提供悬停状态和选中状态——没有这些状态，用户很容易在外观一致的行中迷失位置。
• 行操作默认隐藏，直到悬停时显示（或收纳在内嵌 ⋮ 菜单中——参见 ux-menus）；批量操作复选框始终可见，选中后显示批量操作。
• 数据量需要时，在表格上方提供工具栏，用于搜索、筛选、导出和打印。
• 链接应看起来像链接——样式应易于识别，与正文区分开，并提供悬停反馈。

列表：结构与加载

• 根据内容选择类型： 单行（名称、设置）→ 多行（电子邮件：发件人 + 主题 + 预览）→ 丰富列表（媒体 + 操作）→ 图片列表（图库）→ 嵌套列表（层级结构，缩进清晰）→ 仅在顺序重要时使用有序列表。
• 纵向优于横向——减少视线移动，滚动更自然；横向列表仅适用于简短且无需滚动的内容。
• 基线对齐： 文本和图标沿着不可见的垂直参考线对齐；缩略图靠左；控件元素（复选框、菜单）靠右；文本与图片垂直居中对齐。
• 当条目跨越 3 行或以上时使用分隔线（电子邮件样式）；带缩略图的列表使用缩进分隔线；其他情况使用留白。
• 加载：使用骨架屏从上到下依次加载——不要使用全屏加载指示器。

---

取决于具体情境的决策（呈现出来，不要自动套用）

决策	适用情形	避免 / 调整的情形	默认建议
行密度	需要一次查看所有内容时使用紧凑布局（40px），如运维、交易	休闲阅读时避免紧凑布局（容易造成疲劳）	常规布局为 48px；面向消费者、注重舒适度时使用宽松布局 56px
分页、无限滚动还是“加载更多”	分页：便于重新查找、查看报告、感知位置。无限滚动：休闲信息流。手动“加载更多”：兼顾浏览与控制	用户需要重新查找或引用行内容时避免无限滚动	数据处理场景使用分页 + 每页条目数控制；“加载更多”是折中方案
斑马纹	宽表格，视线容易在长行间漂移时	窄表格（会造成视觉干扰）	首选纯色行 + 悬停状态；宽表格再使用斑马纹
自定义列	面向高级用户、列数较多时（调整大小、隐藏、重新排序）	简单的固定表格（增加不必要的复杂度）	列数超过 6–8 列或面向不同类型的用户时提供
工具栏（搜索/筛选/导出）	数据量大；需要反复查找时	仅有 20 行的表格（显得杂乱）	根据数据量增长逐步添加功能
列表与网格视图切换	浏览方式多样，内容兼有视觉元素与规格信息时	有一种视图明显更合适时	默认采用最合适的视图；面向不同类型的用户时提供切换选项（结果页参见 ux-search）
可搜索 / 可筛选的列表	较长的列表（联系人、目录）	较短的列表	当无法一眼扫完列表时，在顶部添加搜索栏
简单与复杂的表格结构	仅当数据确实需要时使用合并单元格 / 多级表头	屏幕阅读器和认知处理都难以应对复杂结构	将复杂表格拆分为简单表格；仅使用一层表头

验证结果（编排）

交接时使用每个审查视角对应的可安装技能 name。只有在该技能已安装时才调用；如果未安装，本技能本身的核心内容已包含这些规则，因此无需等待，直接继续。

生成或修订后，应将结果交给审查视角，而不是直接宣布完成。这些都是候选审查视角——具体采用方式由 docs/orchestration-policy.md 决定，也可以将整个内容交由 ux-design-review 审查。此处，heuristics 和 microcopy 属于 A 级（自动运行）；accessibility、aesthetics 和 mobile-responsiveness 属于 B 级（可选择）——在现有设计系统下，aesthetics 会被停用，accessibility 的范围会缩小为用法；mobile-responsiveness 仅适用于移动端。如果用户调用此技能是为了处理某一项具体内容，请遵循该范围。

• ux-heuristics-audit（A级）——状态可见性（排序方向、选择状态）、用户控制（自定义、每页条目数）、格式一致性。
• ux-accessibility-audit（B 级——可选择；在设计系统下缩小范围）——语义结构（真正的 <table>、<th> 与 scope、标题；列表使用列表标记）、表头完整性、宽度比例、链接对比度——辅助技术依赖此技能指定的标记。
• ux-aesthetics-audit（B 级——可选择；在设计系统下停用）——边框与斑马纹的克制使用、密度节奏、对齐规范。
• ux-microcopy-audit（A级）——表头标签是否清晰简洁、空状态和工具栏措辞。
• ux-mobile-responsiveness-audit（B 级——可选择；仅适用于移动端）——在移动端场景中：响应式列表适配、列折叠策略。

如果审查发现冲突（例如品牌样式与可浏览性冲突），应优先回归主要任务：用户是来比较和查找内容的——拖慢浏览速度的装饰就是缺陷。

---

常见的正确与错误模式

❌ 错误做法	✅ 正确做法
所有内容都居中对齐	文本左对齐，数字使用等宽数字并右对齐
同一列中混用“22.04.2018”和“4.6.2018”	每列采用统一格式
每个单元格都使用完整网格边框	使用最少的线条；仅在确有必要时使用分隔线或斑马纹
大型表格不支持排序	列可排序；数据量大时提供工具栏
行样式统一，且没有悬停或选中状态	提供悬停和选中状态，方便用户记住当前位置
每行都堆满操作按钮	悬停时显示操作项或使用行内 ⋮；批量操作时显示复选框
单元格文本被静默截断	使用省略号和工具提示；支持调整列宽或隐藏列
财务报告使用无限滚动	使用分页和每页条目数设置；方便再次查找更重要
合并单元格并使用双层表头	结构保持简单；拆分表格
列表加载时显示全屏加载动画	依次显示骨架屏
使用表格布局，却没有表头的数据表	使用语义化标记——真正的表头和标题（→ 无障碍）
未经检查就发布	交由 heuristics、accessibility、aesthetics 和 microcopy 审查

---

来源课程（Uxcel）

• 何时以及如何在 UI 中使用表格
• UI 表格设计最佳实践
• 表格与列表的无障碍设计
• UI 列表及其适用场景
• 列表设计最佳实践