PRODUCT LIFECYCLE
结果页Result Page
操作完成后（成功/失败/空数据/404）给用户一个明确的结果页面或卡片。
效果预览
✓
提交成功
我们已收到你的申请，审核结果将在 1-2 个工作日内通过邮件发送。
适合用在哪
提交成功、支付完成、空数据、404/500 错误、操作失败后的引导。
不适合：操作失败需要用户补充大量信息或做复杂决策时，不要只用结果页，应跳转到表单错误详情或客服流程。
和相近模式的区别
404 页面404 / Error Page
404 是整页错误状态，关注 URL 不存在；Result 是组件级状态，关注操作结果（成功/失败/空/信息）。
警告提示Alert / Callout
Alert 是页面提示；Result 是操作完成后的状态展示，通常更大、更居中、更强调下一步。
容易踩的坑
- 成功页没有明确的下一步出口，用户不知道接下来该做什么。
- 失败页只显示「出错了」不说明原因和解决办法。
- 把结果页做成整页，但嵌入弹窗或卡片里时尺寸过大。
设计提示词 · Prompt
结果页（Result Page）：居中布局。顶部一个 72-96px 圆形状态图标容器（success 绿勾、error 红叉、info 蓝叹号、empty 灰图标）。标题 18-24px 加粗，说明 14px 灰色。底部 1-2 个操作按钮：主按钮 + 次按钮。卡片白底、圆角 16px、1px 描边、大投影，padding 32-40px，max-width 420-480px。
Result Page: centered layout. Top: a 72-96px circular status icon container (success: #dcfce6 + dark green check; error: #fee2e2 + red cross; info: #eff6ff + blue exclamation; empty: light gray + dashed icon). Title 20-24px bold, description 14-15px gray. Bottom: 1-2 action buttons, primary + secondary. Card is white, 16px radius, 1px stroke, large shadow, 32-40px padding, max-width 420-480px. Difference from 404 page: Result is a reusable card/component; 404 is a standalone full page.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
/* <div class="result result--ok"><em>✓</em><b>提交成功</b><p>说明</p><div><button>返回首页</button><button class="is-p">查看进度</button></div></div> */
.result { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 420px; padding: 36px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px -12px rgba(0,0,0,.1); }
.result em { width: 80px; height: 80px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 36px; margin-bottom: 18px; }
.result--ok em { background: #dcfce6; color: #15803d; }
.result--err em { background: #fee2e2; color: #dc2626; }
.result--info em { background: #eff6ff; color: #2563eb; }
.result--empty em { background: #f9fafb; color: #9ca3af; border: 2px dashed #e5e7eb; }
.result b { font-size: 20px; margin-bottom: 8px; }
.result p { margin: 0 0 20px; color: #6b7280; font-size: 15px; line-height: 1.6; }
.result div { display: flex; gap: 10px; }
.result button { padding: 10px 18px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; cursor: pointer; font: 14px/1 system-ui, sans-serif; }
.result button.is-p { background: #111827; color: #fff; border-color: #111827; }
演示 HTML 结构
<div class="s d-center">
<div class="lc-result">
<div class="lc-result__ico lc-result__ico--ok"><span>✓</span></div>
<b>提交成功</b>
<p>我们已收到你的申请，审核结果将在 1-2 个工作日内通过邮件发送。</p>
<div class="lc-result__btns"><button class="is-p" type="button">返回首页</button><button type="button">查看进度</button></div>
</div>
</div>
常见问题
Result 页和 Empty State 有什么区别？
Result 强调操作结果或状态反馈；Empty State 强调「这里还没有数据」。两者视觉结构相似，但使用场景和文案不同。
失败结果页要不要放「重试」按钮？
如果失败原因可以自动重试，放「重试」；如果是不可逆错误（如提交数据格式错），放「返回修改」或「联系客服」。
常见搭配
同一页面里经常和「结果页」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。