C3.18.3Reorder autoscroll and collapse设计研究

长列表排序需要自动滚动与折叠

别名: 排序自动滚动 · 拖动折叠 · edge autoscroll

概念解释

当目标序号远在当前视口之外,长按拖动排序必须在手指靠近边缘时自动滚列表,并在项或分组过高时折叠被拖对象和沿途分组,使插入缝始终能被看见。这不是把任意拖拽的贴边滚动照搬过来:这里的被拖物本身占据列表高度,不折叠就会挡住落点,不滚动就到不了屏幕外的序号。

机制

手指进入贴边热区后,列表沿远离手指的方向以与侵入深度成正比的速度滚动,同时保持浮起项钉在触点下。热区太窄则难以触发,太宽则刚拾起就狂奔。高项、展开的分组和粘性表头会把有效视口吃掉;把被拖项收成手柄大小、把途经分组临时收起,是为了给让位空隙留出像素,而不是为了视觉花样。滚动与折叠都是在“目的地不在一屏内”这一几何事实下的补偿。

怎么研究

任务跨度要用视口高度的若干倍,而不是三五行。自变量:边缘热区宽度、滚动速度曲线、被拖项是否折叠、分组是否途中收起。因变量:到达远端下标的时间、超调后回拉次数、误插入邻近组的次数、以及手指在热区内的停留稳定性。只测一屏内排序会把自动滚动需求测没。

边界

短列表、分页器或已经提供“移到顶部/底部”的界面上,自动滚动收益下降。双向嵌套滚动里,贴边滚动可能把外层页面一起带走,需要在排序态锁住外层。折叠若没有恢复动画,用户会以为项被删除。自动滚动速度过快时,让位动画跟不上,落点预报失效。它也不替代键盘或按钮式的跨页移动。

怎么落地

  • 在列表上下各设一条随侵入加深而加速的滚动带;排序进行时禁止外层页面跟滚。
  • 被拖项过高则收成紧凑手柄,途经的大分组允许临时折叠,插入缝要始终露出。
  • 用跨越多屏的真实数据做任务:把首项移到末项附近,记录是否必须中途松手、是否冲过目标;回放热区触发是否过早。

延伸

  • 同组C3.18.1 拾起需要明确的状态变化反馈 · C3.18.2 其余项的让位动画表达落点 · C3.18.4 排序必须提供非拖拽的替代方式
  • 相邻C3.04 拖拽 · C3.23 嵌套滚动的触点抢夺
  • 站内检索autoscroll · reorder collapse · edge scrolling

同组卡片

快捷操作

分享

分享当前页面

ios_share

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