C3.15.1Pull-to-refresh as top overscroll设计研究

下拉刷新依附于列表顶部的越界拖动

别名: 下拉刷新 · pull to refresh · 顶部越界

概念解释

下拉刷新不是一条独立的新手势,它寄生在列表已经顶到头之后还继续向下拉的那一段越界上。只有滚动偏移为 0(或等价的顶部)时,额外的下拉才被解释成“去取新数据”。在列表中部向下拉,那是普通滚动。把刷新做成随处下拉,会把浏览变成不断触发的网络请求。

机制

列表跟手时,偏移 > 0 走滚动;偏移已经是 0 仍向下,才进入刷新武装。这段越界借用回弹的身体感觉,但语义从“到边了”改成“可以加载”。因此它必须出现在内容流的时间起点——最新内容从顶上进来的信息流——而不是任意边缘。分页在底部加载更多,走的是另一端的滚动尽头,不要和下拉刷新抢同一条越界。寄生结构的好处是不占永久控件;代价是用户必须先滚到顶,否则刷新入口根本不存在。

怎么研究

把列表停在中部、停在顶部、停在底部三种,做“拉新数据”。记录只有顶部越界才触发的比例、中部误触发、底部是否被当成刷新。自变量包括是否需要先回顶。对照一个常驻刷新按钮。现场若出现“怎么拉都不出菊花”,先查当前偏移是不是 0,不要先查网络。

边界

网格、地图、横向画廊没有“顶”,寄生关系不成立,刷新应换入口。聊天里最新消息在底部的产品,把刷新挂在顶部会拉到历史而不是新消息,寄生端要换到底部或改名。空态没有可滚列表时,越界手势没有宿主,需要占位的可拉区域或按钮。

怎么落地

  • 只在滚动到顶后的下向越界武装刷新;中部向下只滚内容。
  • 新内容从顶插入的流才用这套寄生;底部加载更多用滚动尽头,不要两个都叫下拉刷新。
  • 把列表停在第三屏再下拉——不应刷新。滚回顶再拉——应武装。若两处都能触发,寄生关系断了。

延伸

  • 同组C3.15.2 阈值触发点需要在跨过时给出反馈 · C3.15.3 与顶部固定元素、搜索框的冲突 · C3.15.4 自动刷新场景下该手势变为冗余
  • 相邻C3.07 平移 · C3.06 快滑与惯性
  • 站内检索pull to refresh · overscroll · list offset

同组卡片

快捷操作

分享

分享当前页面

ios_share

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