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 团队

撤消而不是确认对话框:设计干扰性较小的 UI

为什么要例行公事“你确定吗?”当确认仍然正确时,对话框失败,以及如何设计清晰、可访问且安全的撤消消息。

直接总结和定义

核心要点

对可撤消的操作使用撤消:立即执行该操作,然后通过“撤消”按钮显示一条简短的非阻塞消息。对于严重的、不可逆转的操作(例如永久删除或大额付款)保留确认对话框,并使其具体:命名对象和后果。确认常规操作可以训练人们在不阅读的情况下单击“确定”。

为什么例行确认不起作用

Nielsen Norman Group 关于确认对话框的指导很明确:在具有严重后果的操作之前使用它们,并且不要将它们用于常规操作。当人们多次看到同一个对话框时,他们会出于习惯进行确认,并且该对话框将停止防止其本来要捕获的错误。同一篇文章建议尽可能提供撤消,而不是依赖警告。

确认或撤消:一个简单的规则

问一个问题:这可以逆转吗?如果是,请采取行动并提供撤消。如果不是,请先确认,并把确认的内容具体化。

  • 存档、移动、标记为已读、从列表中删除:立即行动、提供撤消。
  • 发送消息:许多产品会短暂延迟发送,以便可以撤消。 Gmail 允许人们选择 5、10、20 或 30 秒的撤消窗口。
  • 永久删除、付费、公开发布:先确认,命名项目和影响(“删除142个文件”)。
  • 更好的是:使用垃圾或恢复期使删除可逆,然后使用撤消。
决策图:撤消 toast 后立即发生可逆操作;不可逆转的操作会出现特定的确认对话框
可逆操作被撤消;只有认真的、不可逆转的人才会得到一个对话,指出将会失去什么。

设计撤消消息

Material Design 将此组件称为小吃栏:一条简短的、干扰最小的消息,可以包含单个操作,这与需要响应的对话框不同。用几句话写下发生的事情,将“撤消”作为单个操作,并将其在屏幕上保留足够长的时间以使人们做出反应。不要在两秒内消失的消息中隐藏重要的撤消操作。

无障碍详情

屏幕阅读器用户和需要更多时间的人可能会错过自行消失的 Toast。通过礼貌的实时区域宣布消息,让键盘用户到达“撤消”按钮,在消息悬停或聚焦时暂停计时器,并提供另一种方式来反转操作,例如历史列表或垃圾箱。

撤消动作

从屏幕边缘开始的简短、平静的入口和清晰的出口可以帮助人们在不被打扰的情况下注意到消息。按下“撤消”后,将项目动画放回原位,以便可以看到反转。通过简单的淡入淡出来尊重减少运动的设置。

要记住的关键 Principle

  • 可逆操作:立即采取行动并提供撤消
  • 不可逆转的严重行动:明确影响的具体确认
  • 出于习惯点击常规确认
  • 使撤消消息易于访问:活动区域、键盘焦点、足够的时间
  • 将逆转动画化,让人们看到它有效

常见问题解答

来源

  1. Confirmation Dialogs Can Prevent User Errors — If Not Overused — Nielsen Norman Group
  2. Send or unsend Gmail messages — Gmail 帮助
  3. Snackbar guidelines — Material Design 3

相关指南和示例

反馈人们注意到的

浏览具有清晰的按下、成功和解除状态的免费交互式组件,并打开其中任何一个进行适应。

浏览实时组件
免费试用