移动端表格怎么设计？卡片化、字段优先级与横向滚动

移动端表格不等于把桌面表格缩小。先问用户在现场要完成什么，再决定哪些字段留在首屏、哪些字段进入详情，以及横向滚动是否值得保留。本文用仓库拣货清单做练习，设计稿放进Pixso UI 设计协作流程中比较卡片和表格两种布局。

先定义拣货任务和字段优先级

拣货员拿着手机处理 48 条待拣记录，首要任务是找到货位、确认 SKU、输入数量并标记异常。原表有 SKU、商品名、货位、应拣数量、已拣数量、批次、负责人和更新时间 8 列。8 列全部平铺会让每一行变成难以扫描的长句，因此先按任务分层：

字段优先级不是视觉大小的排名，而是决定在 360px 宽度下是否影响任务。若商品名相同但批次不同，批次就要升为首屏字段；如果拣货按负责人分组，负责人也不能被藏进详情。

卡片化、横向滚动和混合方案

卡片化适合每行都有独立操作、字段数量随状态变化的清单。把商品名和货位作为标题，数量和异常作为操作区，点击卡片进入详情。横向滚动适合用户必须比较同一列的多行数字，例如同时核对 20 条应拣与已拣数量；此时冻结首列并在边缘显示“可横向查看”，不要只留一个细滚动条。

混合方案可以在手机上显示两列核心信息，点击“更多字段”展开其余列；在平板或横屏下保留完整表格。不要把同一动作在卡片和表格里改成不同名字，否则用户切换设备会重新学习。选择方案时记录三个问题：是否需要列间比较、是否需要跨行勾选、是否有高频单行操作。三个答案分别决定横滚、表格选择和卡片操作。

筛选、选择和批量入口要保留语义

筛选“仅显示缺货”后，卡片列表应在顶部保留条件标签和结果数量；清除筛选不会清空用户已输入的已拣数量。若支持多选，选择框放在卡片同一位置，选中后出现“已选 3 条”栏，并明确批量动作作用于当前筛选结果还是已选记录。不要把横向滚动里的行复选框缩到不可点，也不要用长按代替可发现的选择入口。

列表加载更多时，保留筛选和已选状态；如果后端分页只返回当前批次，界面要说明“当前已加载 20/48 条”，不能暗示全量都已可批量操作。网络失败时保留已输入数量和本地未提交标记，提供重试；提交成功后只更新受影响卡片，不让整页跳回顶部。

异常状态按任务处理

• 货位缺失：卡片仍显示商品名和 SKU，货位位置给出“待补充”，提供查看详情或联系仓库的入口。
• 数量冲突：已拣数量超过应拣数量时，在数量字段旁说明差值，阻止提交并保留输入。
• 批次已变：打开详情后发现批次更新，显示新旧批次并要求重新确认，不静默覆盖。
• 筛选无结果：保留筛选条件，说明“缺货记录为 0 条”，提供清除某一条件，不把它当成数据加载失败。

在两个宽度和一条任务路径上验收

在 Pixso 画布中并排放置 360px 卡片、768px 横向表格和筛选后空结果三帧，用同一批拣货记录核对字段去留。

不要只看缩放后的截图，要逐项操作筛选、选择和查看详情。验收时用同一条记录走完：筛选缺货→打开卡片→修改数量→模拟批次变化→返回列表；再在横向表格中核对 SKU、批次和负责人是否仍能找到。检查焦点顺序、触控目标、横向滚动提示、保留输入、失败重试和返回位置，最后记录每个断点应由界面、接口还是业务规则解决。