Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
用户体验模式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):提供非拖拽替代方案
  • 使用弹簧自然释放;减少以减少运动

常见问题解答

来源

  1. Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
  2. Understanding SC 2.5.7: Dragging Movements — W3C 外语

相关指南和示例

感受真实物理的阻力

在浏览器中拖动并猛击,然后调整弹簧,直到释放感觉正确为止。

打开游乐场
免费试用