用户体验模式7 分钟阅读·Updated 2026 年 10 月·ExodeUI 团队
拖放式用户体验:指示符、反馈和可访问的替代方案
人们可以发现和使用如何设计拖放:抓取指示符、提升和预览反馈、拖放区域、物理以及 WCAG 2.2 所需的非拖放替代方案。
直接总结和定义
核心要点
通过抓取手柄或光标更改使可拖动的项目变得明显,通过提升和阴影确认抓取,通过突出显示放置区域来预览拖动时的结果,并在放置时清楚地解决项目,并进行撤消。始终提供一种非拖拉的方式来做同样的事情; WCAG 2.2 要求其级别为 AA。
每个阶段的反馈
Nielsen Norman Group 的指导思想是,每个阶段都有清晰的指示符和清晰的反馈,使拖放操作易于发现且易于使用。一旦物品被抓住,人们需要知道它被抓住了,并在扔掉它之前看看会发生什么。
- 指示符:抓取手柄图标、悬停时的抓取光标,或两者兼而有之。
- 抓住:用阴影和轻微的比例举起物品,使其看起来像是被握住的。
- 预览:突出显示有效的放置区域并显示项目将降落的位置。
- Dropped:将项目动画到位并提供撤消功能。
可访问性:始终提供另一种方式
WCAG 2.2 成功标准 2.5.7,拖动运动(AA 级),要求通过拖动完成的任何操作也可以使用单个指针而不进行拖动来完成,除非拖动是必需的。常见的替代方案是上移和下移按钮、“移至”菜单或带有箭头键的键盘支持。 NN/g 还指出,精确的替代方案通常可以帮助每个人,例如粗略地拖动到位并使用箭头键轻推。
物理原理使拖动感觉更直接
拖动的项目应跟随指针无延迟。释放时,将释放速度带入沉降的弹簧使下落感觉真实,而其他物品平滑地移动到一边显示间隙在哪里。保持这些动作较短,并在开启减少动作时减少它们。
触摸细节
在触摸屏上,区分拖动和滚动,通常需要长按才能拾取。使手柄足够大以击中,在边缘附近拖动时自动滚动列表,并在平台支持的地方提供拾取和放下的触觉反馈。
要记住的关键 Principle
- 显示可通过手柄或光标更改拖动的内容
- 确认抓取并预览掉落
- 以清晰的动作解决并提供撤消
- WCAG 2.5.7 (AA):提供非拖拽替代方案
- 使用弹簧自然释放;减少以减少运动
常见问题解答
来源
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C 外语