Destructive Action
破坏性操作
WebMobileDesktop上手难度: 中等
一旦执行就难以撤销的操作——删除、清除、注销。它的按钮必须是红色的。
Live Demo
真的可以点最近删除
12 项待清理
你刚才看到的这个：相册里的「删除照片」、设置最底部红色的「清除所有数据」、聊天列表左滑出现的「删除」——它们共同点是：都需要一次确认。
它到底是什么
Destructive Action 是设计模式而不是单一组件。它由三部分组成：视觉降级（平时不显眼）、触发时的确认（Dialog 二次确认）、提供退路（删除后给 Undo 机会）。
危险操作删除操作destructive action危险按钮二次确认
Anatomy · 它由什么组成
De-emphasized常态低调
红色文字按钮，不抢视觉
Confirm Dialog二次确认
写明后果，不写「确定吗」
Impact Text后果说明
「将删除 12 张照片，无法恢复」
Undo Escape撤销退路
删除后 Snackbar 提供撤销
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 操作不可撤销或撤销成本高 | 用 |
| 误触代价大（删数据、注销、退款） | 用 |
| 危险按钮在页面中低频出现 | 用 |
| 操作频繁且容易恢复（拖动排序、清空输入框） | 不用 |
| 批量删除 100 张照片 | 视情况 |
每个危险操作都弹确认框会训练出「闭眼点确定」的习惯，反而降低安全性。
真正的解法往往是提供 Undo，而不是拦住用户。
Similar Patterns
别搞混一句话区分：一旦执行就难以撤销的操作——删除、清除、注销。它的按钮必须是红色的。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个破坏性删除操作：常态是红色文字按钮，点击后弹 Dialog 二次确认，说明会删掉多少项；删除完成后用 Snackbar 提供「撤销」。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个红色的删除按钮。
改成这样说
危险操作用三件套：常态红色文字按钮（不抢视觉）→ 点击弹 Dialog 二次确认并写明后果（不是「确定吗」）→ 完成后 Snackbar 提供撤销。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。