Success State
成功状态
WebMobileDesktop上手难度: 容易
一个任务彻底完成了——它值得一个专属页面，而不只是转个圈。
Live Demo
真的可以点Live Demo Playground
发布成功
你的内容已经上线，所有人都能看到。
海岸线的一天
刚刚 · 128 次浏览
你刚才看到的这个：「发布成功」大标题 + 刚发的内容预览 + 「查看」和「回到首页」两个按钮。
它到底是什么
当一个流程走完（订单提交、注册成功、发布完成），给一个完整的成功页面：确认 + 展示成果 + 给出下一步。它和 Toast 的区别是——成功页是停留的，Toast 是路过的。
成功态success state完成状态成功页完成页
Anatomy · 它由什么组成
Check Icon成功图标
对勾或轻量插图
Title标题
「发布成功」
Result成果预览
把刚创建的东西显示出来
Next Action下一步
查看 / 返回 / 再来一次
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 一个多步流程的最终完成 | 用 |
| 操作产生了一个可见的成果 | 用 |
| 用户接下来可能想查看结果 | 用 |
| 小操作已完成（保存设置） | 视情况 |
「已保存」这种小操作弹一个整页成功是杀鸡用牛刀，用 Toast。
成功页应该立即告诉用户「结果在哪」，而不是只说「成功了」。
Similar Patterns
别搞混一句话区分：一个任务彻底完成了——它值得一个专属页面，而不只是转个圈。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
发布成功后显示成功页：绿色对勾 + 「发布成功」+ 刚发布内容的缩略图预览 + 「查看」和「回到首页」两个按钮。
不要只对 AI 说
Bad → Better不要这样对 AI 说
完成后显示成功页。
改成这样说
流程完成后显示成功页：绿色对勾描边动画 + 「发布成功」+ 刚创建内容的缩略图预览 + 「查看」（主）/「回到首页」（次），并拦截浏览器返回避免重复提交。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。