C1.08.6Non-drag alternative设计

拖放必须有非拖放的等效路径

别名: 拖放替代 · keyboard alternative · accessible drag and drop

概念解释

非拖放等效路径(non-drag alternative)让用户无需持续按住、移动并精准放下,也能完成与拖放相同的重排、移动、归类或传输结果。拖放可以高效,但不应成为功能唯一入口——它对运动控制、触屏精度、键盘和辅助技术的要求,比几乎任何其他常见交互原语都高:拖放要求用户在一次连续动作里同时维持按压、控制轨迹、并在合适位置精确释放,中间任何一环出问题整个动作就得重来。

机制

拖放之所以难以替代得体,是因为它把三件本可以分开的事捆绑成了一个不可中断的连续动作:指明来源、确定目的地、提交变更。替代路径的做法是把这条链拆开来做:先用一次独立的点击或选中动作确定来源,暂停下来查看,再通过菜单项、按钮、快捷键、剪切粘贴,或专门的"移动到"对话框指定目的地,最后单独确认提交。拆开之后,每一步都可以随时暂停、检查、撤回,不再要求一次性的持续运动,也不再需要精确的空间定位——键盘选中一个菜单项不需要命中一块几像素宽的放置区。这个拆分带来的副产品同样重要:命令式路径天然可以用文字把"从哪、到哪、变成什么"说清楚,而拖放的目的地和结果往往只能靠视觉推断,屏幕阅读器几乎没法转译一次悬停高亮。

边界

替代路径不需要还原拖放的每个中间动画或过程细节,只需要抵达同一个最终状态、保留同样的约束(比如同一个父级下不能有重名项)。但反过来,"步骤更多"不能成为省略替代路径的理由——如果某项操作只能靠拖放完成,键盘用户和依赖开关设备的用户就完全无法触达这个功能,这不是效率上的次优,而是彻底的不可达。批量移动、多选对象跨层级重排这类场景,命令式路径(比如先多选,再统一执行"移动到")往往比逐个拖放更好用,替代路径在这些场景下不是退而求其次,而是本身更合适的主路径。

怎么落地

  • 为每一项拖放能完成的操作,提供一条可见的"选择—移动到—确认"命令路径,或者等价的键盘快捷操作,不能只在设置里藏一个不显眼的入口。
  • 替代路径要在界面上明确显示当前选中的是什么、有哪些可选目的地、确认后会产生什么结果,防止用户在不看清楚的情况下移动错对象。
  • 批量与多选场景优先设计命令式路径,而不是假设用户会对每个对象重复一次拖放。
  • 验证办法:完全不用鼠标或触屏,只用键盘(或开关设备)走完一次端到端的重排或移动任务,核对最终状态是否与用拖放完成时完全一致。

延伸

  • 同组C1.08.1 拖放的三阶段:拾起、移动、放下 · C1.08.2 拖动起始阈值防止点击被误判为拖动 · C1.08.3 可放置目标必须在拖动中显式表达 · C1.08.4 拖到边缘时的自动滚动 · C1.08.5 拖放过程可取消且能回到原位
  • 相邻J1 运动与操作无障碍 · C1.07 单击与双击
  • 站内检索accessible drag and drop · keyboard alternative · move to

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/C1.08.6