E3.17.1in-list search not scroll设计

选项过多时应提供搜索框而非依赖滚动查找

别名: 列表内搜索 · typeahead select · 不要靠滚

概念解释

选项名单长到一屏扫不完时,列表里要有搜索框,让人用已知的名字把集合收成几条命中。用搜索而不是靠滚(search, not scroll)针对的是已经打开的选择器内部:下拉面板、穿梭列、树、多选菜单。滚动可以留下当浏览手段,但不能当唯一检索。没有搜索框,知道全名的用户也要从头线性扫,集合一长任务就失败。这一条说的是「要有入口」,匹配规则和空结果是后面的事。

机制

长名单上的视觉搜索随行数变差,位置记忆被滚动条毁掉。人若已经持有目标名,最优策略是查询而不是扫。搜索框把键盘从「首字母跳转」升级为任意子串或分词匹配:首字母跳转只服务记得开头的人,而且被相同首字母的一长串卡住。把查找寄托在浏览器页内查找上不可靠——原生 select 会吃掉按键,自绘列表又往往不在文档流里。

搜索还应在面板一打开就可用,焦点可以落在搜索框,而不必先滚到顶部才看见它。入口藏在折叠区,等于还是在靠滚。

边界

短列表加搜索框是噪音,三项配送不必搜。树和级联若提供了「搜叶子」,内部仍可能需要滚来理解结构,搜索不是禁滚,是禁「只有滚」。触屏上键盘弹起时搜索框被顶出视野,提交命中会点空,搜索框要在键盘上方钉住。只读的长名单(条款目录)也可以搜,但那是页面检索,不是选择器内过滤,不要做成会改变已选集合的过滤。

怎么落地

  • 超过一屏的选项面板顶部固定搜索框,打开即能键入。
  • 保留滚动作浏览,但把「我知道名字」的路径明确交给搜索。
  • 不要把检索能力寄托在浏览器查找或首字母跳转上。
  • 验证:给一个位于名单中后段的已知全名。离开搜索框若只能靠长时间滚动完成,入口就缺了。

延伸

  • 同组E3.17.2 过滤应支持拼音、缩写等模糊匹配方式 · E3.17.3 过滤结果为空时需给出明确提示而非空白 · E3.17.4 已选项在过滤后仍需保持可见或可追踪
  • 相邻E3.10 选项数量与控件匹配 · E3.05 下拉选择器 · E3.14 穿梭框与双列选择
  • 站内检索in-list search · typeahead · filter options

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E3.17.1