第四章：交互设计
定义信息架构、导航流程和页面结构
4.1 信息架构
一级架构
BFM Pay
├── 首页 (Home) ← 默认落地页
│ ├── 钱包卡片
│ ├── 快捷操作
│ └── 资产列表
│
├── 历史 (History)
│ └── 交易记录列表
│
└── 设置 (Settings)
├── 钱包管理
├── 安全设置
├── 偏好设置
└── 关于二级页面
首页延伸
├── 发送 (Send)
├── 收款 (Receive)
├── 铸造 (Mint)
├── 代币详情 (Token Detail)
└── 钱包详情 (Wallet Detail)
设置延伸
├── 钱包列表 (Wallet List)
├── 创建钱包 (Create Wallet)
├── 导入钱包 (Import Wallet)
├── 地址簿 (Address Book)
├── 语言设置 (Language)
├── 货币设置 (Currency)
├── 链配置 (Chain Config)
└── 应用锁 (App Lock)
授权相关
├── 地址授权 (Authorize Address)
└── 签名授权 (Authorize Signature)4.2 导航模式
底部 Tab 导航
┌─────────────────────────────────────┐
│ │
│ 页面内容区域 │
│ │
├─────────────────────────────────────┤
│ 🏠 📜 ⚙️ │
│ 首页 历史 设置 │
└─────────────────────────────────────┘设计决策：
- 3 个 Tab，保持简洁
- 首页为默认选中
- Tab 图标 + 文字，便于识别
栈式导航 (Stackflow)
push
首页 ────────────────────► 发送页面
pop
首页 ◄──────────────────── 发送页面特点：
- 原生 App 体验
- 支持手势返回
- 保留页面状态
底部弹窗 (Bottom Sheet)
使用场景：
- 选择器（钱包、链、代币）
- 确认框（转账确认）
- 操作菜单
┌─────────────────────────────────────┐
│ │
│ 页面内容 │
│ │
├─────────────────────────────────────┤
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ ← 拖动条
│ │
│ 选择链 │
│ │
│ ┌───────────────────────────────┐ │
│ │ ◉ Ethereum │ │
│ │ ○ BSC │ │
│ │ ○ Tron │ │
│ │ ○ BFMeta │ │
│ └───────────────────────────────┘ │
│ │
└─────────────────────────────────────┘4.3 页面结构模板
标准页面结构
┌─────────────────────────────────────┐
│ ← 返回 页面标题 [操作按钮] │ ← App Bar
├─────────────────────────────────────┤
│ │
│ │
│ 主要内容区域 │ ← Content
│ │
│ │
├─────────────────────────────────────┤
│ [主要操作按钮] │ ← Footer (可选)
└─────────────────────────────────────┘表单页面结构
┌─────────────────────────────────────┐
│ ← 返回 发送 │
├─────────────────────────────────────┤
│ │
│ 标签 │
│ ┌───────────────────────────────┐ │
│ │ 输入框 │ │
│ └───────────────────────────────┘ │
│ 提示或错误信息 │
│ │
│ 标签 │
│ ┌───────────────────────────────┐ │
│ │ 输入框 │ │
│ └───────────────────────────────┘ │
│ │
├─────────────────────────────────────┤
│ ┌───────────────────────────────┐ │
│ │ 确认发送 │ │
│ └───────────────────────────────┘ │
└─────────────────────────────────────┘列表页面结构
┌─────────────────────────────────────┐
│ ← 返回 交易历史 │
├─────────────────────────────────────┤
│ ┌───────────────────────────────┐ │
│ │ 🔍 搜索 │ │
│ └───────────────────────────────┘ │
├─────────────────────────────────────┤
│ 今天 │
│ ├── 交易记录 1 │
│ ├── 交易记录 2 │
│ 昨天 │
│ ├── 交易记录 3 │
│ └── ... │
└─────────────────────────────────────┘4.4 核心流程设计
创建钱包流程
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ 设置钱包锁│───►│生成助记词│───►│验证助记词│───►│ 创建成功 │
└─────────┘ └─────────┘ └─────────┘ └─────────┘
│ │ │
▼ ▼ ▼
图案确认 显示/隐藏 3词验证步骤指示器：
●────────○────────○
图案 备份 验证转账流程
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ 输入信息 │───►│ 确认详情 │───►│ 验证钱包锁│───►│ 发送成功 │
└─────────┘ └─────────┘ └─────────┘ └─────────┘
│ │ │
▼ ▼ ▼
地址+金额 显示手续费 图案/指纹DWEB 授权流程
DApp 请求 钱包响应
│ │
▼ │
┌───────────┐ │
│ getAddress│──────────────┼──► 弹出授权页
└───────────┘ │ │
│ ▼
│ 选择授权范围
│ │
│ ▼
│ 验证钱包锁确认
│ │
◄─────────┘
返回地址数据4.5 手势交互
支持的手势
| 手势 | 场景 | 行为 |
|---|---|---|
| 左滑返回 | 所有次级页面 | 返回上一页 |
| 下拉刷新 | 首页、列表页 | 刷新数据 |
| 下滑关闭 | 底部弹窗 | 关闭弹窗 |
| 长按 | 地址文本 | 复制地址 |
| 双击 | 金额输入框 | 填入最大值 |
手势反馈
- 滑动时有视觉位移
- 刷新时显示加载指示器
- 操作完成有触觉反馈（DWEB）
4.6 加载状态设计
页面加载
┌─────────────────────────────────────┐
│ ← 返回 代币详情 │
├─────────────────────────────────────┤
│ │
│ ┌─────────────┐ │
│ │ ◠ ◡ ◠ │ │
│ │ 加载中... │ │
│ └─────────────┘ │
│ │
└─────────────────────────────────────┘骨架屏
┌─────────────────────────────────────┐
│ ████████ ████ │
├─────────────────────────────────────┤
│ ┌───────────────────────────────┐ │
│ │ ████████████████████████████ │ │
│ │ ████████ ░░░░░░░░░░░░░░░░░░ │ │
│ └───────────────────────────────┘ │
│ │
│ ████ ░░░░░░░░░░ ████ ░░░░░░░░░ │
│ ████ ░░░░░░░░░░ ████ ░░░░░░░░░ │
└─────────────────────────────────────┘操作中状态
┌───────────────────────────────────┐
│ │
│ ◠ ◡ ◠ │
│ │
│ 交易发送中... │
│ │
│ 请勿关闭页面 │
│ │
└───────────────────────────────────┘4.7 错误状态设计
空状态
┌─────────────────────────────────────┐
│ │
│ 📭 │
│ │
│ 暂无交易记录 │
│ │
│ 完成您的第一笔转账后 │
│ 交易记录将显示在这里 │
│ │
└─────────────────────────────────────┘网络错误
┌─────────────────────────────────────┐
│ │
│ 📡 │
│ │
│ 网络连接失败 │
│ │
│ 请检查网络后重试 │
│ │
│ [重试] │
│ │
└─────────────────────────────────────┘表单错误
收款地址
┌───────────────────────────────┐
│ 0x71C7656... │
└───────────────────────────────┘
⚠️ 地址格式不正确本章小结
- 信息架构分 3 个一级入口，层级清晰
- 导航采用底部 Tab + 栈式导航 + 底部弹窗
- 页面结构有标准模板，保持一致性
- 核心流程设计注重用户引导
- 加载和错误状态设计完善
下一章
继续阅读 第五章：视觉设计，了解视觉系统和品牌风格。