使用者體驗模式7 分鐘閱讀·Updated 2026 年 10 月·ExodeUI 團隊
拖放式使用者體驗:指示符、回饋和可存取的替代方案
How to design drag-and-drop people can discover and use: grab signifiers, lift and preview feedback, drop zones, physics, and the non-drag alternative WCAG 2.2 requires.
直接總結與定義
核心要點
透過抓取手柄或遊標變更使可拖曳的項目變得明顯,透過提升和陰影確認抓取,透過突出顯示放置區域來預覽拖曳時的結果,並在放置時清楚地解決項目,並進行撤銷。總是提供一種非拖曳的方式來做相同的事情; 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 外語