H8.03.2auto-scroll during drag设计研究

长列表需要自动滚动

别名: 拖拽边缘滚动 · drag auto scroll · edge scrolling

概念解释

排序的目标槽经常不在当前视口里:要把第 2 条移到第 80 条后面,手不能先松开再去滚列表——一松手,拖拽就结束了。自动滚动指:拖着对象靠近视口边缘时,列表自己向那个方向滚,让远处的槽进入落下范围。它不解释拾起看起来像不像抓着,也不解释没有指针的人该怎么排序。

机制

拖拽占用了本来用来滚动的那只指针或那根手指。人无法同时「拿着项」和「拖动滚动条」。若边缘不滚,可到达的槽被锁在一屏之内,长列表的排序在结构上不可完成,只能先放下、滚动、再抓起,而放下已经把项留在了错误位置。边缘区域是一个空间阈值:太窄,人很难稳定停在触发带里;太宽,正常在屏内微调位置时列表却自己跑起来,目标槽从指针下溜走。速度还要可调:匀速过慢,八十条要滚很久;过快,项飞过目标来不及停。嵌套滚动(页本身可滚、列表也可滚)时,自动滚必须认对容器,否则拖排序却让整页在动,槽位关系全乱。

怎么研究

列表长度超过两屏,任务是把首屏某项移到末屏某邻居旁。比较无自动滚、边缘固定速度、速度随靠近边缘的程度增加。

自变量:触发带宽度、滚动速度曲线、被拖对象是否保持在指针下、嵌套滚动时哪一层在滚。 因变量:任务能否完成、中途被迫放下的次数、越过目标槽后的回退次数、误触发自动滚的次数。

实验室若允许用键盘辅助滚动,自动滚的必要性会被掩盖。触屏还要记录手指接近屏幕物理边缘时是否被系统手势抢走。不要用「平均完成时间」单独下结论——有人会改用笨办法(放下再滚),时间看起来能完成,机制已经失败。

边界

一屏能显示全部项时,自动滚是干扰,应关闭。横向看板的自动滚发生在水平边缘,垂直列表的规则不能照搬。无限加载列表在拖到尚未请求的区域时,自动滚要把「正在加载」标出来,不能假装后面已经有槽。只在编辑排序模式才启用自动滚;浏览态把对象拖向边缘不应滚走整页,那会和返回手势或系统抽屉冲突。

怎么落地

  • 拖拽进入距边缘一个明确带宽时开始滚,越靠近边缘越快,离开带宽即停。
  • 被拖项始终跟手,不要让列表滚走而项留在屏幕中间。
  • 滚到头时停止并给出「已到列表尽头」的边缘反馈,避免在空洞里空转。
  • 验证:把首屏一项拖向底部边缘,列表应自行露出后面的项且该项仍在指针下;在屏中部微调时列表不应自己动。再测一次拖到真正末尾,确认会停。

延伸

  • 同组H8.03.1 拾起与落下需要明确反馈 · H8.03.3 必须提供非拖拽的替代方式
  • 相邻C3.18 长按拖动排序 · C1.08 拖放 · J3.07 拖拽的替代
  • 站内检索auto-scroll · edge scrolling · drag reorder

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/H8.03.2