07 · ENTERPRISE UIP113 MIN
企业表格、搜索、筛选与分页
围绕用户任务设计高密度列表，而不是堆满列、按钮与筛选器。
MENTAL MODELDATA-DENSE UI
01Define Task
→02Query State in URL
→03Fetch Page
→04Select Rows
→05Perform Action
先把概念与边界说清楚
定义告诉你它是什么，边界告诉你它不负责什么；企业系统最常见的误解通常发生在两者混用时。
Data Table
用列、行、状态和动作展示同类业务记录，支持固定列、密度和无障碍语义。
Search / Filter
Search 处理模糊意图，Filter 精确缩小字段范围；二者应可组合、可清除、可分享。
Pagination
与后端契约同步管理页大小、游标、加载状态和选择范围。
仓库每天处理 500 个待发订单
表格有 35 列，每行 12 个按钮，员工频繁横向滚动并误点。
- 01
默认只显示拣货必需字段。
- 02
动作按主任务、次级菜单和批量操作分层。
- 03
保存角色级视图并用状态筛选形成工作队列。
页面从数据镜像变成履约工作台，操作时间和误触都下降。
马上动手
- 为订单表定义默认列与可选列。
- 设计可复制 URL 的查询状态。
常见坑
- 所有字段默认展示
- 客户端一次拉全量再分页
- 筛选状态不进 URL 且刷新丢失
05 · KNOWLEDGE CHECK企业表格设计为什么要先问用户任务？查看答案⌄
答案
同一订单数据对销售、仓库、财务关注字段和动作完全不同；任务决定默认视图，而不是数据库字段决定 UI。