E2.10.3search clear affordance设计

清空入口需常驻于有内容时

别名: 搜索清空 · clear search · 叉号清除查询

概念解释

搜索槽里一旦有查询词,人接下来最常见的动作之一是「不要这句,重来」。有内容时的清空入口(search clear affordance)是槽内一颗只在有字时出现的清除控件,一键回到空槽并通常同时取消当前过滤。空槽上不应看到它,免得误触把尚未发出的词清掉;有字时不应再藏进菜单。它管的是如何扔掉当前查询,不是发出查询的键,也不是查询的论域。

机制

搜索词是临时约束。约束一旦生效(列表被滤、结果页打开),退出约束的成本必须低于重新导航。全选再删除、长时间按退格,在触屏上很慢,也容易少删一个字符留下残词,过滤继续错。清空把「恢复未搜索状态」收成一次命中。它只在有内容时出现,是因为空槽上的叉号没有对象,还会被当成提交按钮的邻居而误点。有内容却不给入口,人会以为当前过滤是页面的永久状态,尤其在查询词被结果页藏进标题、槽已经空了的错误实现里。

边界

即时过滤且词很短时,退格本身够快,清空是锦上添花。查询一旦发出就跳到没有槽的结果页,清空应出现在结果页顶,能一键回未搜索;只把原页槽清空却留人在空结果页,状态会断。语音搜索的「当前查询」可能不在槽里而在一颗芯片上,清空要清芯片,不是去找空槽。与通用输入框清空不同,搜索清空常常还要复位结果集,不只是删字符。

怎么落地

  • 槽内有字时显示清空,空时隐藏;命中区要够触屏点,不要只做一颗 8 像素的叉。
  • 清空后同时恢复未过滤的结果集,不要只删字符却留着旧结果。
  • 查询已跳到结果页时,在结果页保留「清除搜索」或可编辑的词芯片。
  • 验证:输入词、看过滤生效、点清空。应回到未搜索的数据集且槽空。再在只有触屏的设备上用一根手指完成,不能靠长按退格。词还在标题里、列表仍是旧过滤,清空就没把约束撤掉。

延伸

  • 同组E2.10.1 搜索框需表明检索范围 · E2.10.2 提交方式需同时支持回车与按钮
  • 相邻E2.17 输入框的清空按钮 · E6.06 空状态
  • 站内检索search clear affordance · clear search · reset filter

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E2.10.3