Day 54：交易确认 UX、错误处理
日期：2026-03-12
主题：Web3 交易确认流程 UX 优化，错误信息收集与人话翻译，产出 UX 改进建议
今日目标
| 类型 | 内容 |
|---|
| 学习 | 交易确认流程的 UX 关键要素、常见错误类型与处理模式 |
| 实操 | 收集 10+ 个真实交易错误案例，分析其用户体验 |
| 产出 | UX 改进建议（交易确认优化方案 + 错误信息翻译表 + 设计规范） |
一、Web3 交易确认流程拆解
1.1 完整交易生命周期
用户意图 → 参数配置 → 预览确认 → 钱包签名 → 广播上链 → 等待确认 → 结果反馈
│ │ │ │ │ │ │
▼ ▼ ▼ ▼ ▼ ▼ ▼
"我要Swap" 滑点/Gas "确定吗？" MetaMask弹窗 Pending 挖矿中 成功/失败
每个环节都可能出问题，每个环节都是 UX 设计机会
1.2 每个环节的用户心理
| 环节 | 用户心理 | 设计目标 |
|---|
| 参数配置 | "这些参数是什么？我该填多少？" | 合理默认值 + 简单解释 |
| 预览确认 | "我到底会付多少？会收到多少？" | 清晰的输入/输出对比 |
| 钱包签名 | "这堆东西安全吗？我要签吗？" | 人类可读的签名内容 |
| 等待确认 | "多久？成功了吗？我能关页面吗？" | 实时状态 + 预估时间 |
| 结果反馈 | "成功了？钱到了吗？在哪看？" | 明确结果 + 余额更新 |
二、交易确认页面最佳实践
2.1 确认页面必须展示的信息
┌─────────────────────────────────────┐
│ 确认交易 (Confirm Swap) │
├─────────────────────────────────────┤
│ │
│ 你将支付： │
│ ┌───────────────────────────┐ │
│ │ 0.5 ETH (~$1,250) │ │
│ └───────────────────────────┘ │
│ ▼ │
│ 你将收到： │
│ ┌───────────────────────────┐ │
│ │ 1,247.50 USDC │ │
│ │ 最少收到: 1,235.03 USDC │ │
│ └───────────────────────────┘ │
│ │
│ ─────────── 费用明细 ─────────── │
│ 汇率: 1 ETH = 2,495 USDC │
│ Gas 费: ~$2.30 (0.0009 ETH) │
│ 滑点容忍: 0.5% │
│ 路由: Uniswap V3 (ETH→USDC) │
│ 预计时间: ~15 秒 │
│ │
│ ⚠️ 价格影响: 0.03% (低) │
│ │
│ [ 取消 ] [ 确认交易 ✓ ] │
│ │
└─────────────────────────────────────┘
2.2 交易状态展示
状态1：待签名 (Pending Signature)
┌──────────────────────────┐
│ ⏳ 请在钱包中确认交易 │
│ │
│ [查看MetaMask] [取消] │
│ │
│ 没看到弹窗？点此重试 │
└──────────────────────────┘
状态2：已广播 (Broadcasted)
┌──────────────────────────┐
│ 交易已提交，等待确认 │
│ │
│ ████████░░░░ 预计15秒 │
│ │
│ 交易哈希: 0xab...cd │
│ [在Etherscan查看] │
│ │
│ 可以安全关闭此页面 │
└──────────────────────────┘
状态3：已确认 (Confirmed)
┌──────────────────────────┐
│ ✅ 交易成功！ │
│ │
│ 已收到 1,247.50 USDC │
│ Gas 花费 $2.28 │
│ │
│ [查看交易] [继续交易] │
└──────────────────────────┘
状态4：失败 (Failed)
┌──────────────────────────┐
│ ❌ 交易失败 │
│ │
│ 原因：价格变动超过滑点限制 │
│ │
│ 建议： │
│ • 调高滑点至 1% 后重试 │
│ • 或减小交易金额 │
│ │
│ [调整设置] [重试] [取消] │
└──────────────────────────┘
三、Web3 交易错误收集与翻译
3.1 错误分类体系
Web3 交易错误
├── A. Gas 相关错误
├── B. 余额相关错误
├── C. 授权相关错误
├── D. 滑点/价格相关错误
├── E. 合约相关错误
├── F. 网络相关错误
└── G. 钱包相关错误
3.2 完整错误翻译表
A. Gas 相关错误
| 原始错误 | 翻译 | 建议操作 | 严重程度 |
|---|
intrinsic gas too low | Gas 限制设置过低，不足以完成交易 | 提高 Gas Limit 或使用自动估算 | 中 |
max fee per gas less than block base fee | 你设置的 Gas 费低于当前网络最低要求 | 提高 Gas 价格或等网络不拥堵时重试 | 中 |
out of gas | 交易执行中 Gas 耗尽 | 增加 Gas Limit（建议 +20%） | 中 |
transaction underpriced | Gas 价格太低，矿工不愿处理 | 提高 Gas 价格 | 中 |
B. 余额相关错误
| 原始错误 | 翻译 | 建议操作 | 严重程度 |
|---|
insufficient funds for transfer | 余额不足以完成转账 | 减小金额或充值 | 高 |
insufficient funds for gas * price + value | ETH 余额不够支付交易金额+Gas 费 | 预留足够 ETH 作为 Gas | 高 |
transfer amount exceeds balance | ERC20 代币余额不足 | 检查代币余额 | 高 |
C. 授权相关错误
| 原始错误 | 翻译 | 建议操作 | 严重程度 |
|---|
ERC20: transfer amount exceeds allowance | 你还没有授权该合约使用你的代币 | 先执行 Approve 交易 | 中 |
Permit deadline expired | 签名授权已过期 | 重新签名 Permit | 中 |
D. 滑点/价格相关错误
| 原始错误 | 翻译 | 建议操作 | 严重程度 |
|---|
INSUFFICIENT_OUTPUT_AMOUNT | 由于价格波动，无法以当前滑点完成交易 | 调高滑点或稍后重试 | 中 |
Too little received | 实际收到的代币少于最低限制 | 调高滑点容忍度 | 中 |
Price impact too high | 交易对价格影响过大（流动性不足） | 减小交易量或分批交易 | 高 |
E. 合约相关错误
| 原始错误 | 翻译 | 建议操作 | 严重程度 |
|---|
execution reverted | 合约执行失败（通用错误） | 查看具体 revert 原因 | 高 |
execution reverted: EXPIRED | 交易已过期（超时） | 重新发起交易 | 中 |
execution reverted: Pausable: paused | 合约已暂停（可能有安全事件） | 关注项目公告，暂停使用 | 高 |
F. 网络相关错误
| 原始错误 | 翻译 | 建议操作 | 严重程度 |
|---|
nonce too low | 交易序号冲突（可能有待处理交易） | 等待前序交易完成或重置 Nonce | 中 |
already known | 相同交易已经提交过了 | 等待已提交的交易确认 | 低 |
chain id mismatch | 钱包连接的网络与 DApp 要求不同 | 切换到正确的网络 | 中 |
G. 钱包相关错误
| 原始错误 | 翻译 | 建议操作 | 严重程度 |
|---|
User denied transaction signature | 你取消了交易签名 | 如需交易，请重新发起并确认 | 低 |
User rejected the request | 你拒绝了连接/签名请求 | 如需操作，请重新发起并批准 | 低 |
Internal JSON-RPC error | 钱包内部通信错误 | 刷新页面并重新连接钱包 | 中 |
四、错误处理 UX 设计规范
4.1 错误展示原则
❌ 差的错误处理：
├── 直接显示原始错误信息（如 "execution reverted: 0x..."）
├── 技术性描述（"intrinsic gas too low"）
├── 无操作建议（"交易失败" 然后呢？）
├── 隐藏错误（默默失败，无任何提示）
└── 全部用红色弹窗（用户恐慌）
✅ 好的错误处理：
├── 翻译为用户能理解的语言
├── 解释发生了什么 + 为什么
├── 提供明确的下一步操作
├── 按严重程度区分视觉样式
└── 可展开查看技术细节（给高级用户）
4.2 错误恢复流程
错误发生
│
├── 自动恢复类（无需用户操作）：
│ ├── RPC 超时 → 自动切换备用节点 → 重试
│ ├── Gas 估算失败 → 使用安全默认值
│ └── 价格过期 → 自动刷新报价
│
├── 引导恢复类（一键修复）：
│ ├── 滑点不足 → [一键调高滑点并重试]
│ ├── 未授权 → [一键 Approve]
│ ├── 网络错误 → [一键切换网络]
│ └── Gas 不足 → [一键调高 Gas]
│
└── 手动恢复类（需用户判断）：
├── 余额不足 → 提示充值方式
├── 合约暂停 → 引导查看项目公告
└── 安全风险 → 建议停止操作
五、UX 改进建议总结
5.1 优先级排序
| 优先级 | 改进项 | 影响 | 实现难度 | ROI |
|---|
| P0 | 错误信息人话翻译 | 减少 90% 用户困惑 | 低 | ⭐⭐⭐⭐⭐ |
| P0 | 交易状态实时反馈 | 消除等待焦虑 | 低 | ⭐⭐⭐⭐⭐ |
| P0 | 确认页展示法币等值 | 用户知道真实花费 | 低 | ⭐⭐⭐⭐ |
| P1 | 交易模拟预览 | 消除签名恐惧 | 中 | ⭐⭐⭐⭐ |
| P1 | 一键错误恢复 | 减少操作放弃率 | 中 | ⭐⭐⭐⭐ |
| P1 | 签名内容可读化 | 增强安全信任 | 中 | ⭐⭐⭐ |
| P2 | 批量交易（AA） | 减少交互次数/Gas | 高 | ⭐⭐⭐ |
面试准备
问题：如何改善 Web3 交易体验？
30秒版本：
三个核心改进。第一，错误信息从技术语言翻译成用户能理解的话，并附带一键修复按钮。第二，交易前增加模拟预览，让用户在签名前就知道资产变化。第三，利用账户抽象实现批量操作和 Gas 代付，将3次签名合并为1次。本质是把"不确定性"变成"可预期"。
追问准备：
- Q：最优先改善哪个环节？→ 错误处理。因为实现成本最低（一个映射表），但对用户体验提升最大。90%的用户困惑来自看不懂的错误信息
- Q：交易模拟有什么风险？→ 模拟结果与实际执行可能有差异（MEV、价格变动），需要明确标注"模拟结果仅供参考"
- Q：如何处理用户反复交易失败？→ 第3次失败后弹出"需要帮助吗？"引导到 FAQ 或客服。同时后台记录失败模式用于产品改进
参考
- Blowfish 交易模拟 API
- EIP-712 结构化签名标准
- Ethers.js 错误处理文档
- 博客笔记：
/blog/day54-transaction-ux
完成后
Day 55：安全基础(2)——审计报告阅读，读 2 份审计报告，产出审计报告阅读笔记。