第六章：设计原则
定义设计决策的指导原则
6.1 信任优先
钱包是用户管理资产的工具，信任是最重要的基础。
透明
原则：所有操作都清晰展示细节
| 场景 | 透明设计 |
|---|---|
| 转账 | 显示完整地址、金额、手续费 |
| 授权 | 显示 DApp 来源、请求权限 |
| 签名 | 显示签名内容（消息/交易） |
示例：
转账确认
发送 0x71C7656EC7ab88b098defB751B7401B5f6d8976F
接收 0xabcd...1234
金额 1.5 ETH
手续费 0.002 ETH (~$4.50)
─────────────────────────────
总计 1.502 ETH
[取消] [确认发送]可控
原则：用户始终可以取消、返回、重试
| 场景 | 可控设计 |
|---|---|
| 多步骤流程 | 每步都可返回上一步 |
| 弹窗操作 | 可点击外部或关闭按钮关闭 |
| 长时操作 | 显示进度，可取消 |
安全提示
原则：在敏感操作前给予警告
警告级别：
| 级别 | 样式 | 场景 |
|---|---|---|
| 提示 | 蓝色 | 一般信息 |
| 警告 | 黄色 | 需要注意 |
| 危险 | 红色 | 高风险操作 |
示例：
⚠️ 警告
助记词是恢复钱包的唯一方式。
一旦丢失，资产将无法找回。
请确保：
• 周围没有其他人
• 不要截图保存
• 用纸笔抄写备份
[取消] [我已了解，继续]6.2 渐进式复杂度
新手友好
原则：核心功能零学习成本
实现方式：
- 首页直接展示余额和快捷操作
- 转账流程最少只需 2 步
- 收款一键展示二维码
进阶可选
原则：高级功能不干扰基础体验
实现方式：
- 质押、DApp 在首页不强调
- 高级设置放在二级菜单
- 功能按需加载
专家高效
原则：提供快捷操作给熟练用户
实现方式：
- 地址簿快速选择
- 最近转账记录
- 手势操作支持
6.3 错误预防
格式验证
原则：实时校验输入格式
收款地址
┌───────────────────────────────┐
│ 0x71C7656EC7ab88b098defB751B │ ✓ 格式正确
└───────────────────────────────┘
收款地址
┌───────────────────────────────┐
│ invalid_address │ ✗
└───────────────────────────────┘
⚠️ 地址格式不正确二次确认
原则：大额/异常操作需确认
需要二次确认的场景：
- 转账金额超过阈值
- 删除钱包
- 导出私钥
- 首次向新地址转账
可恢复
原则：提供明确的补救路径
| 问题 | 补救路径 |
|---|---|
| 忘记图案 | 通过助记词重置 |
| 交易失败 | 显示原因，提供重试 |
| 操作中断 | 保存草稿，下次继续 |
6.4 一致性体验
跨链统一
原则：不同链的操作流程保持一致
| 操作 | ETH | TRX | BFMeta |
|---|---|---|---|
| 转账 | 相同流程 | 相同流程 | 相同流程 |
| 手续费 | "网络费用" | "网络费用" | "网络费用" |
| 地址格式 | 自动识别 | 自动识别 | 自动识别 |
视觉统一
原则：相同功能使用相同的图标和位置
| 功能 | 图标 | 位置 |
|---|---|---|
| 返回 | ← | 左上角 |
| 更多 | ⋯ | 右上角 |
| 复制 | 📋 | 地址后方 |
| 扫码 | 📷 | 输入框内右侧 |
语言统一
原则：用通俗语言解释技术概念
| 技术术语 | 用户友好表述 |
|---|---|
| Gas Fee | 网络费用 |
| Nonce | (隐藏，不展示) |
| Block Confirmation | 交易确认中 |
| Private Key | 私钥 |
| Mnemonic | 助记词 |
6.5 自适应布局
设计目标
- 一份代码：无需为不同设备开发独立版本
- 内容优先：根据可用空间展示合适的信息量
- 交互一致：核心操作在各设备上保持相同
布局策略
| 设备 | 宽度 | 布局特点 |
|---|---|---|
| 小型手机 | < 360px | 紧凑单列，核心信息优先 |
| 标准手机 | 360-414px | 标准单列，完整功能 |
| 大屏手机 | 414-600px | 宽松单列，显示更多细节 |
| 折叠屏 | 600-840px | 卡片并排 |
| 平板 | > 840px | 分栏布局 |
典型场景
钱包卡片
- 窄屏：垂直排列信息
- 宽屏：水平展开，显示更多
转账确认
- 窄屏：全屏弹窗
- 宽屏：居中卡片式弹窗
设置页面
- 窄屏：单列列表
- 宽屏：分组卡片布局
6.6 无障碍设计
色彩对比度
- 正文与背景对比度 ≥ 4.5:1
- 大文字与背景对比度 ≥ 3:1
- 不仅依赖颜色传达信息
触控目标
- 最小触控区域 44x44px
- 相邻可点击元素间距 ≥ 8px
屏幕阅读器
- 所有交互元素有
aria-label - 图标按钮有文字说明
- 表单字段关联 label
键盘导航
- Tab 顺序合理
- 焦点状态可见
- 支持 Enter/Space 激活
6.7 设计检查清单
开发新功能时，检查以下项目：
信任
- [ ] 是否清晰展示了所有关键信息？
- [ ] 用户是否可以随时取消/返回？
- [ ] 敏感操作是否有适当警告？
复杂度
- [ ] 新手用户能否轻松完成？
- [ ] 高级功能是否不干扰基础体验？
- [ ] 是否提供了快捷操作？
错误预防
- [ ] 是否有实时输入验证？
- [ ] 是否有必要的二次确认？
- [ ] 出错后是否有补救路径？
一致性
- [ ] 是否与其他类似功能保持一致？
- [ ] 是否使用了正确的图标和位置？
- [ ] 是否使用了用户友好的语言？
响应式
- [ ] 是否在不同屏幕尺寸下正常显示？
- [ ] 是否使用了容器查询？
- [ ] 核心功能是否始终可用？
无障碍
- [ ] 色彩对比度是否足够？
- [ ] 触控目标是否足够大？
- [ ] 是否支持屏幕阅读器？
本章小结
- 信任优先：透明、可控、安全提示
- 渐进复杂度：新手友好、进阶可选、专家高效
- 错误预防：格式验证、二次确认、可恢复
- 一致性：跨链统一、视觉统一、语言统一
- 自适应：一份代码适配多种设备
- 无障碍：色彩、触控、阅读器、键盘
下一篇
完成设计篇后，继续阅读 第三篇：架构篇，了解技术实现方案。