C3.15.1Pull-to-refresh as top overscroll设计研究
下拉刷新依附于列表顶部的越界拖动
别名: 下拉刷新 · pull to refresh · 顶部越界
概念解释
下拉刷新不是一条独立的新手势,它寄生在列表已经顶到头之后还继续向下拉的那一段越界上。只有滚动偏移为 0(或等价的顶部)时,额外的下拉才被解释成“去取新数据”。在列表中部向下拉,那是普通滚动。把刷新做成随处下拉,会把浏览变成不断触发的网络请求。
机制
列表跟手时,偏移 > 0 走滚动;偏移已经是 0 仍向下,才进入刷新武装。这段越界借用回弹的身体感觉,但语义从“到边了”改成“可以加载”。因此它必须出现在内容流的时间起点——最新内容从顶上进来的信息流——而不是任意边缘。分页在底部加载更多,走的是另一端的滚动尽头,不要和下拉刷新抢同一条越界。寄生结构的好处是不占永久控件;代价是用户必须先滚到顶,否则刷新入口根本不存在。
怎么研究
把列表停在中部、停在顶部、停在底部三种,做“拉新数据”。记录只有顶部越界才触发的比例、中部误触发、底部是否被当成刷新。自变量包括是否需要先回顶。对照一个常驻刷新按钮。现场若出现“怎么拉都不出菊花”,先查当前偏移是不是 0,不要先查网络。
边界
网格、地图、横向画廊没有“顶”,寄生关系不成立,刷新应换入口。聊天里最新消息在底部的产品,把刷新挂在顶部会拉到历史而不是新消息,寄生端要换到底部或改名。空态没有可滚列表时,越界手势没有宿主,需要占位的可拉区域或按钮。
怎么落地
- 只在滚动到顶后的下向越界武装刷新;中部向下只滚内容。
- 新内容从顶插入的流才用这套寄生;底部加载更多用滚动尽头,不要两个都叫下拉刷新。
- 把列表停在第三屏再下拉——不应刷新。滚回顶再拉——应武装。若两处都能触发,寄生关系断了。