危险按钮用 AA 红与普通操作区分;确认对话框写出「删除 Project Atlas 会移除成员与未发布内容」并要求输入项目名;可逆操作走软删除,行变灰并在倒计时内可撤销,结果与恢复路径都长在物件上。
永久删除产品与设计 · 界面体验
危险操作Destructive Action
可能造成不可逆后果、需谨慎确认的操作。
先选保护级别,再删 Project Atlas,看行上发生什么
一台销毁演练台:无确认模式是一按就没的反例,二次确认模式要求输入项目名才放行,软删除模式给撤销宽限期。每次操作的结局都长在列表行与累计计数上,不只靠底部说明。
销毁演练台 · Project Atlas
选择保护级别,再点「删除项目」,观察这一行在列表上的结局:无确认模式直接消失(反例)、二次确认模式要输入项目名才放行、软删除模式给撤销宽限期。结果长在行物件与累计计数上,不只靠底部说明。
- ●Project Atlas
点下后弹出确认,输入项目名才放行。
二次确认模式:点「删除项目」会先弹出确认;下一步输入「Project Atlas」才会启用永久删除。可切到「无确认」感受反例,或「软删除」体验撤销宽限期。
对照三种保护:无确认(反例,一按就没)/ 二次确认(说清对象与后果、输入校验)/ 软删除(撤销宽限期);危险按钮红、结果长在物件上、给撤销或支持,颜色只加强不独自承担。
从刚才的演练里提炼
你在演练台上看到的就是破坏性操作的四条核心,全部能在行物件上观察到。
- 危险按钮要和普通操作有层级差:「删除项目」用 AA 红,与取消、重置等中性控件区分;但颜色只加强,对象名、后果和撤销路径要写明,不能让颜色独自承担风险提示。
- 二次确认说清对象、范围与后果:确认对话框写出「删除 Project Atlas 会移除成员、未发布内容与历史版本」,并要求输入准确项目名才启用提交;「永久删除」按钮在校验通过前一直禁用,避免随手点下去。
- 软删除给撤销宽限期:删除后行变灰、显示倒计时与「撤销删除」;在窗口内撤销,行恢复活跃并标绿——结果可逆时优先用软删除,让用户能反悔。
- 结果长在物件上并给下一步:行被移除或标红时,列表本身变化,并给出联系支持、备份编号或重新演练的下一步;累计观察条把本场误删、永久删除、撤销次数长在面板上。
什么时候需要破坏性操作保护
从用户会损失什么判断,也要知道它与相邻概念的边界。
- 用:删除、移除、清空、覆盖、解散、不可逆提交等会造成数据或权限损失的主操作。
- 用:可逆操作优先走软删除+撤销窗口;不可逆操作走二次确认(含对象名与后果)或输入校验强确认。
- 区分:modal/popconfirm 承载确认对话框,toast 承载结果通知,error-state 承载失败恢复,disabled 在异步执行中防重复提交——破坏性操作保护是串起这些组件的总原则。
- 不用:纯本地切换、可即时撤销的编辑不必套输入校验;但也别把破坏性操作藏进普通按钮,或只靠红色搪塞。
怎么用:从触发到结果与恢复的最短路径
让一次破坏性操作的对象、后果和可逆性都在执行前可读,执行后落在物件上。
- 危险按钮用 AA 红与普通操作区分;点下后先在物件附近弹出确认(modal 或 popconfirm),不立即执行。
- 确认文案写出对象名、受影响范围与是否可逆;可逆操作给撤销窗口,不可逆操作要求输入对象名等强确认,提交按钮在校验通过前禁用。
- 取消、Escape、关闭或网络失败都不产生副作用;异步执行时按钮 disabled 防 repeat,重复请求返回同一结果。
- 成功后把结果长在物件上(行移除或变灰),用 toast 或 aria-live 告知,并给撤销、重新演练或联系支持的下一步;保留用户上下文。
正反例:同一个删除,只改保护方式
围绕同一个删除 Project Atlas,只改变「是否确认与可撤销」,看用户后果如何不同。
删除按钮和普通按钮只差一个颜色,点下立即生效:没有对象名、没有后果、没有撤销。用户误触或点错行时无法反悔,常导致数据丢失与投诉;颜色不是唯一的危险信号。
删除快速自测
一个「清空购物车」按钮,损失小且易补,哪种保护最合适?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。