跳到正文

筛选

Filter

初级通用

筛选(Filter)是按用户选定的条件,从一组内容中显示符合条件的部分。它解决的是内容太多、难以逐项查找的问题,比如在订单列表中只看「待发货」且「本月创建」的订单。

你可能会说:「订单太多了,我想让用户只看本月待发货的订单,换个条件也能继续查看其他订单。」

动手看看

订单管理
共 4 笔
共 2 笔
共 1 笔
当前条件
全部订单
待发货
本月创建
订单 #1048本月 12 日创建
待发货
订单 #1047上月 27 日创建
待发货
订单 #1046本月 8 日创建
已发货
订单 #1045上月 19 日创建
已发货
筛选范围

用下方的「筛选范围」依次选待发货、本月待发货,看看列表和数量怎么变;也可以悬停订单,确认自己正在看哪一笔。

现在没有附加条件,四笔订单都在。先看清原始列表,才容易发现筛选后少了哪些记录。

要点

  1. 1

    条件决定哪些内容留下

    你可以把状态、日期、价格区间设为筛选条件。用户选了「待发货」后,列表只显示符合条件的订单;其他订单只是暂时不显示,并没有被删除。

  2. 2

    多个条件通常共同生效

    如果用户同时选「待发货」和「本月创建」,我们通常显示同时满足两项的订单。让已选条件保持可见,用户才容易理解结果为什么变少,也知道该取消哪一项。

  3. 3

    结果变化要有清楚反馈

    条件改变后,列表和结果数量要跟着更新。若没有匹配项,你可以显示「没有符合条件的订单」,并提供清除条件的入口,这样用户不会误以为数据丢了。

容易混淆的地方

筛选改变的是当前显示哪些内容;排序不改变内容范围,只改变它们的先后顺序。搜索通常让用户输入关键词查找,筛选则常用状态、类别、时间等明确条件。它们可以一起用:先找出含关键词的订单,再只看其中待发货的。

什么时候用

适合用

  • 做订单后台时,让运营按状态和创建时间缩小列表范围,集中处理符合条件的订单。
  • 做商品列表时,让买家按价格区间、品牌和是否有货查看当前可选的商品。
  • 做 AI 工具的对话记录页时,让用户只看某个项目或某段时间内的记录。

不适合用

  • 页面只有几条固定内容,用户扫一眼就能看完时,直接展示列表比增加筛选控件更省事。
  • 用户想按最新、最便宜查看同一批商品时,用排序;这个需求没有排除任何商品。
  • 用户要输入一段不确定的名称查找文件时,先提供搜索框,比预设大量筛选条件更合适。

练一练

你在做订单后台。运营说:「我想先看本月待发货的订单,再按创建时间从早到晚处理。」哪种实现最符合这个需求?

让 AI 帮你做

请给订单列表增加筛选功能:用户可按订单状态和创建月份选择条件,两个条件同时生效;展示当前生效的条件和结果数量,支持单独取消条件及清除全部条件。无匹配结果时说明原因,不要删除或修改订单数据。

接下来学什么