C3.15.3Pull-to-refresh versus sticky header and search设计研究

与顶部固定元素、搜索框的冲突

别名: 吸顶冲突 · search vs refresh · 下拉搜索

概念解释

许多列表在顶上钉着搜索框、分段、大标题。向下拉既可能是刷新,也可能是把藏起来的搜索拉出来,或只是想选中搜索框。同一条越界轨迹被吸顶件和刷新同时认领时,人不知道松手会刷新、会展开搜索、还是焦点进输入框。

机制

吸顶搜索常用“继续下拉展开”的交互:偏移越过另一条负向阈值时,搜索栏从折叠变完整。刷新也占用负向偏移。两条阈值如果挨在一起,或共用同一段阻尼,分类器在松手瞬间才揭晓赢家。点搜索框需要一次短触;若刷新识别器把任何顶部向下都当成越界,短触也会被拉成一次失败的刷新动画。大标题折叠(large title shrinking)还在向下滚时改变顶区高度,刷新热区的几何在动,第一次下拉和第二次下拉的起点不在同一像素。

怎么研究

做三种任务:刷新、展开并使用搜索、点进搜索框输入。顶部结构包括:无吸顶、仅搜索、搜索加大标题。记录交叉误触发。把两条负向阈值拉开作为自变量。眼动看人下拉时盯的是菊花区域还是搜索栏。

边界

搜索常驻且足够大、不靠下拉展开时,冲突缩小到“点搜索 vs 从搜索上路过的刷新”,用 slop 即可分。没有列表、只有搜索页时,下拉刷新常常无意义。横屏顶区变矮,吸顶和刷新更容易挤在同一厘米里。

怎么落地

  • 给展开搜索和刷新两条分得开的负向阈值,或让搜索走明确的手柄/点按,刷新只在空白顶区的越界上武装。
  • 搜索框上的短触不要启动刷新动画。
  • 请人“去搜一个词”和“去拉新”。若搜词任务先看到菊花,或拉新任务展开了搜索键盘,顶区轨迹被两套语义叠写了。

延伸

  • 同组C3.15.1 下拉刷新依附于列表顶部的越界拖动 · C3.15.2 阈值触发点需要在跨过时给出反馈 · C3.15.4 自动刷新场景下该手势变为冗余
  • 相邻C3.07 平移 · C6.06 软键盘与屏幕占用
  • 站内检索sticky header · search bar conflict · large title

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/C3.15.3