表格多列排序的核心不是把几个箭头放进表头，而是让用户知道“先按哪一列、同值时再按哪一列，以及怎样回到默认顺序”。本文用一份 137 条记录的供应商台账演示规则，并把交互稿放进Pixso 的 UI 设计协作流程中评审。
先固定任务和数据口径
案例是采购团队查看供应商台账：每行有供应商名称、交付日期、风险等级、负责人和记录编号。用户先想找“最早交付”的记录，再在同一天内优先看高风险供应商。这个目标决定了排序不是装饰，而是帮助用户从 137 条记录中找到下一条要处理的对象。
| 字段 | 数据类型 | 默认策略 | 异常约定 |
|---|---|---|---|
| 交付日期 | 日期 | 升序，早日期在前 | 未填写排在末尾，并显示“未设定” |
| 风险等级 | 枚举 | 高→中→低 | 未知等级不参与高低比较，置于末尾 |
| 供应商名称 | 文本 | 按中文拼音规则或产品确定的字典序 | 需在字段说明中写清大小写和全半角规则 |
| 记录编号 | 字符串 | 作为最终稳定键 | 只用于打破完全相同的前置字段 |
日期、数字和文本不能都按字符串比较。比如“2026-10-02”应排在“2026-09-30”之后；金额要先统一币种和小数位再比较。若后端采用游标分页或只返回当前页，设计稿只能描述“请求新的排序结果”，不要承诺客户端可以把全量记录瞬间重排。
单列和多列要有可解释的操作模型
单列排序可以采用点击表头循环：第一次点击为升序，第二次为降序，第三次清除该列排序。多列排序则需要一个明确的加入方式，例如按住 Shift 点击第二列，或在“排序条件”面板中点击“添加条件”。两种操作不要同时作为唯一入口；桌面用户熟悉快捷键，触屏用户仍需要可见的条件面板。
排序条件面板按优先级列出“1 交付日期 升序、2 风险等级 降序、3 供应商名称 升序”。每行提供上移、下移、反向和删除。表头只展示当前列的方向与优先级编号，鼠标悬停或键盘聚焦时给出完整说明。点击“清除全部”后恢复产品定义的默认排序，并保留筛选条件；点击单列的第三次循环只移除这一列，不应悄悄清空其他排序键。
用稳定键处理并列值
假设供应商 A 和 B 的交付日期都为 10 月 12 日、风险等级都为高、名称排序也相同（例如名称含相同前缀）。如果没有记录编号这个最终键，用户刷新或翻页时可能看到两行互换，误以为数据发生变化。把记录编号作为不可见的稳定键，并在说明中写“仅用于稳定顺序”，就能把“顺序变化”和“数据更新”区分开。
| 记录 | 交付日期 | 风险 | 名称 | 结果位置 |
|---|---|---|---|---|
| S-018 | 10 月 12 日 | 高 | 安达 | 1 |
| S-031 | 10 月 12 日 | 高 | 安达 | 2 |
| S-006 | 10 月 12 日 | 中 | 安达 | 3 |
| S-014 | 10 月 13 日 | 高 | 北辰 | 4 |
筛选、分页和实时更新怎么衔接
筛选只改变待排序集合，不应默默改掉已选排序键。比如用户保留“交付日期升序→风险降序”，再筛选“负责人=陈宁”，结果只剩 9 行，表头仍应展示两个条件；如果某个排序字段被隐藏，排序仍可保留，但排序面板必须让用户找到并移除它。用户从第 4 页切换到第 1 页时，排序规则也应继续存在。
当新数据插入或已有记录更新时，给用户一个可理解的提示：“列表已更新，当前排序仍按交付日期→风险等级”。不要因为后台刷新就把滚动位置跳到顶部；若当前行已被更新推离本页，提供“查看变更”或重新定位入口。权限过滤发生在排序之前，用户不能通过排序看到本来无权查看的记录。
键盘、读屏和反馈
表头排序按钮需要可聚焦，方向和优先级不能只靠颜色或箭头表达。交互稿应标出焦点环、当前排序列、排序清除后的反馈，以及读屏可读的“第 1 排序键：交付日期，升序”。WAI-ARIA 的键盘界面指南强调焦点应可见、移动可预测，并区分焦点与选中状态；这里的“已排序”也应有独立的文字状态。
数据量较大时，排序请求可能有延迟。排序进行中保留表头和当前条件，避免用户连续点击产生多个互相覆盖的请求；完成后在表格区域宣布“已按交付日期升序排序，共 137 条”。失败时保留旧结果，说明“排序暂时失败”，提供重试，不把表格清空成空白页。
把规则画成可走通的原型
在 Pixso 画布中把三列排序的默认态、选择第二排序键后的表头、清除后的原始顺序各画一帧，再用同一组记录连接起来。
验收时不要只看箭头有没有旋转，还要逐行核对结果顺序：第一轮确认交付日期升序，第二轮在同日期内确认风险等级降序，第三轮用记录编号稳定并列值；然后筛选到 9 行、切换分页、刷新和模拟失败各走一次。最后把字段类型、空值位置、排序条件保留方式、键盘反馈和请求失败文案写入交付说明，开发才有足够信息实现一致行为。
