跳到主要内容

交互模式 · 列表

筛选与排序

Filter & Sort

也叫:过滤、筛选排序、Filter、Sort

筛选是按条件缩小数据范围,排序是调整数据的先后顺序,两者常一起出现在列表和表格上方。

示例

详细解释

筛选回答「我只想看哪些」:比如只看「进行中」的订单、价格 100~500 元的商品;排序回答「按什么顺序看」:按时间最新、按价格从低到高。两者可以同时生效,改变的是显示哪些数据、怎么排,不改变数据本身。

常见界面形式:列表上方的筛选栏(下拉框、标签、日期范围)、点击表头排序(显示上下箭头)、电商左侧的多级筛选面板、手机端从底部弹出的筛选抽屉。

要跟 AI 说清楚:数据少可以前端直接筛选,数据多要把条件传给接口由后端处理;筛选条件最好同步到网址参数里,刷新或分享链接时不丢;要有「重置」按钮,结果为空时显示空状态。

开发者信息
术语 ID
interaction-filter-sort
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/29