承兑平台在线文档

Appearance

原型设计文档 ​

**本文引用的文件** - [2026-06-03-Chat.md](file://AI沟通记录/2026-06-03-Chat.md) - [2026-06-05-Chat.md](file://AI沟通记录/2026-06-05-Chat.md) - [2026-06-06_沟通记录.md](file://AI沟通记录/2026-06-06_沟通记录.md) - [2026-06-08_沟通记录.md](file://AI沟通记录/2026-06-08_沟通记录.md) - [Readme.md](file://任务和测试过程/Readme.md) - [2026-06-05-Discussion.md](file://任务和测试过程/2026-06-05-Discussion.md) - [决策变更清单.md](file://决策变更清单.md) - [待确认决策清单.md](file://待确认决策清单.md) - [承兑平台产品方案文档.md](file://承兑平台产品方案文档.md) - [文档/Readme.md](file://文档/Readme.md) - [综合审查报告.md](file://综合审查报告.md) - [Axure老的项目原型/老的项目原型/【App】交易员/index.html](file://Axure老的项目原型/老的项目原型/【App】交易员/index.html) - [Axure老的项目原型/老的项目原型/【PC】交易员/index.html](file://Axure老的项目原型/老的项目原型/【PC】交易员/index.html) - [Axure老的项目原型/老的项目原型/【PC】商户/index.html](file://Axure老的项目原型/老的项目原型/【PC】商户/index.html)

目录 ​

  1. 引言
  2. 项目结构
  3. 核心组件
  4. 架构总览
  5. 详细组件分析
  6. 依赖分析
  7. 性能考虑
  8. 故障排查指南
  9. 结论
  10. 附录

引言 ​

本文件面向“承兑平台原型设计”，基于Axure生成的完整前端界面原型，系统化梳理移动端（App）与PC端（交易员、商户）的界面设计与交互逻辑。文档覆盖以下方面：

  • 移动端与PC端界面设计原则、用户体验优化策略与布局规范
  • 页面清单、页面关系图、交互流程图
  • 用户界面元素、交互行为与状态变化
  • 设计规范、样式指南与组件库建议
  • 原型测试结果、用户反馈与设计迭代记录
  • 原型与最终实现的对应关系说明

项目结构 ​

项目以Axure原型为核心，分别提供App端与PC端两套原型，涵盖交易员与商户两类角色。原型文件组织清晰，每个角色均包含完整的页面集合与资源文件，便于评审与测试。

mermaid
graph TB
subgraph "Axure原型"
A_App["【App】交易员<br/>index.html"]
A_PC_Trader["【PC】交易员<br/>index.html"]
A_PC_Merchant["【PC】商户<br/>index.html"]
end
subgraph "文档与沟通"
D1["AI沟通记录/2026-06-03-Chat.md"]
D2["AI沟通记录/2026-06-05-Chat.md"]
D3["AI沟通记录/2026-06-06_沟通记录.md"]
D4["AI沟通记录/2026-06-08_沟通记录.md"]
D5["任务和测试过程/Readme.md"]
D6["任务和测试过程/2026-06-05-Discussion.md"]
D7["决策变更清单.md"]
D8["待确认决策清单.md"]
D9["承兑平台产品方案文档.md"]
D10["文档/Readme.md"]
D11["综合审查报告.md"]
end
A_App --> D1
A_PC_Trader --> D2
A_PC_Merchant --> D3
D1 --> D5
D2 --> D6
D3 --> D7
D4 --> D8
D5 --> D9
D6 --> D10
D7 --> D11

图表来源

  • [Axure老的项目原型/老的项目原型/【App】交易员/index.html](file://Axure老的项目原型/老的项目原型/【App】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】交易员/index.html](file://Axure老的项目原型/老的项目原型/【PC】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】商户/index.html](file://Axure老的项目原型/老的项目原型/【PC】商户/index.html)
  • [AI沟通记录/2026-06-03-Chat.md](file://AI沟通记录/2026-06-03-Chat.md)
  • [AI沟通记录/2026-06-05-Chat.md](file://AI沟通记录/2026-06-05-Chat.md)
  • [AI沟通记录/2026-06-06_沟通记录.md](file://AI沟通记录/2026-06-06_沟通记录.md)
  • [AI沟通记录/2026-06-08_沟通记录.md](file://AI沟通记录/2026-06-08_沟通记录.md)
  • [任务和测试过程/Readme.md](file://任务和测试过程/Readme.md)
  • [任务和测试过程/2026-06-05-Discussion.md](file://任务和测试过程/2026-06-05-Discussion.md)
  • [决策变更清单.md](file://决策变更清单.md)
  • [待确认决策清单.md](file://待确认决策清单.md)
  • [承兑平台产品方案文档.md](file://承兑平台产品方案文档.md)
  • [文档/Readme.md](file://文档/Readme.md)
  • [综合审查报告.md](file://综合审查报告.md)

章节来源

  • [Axure老的项目原型/老的项目原型/【App】交易员/index.html](file://Axure老的项目原型/老的项目原型/【App】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】交易员/index.html](file://Axure老的项目原型/老的项目原型/【PC】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】商户/index.html](file://Axure老的项目原型/老的项目原型/【PC】商户/index.html)

核心组件 ​

  • 原型入口与导航
    • App端与PC端均提供统一的首页入口，作为各角色操作的起点。
    • PC端提供交易员与商户两个独立入口，便于角色分流。
  • 页面集合
    • App端包含登录、注册、首页、资产、订单、客户、收款方式、提现、充值、安全验证、忘记密码、完善资料、授权、协议、语言、谷歌验证、贡献排行、我的分成规则、收入明细、资产明细、邀请数据、邀请规则、规则详情、详情、搜索、加载状态、启动加载图、手机网络异常、404等页面。
    • PC端包含登录、注册、首页、资产、资金流水、客户、客户订单、客户详情、开户资料、收款方式、提现、充值、安全验证、忘记密码、完善资料、修改密码、加载、发送成功、右上角选项、鼠标悬停、403、404、500、项目思考、首页--交易员--接单管理（休息中/接单中）、首页--待完善资料、API设置、价格设置、表格批量出售、订单列表等页面。
  • 交互插件与资源
    • 原型包含调试、页面注释、回放录制、站点地图等插件，支持原型评审与测试。
    • 资源目录包含CSS、图片、脚本等，确保页面渲染与交互效果一致。

章节来源

  • [Axure老的项目原型/老的项目原型/【App】交易员/index.html](file://Axure老的项目原型/老的项目原型/【App】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】交易员/index.html](file://Axure老的项目原型/老的项目原型/【PC】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】商户/index.html](file://Axure老的项目原型/老的项目原型/【PC】商户/index.html)

架构总览 ​

原型采用“角色分流 + 页面集合”的架构模式：

  • 角色分流：App端与PC端分别面向不同终端与使用场景；PC端进一步区分交易员与商户。
  • 页面集合：每个角色页面集合围绕核心业务闭环构建，覆盖登录认证、资产管理、订单管理、客户服务、提现充值、安全设置等模块。
  • 交互支撑：通过Axure插件与资源文件保障交互一致性与评审效率。
mermaid
graph TB
R["角色分流"]
R --> A["App端交易员"]
R --> PCT["PC端交易员"]
R --> PCM["PC端商户"]
A --> A_Pages["App页面集合"]
PCT --> PCT_Pages["PC交易员页面集合"]
PCM --> PCM_Pages["PC商户页面集合"]
A_Pages --> A_Plugins["Axure插件与资源"]
PCT_Pages --> PCT_Plugins["Axure插件与资源"]
PCM_Pages --> PCM_Plugins["Axure插件与资源"]

图表来源

  • [Axure老的项目原型/老的项目原型/【App】交易员/index.html](file://Axure老的项目原型/老的项目原型/【App】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】交易员/index.html](file://Axure老的项目原型/老的项目原型/【PC】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】商户/index.html](file://Axure老的项目原型/老的项目原型/【PC】商户/index.html)

详细组件分析 ​

移动端（App）原型组件 ​

  • 页面清单与职责
    • 登录/注册：完成身份认证与实名认证流程。
    • 首页：展示交易员核心视图，如接单管理、收益概览、快捷入口。
    • 资产/资产明细：展示账户余额、冻结资金、收益统计与明细。
    • 订单/订单明细：展示历史与当前订单状态与详情。
    • 客户/客户订单/客户详情：管理客户关系与交易历史。
    • 收款方式/提现/充值：资金出入金通道。
    • 安全验证/忘记密码/完善资料/授权/谷歌验证：账户安全与合规。
    • 我的/我的分成规则/收入明细/贡献排行/邀请数据/邀请规则/规则详情/详情/搜索/加载状态/启动加载图/手机网络异常/404：个人中心与辅助功能。
  • 交互设计原则
    • 信息层级清晰：重要信息（如收益、接单状态）置于显要位置。
    • 操作路径最短：常用功能（如接单、提现、充值）提供一键直达入口。
    • 状态反馈及时：加载状态、网络异常提示、成功/失败反馈。
  • 用户体验优化
    • 适配移动端手势：滑动、点击、长按等交互。
    • 字体与间距：保证在小屏设备上的可读性与可触达性。
    • 网络异常兜底：弱网环境下提供明确提示与重试机制。
  • 设计规范与组件库
    • 颜色体系：主色调、强调色、警示色、背景色与文字色的定义。
    • 字体与字号：标题、正文、说明文本的分级与行高。
    • 组件规范：按钮、输入框、卡片、列表、模态框等的尺寸与状态。
    • 动效与过渡：页面切换、加载动画、状态切换的动效节奏。

章节来源

  • [Axure老的项目原型/老的项目原型/【App】交易员/index.html](file://Axure老的项目原型/老的项目原型/【App】交易员/index.html)

PC端（交易员）原型组件 ​

  • 页面清单与职责
    • 登录/注册/忘记密码/安全验证/完善资料/修改密码：账户生命周期管理。
    • 首页--交易员--接单管理（休息中/接单中）：展示接单状态与工作状态。
    • 资产/资金流水：账户与流水查询。
    • 客户/客户订单/客户详情/开户资料：客户关系与合规资料。
    • 收款方式/提现/充值：资金出入金。
    • 右上角选项/鼠标悬停：菜单与悬浮提示。
    • 加载/发送成功/403/404/500：加载与错误状态。
  • 交互设计原则
    • 高效操作：交易相关功能（买入/卖出、网格、列表）提供快捷入口与批量操作。
    • 状态可视化：接单状态、订单状态、资金状态以颜色与图标直观呈现。
    • 错误与异常：提供明确的错误提示与恢复路径。
  • 用户体验优化
    • 大屏适配：信息密度与列宽优化，支持多窗口与分屏。
    • 快捷键与键盘导航：提升高频操作效率。
    • 数据筛选与排序：支持复杂业务场景下的信息检索。
  • 设计规范与组件库
    • 表格与表单：列宽、对齐、排序、筛选、分页等规范。
    • 图表与指标：K线、趋势图、收益指标的呈现方式。
    • 菜单与面板：侧边栏、顶部导航、弹窗面板的层级与交互。

章节来源

  • [Axure老的项目原型/老的项目原型/【PC】交易员/index.html](file://Axure老的项目原型/老的项目原型/【PC】交易员/index.html)

PC端（商户）原型组件 ​

  • 页面清单与职责
    • 登录/忘记密码/安全验证：账户安全。
    • 首页：商户核心视图与快捷入口。
    • 资产/资金流水：账户与流水查询。
    • 订单列表：订单管理与导出。
    • API设置/价格设置/表格批量出售：商户能力配置与批量操作。
    • 右上角选项/鼠标悬停：菜单与悬浮提示。
    • 加载/发送成功/403/404/500：加载与错误状态。
  • 交互设计原则
    • 权限与合规：严格区分商户与交易员权限，避免越权操作。
    • 批量与自动化：提供批量出金、价格设置等功能，降低人工成本。
    • 透明与可审计：所有操作留痕，支持回溯与审计。
  • 用户体验优化
    • 模块化布局：核心功能分区明确，减少跳转层级。
    • 导入与导出：支持Excel导入与导出，提升运营效率。
    • 实时提醒：订单状态、资金变动等实时通知。
  • 设计规范与组件库
    • 表单与表格：字段校验、必填项、批量编辑、导出模板。
    • 操作面板：设置类页面的分步引导与确认机制。
    • 错误与提示：错误分类、提示文案与修复建议。

章节来源

  • [Axure老的项目原型/老的项目原型/【PC】商户/index.html](file://Axure老的项目原型/老的项目原型/【PC】商户/index.html)

页面关系图 ​

mermaid
graph TB
subgraph "App端交易员"
A1["登录"]
A2["首页"]
A3["资产/资产明细"]
A4["订单/订单明细"]
A5["客户/客户订单/客户详情"]
A6["收款方式/提现/充值"]
A7["安全验证/忘记密码/完善资料/授权/谷歌验证/语言"]
A8["我的/我的分成规则/收入明细/贡献排行/邀请数据/邀请规则/规则详情/详情/搜索/加载状态/启动加载图/手机网络异常/404"]
end
subgraph "PC端交易员"
P1["登录/忘记密码/安全验证/完善资料/修改密码"]
P2["首页--交易员--接单管理休息中/接单中"]
P3["资产/资金流水"]
P4["客户/客户订单/客户详情/开户资料"]
P5["收款方式/提现/充值"]
P6["右上角选项/鼠标悬停/加载/发送成功/403/404/500"]
end
subgraph "PC端商户"
M1["登录/忘记密码/安全验证"]
M2["首页"]
M3["资产/资金流水"]
M4["订单列表"]
M5["API设置/价格设置/表格批量出售"]
M6["右上角选项/鼠标悬停/加载/发送成功/403/404/500"]
end
A1 --> A2
A2 --> A3
A2 --> A4
A2 --> A5
A2 --> A6
A2 --> A7
A2 --> A8
P1 --> P2
P2 --> P3
P2 --> P4
P2 --> P5
P2 --> P6
M1 --> M2
M2 --> M3
M2 --> M4
M2 --> M5
M2 --> M6

图表来源

  • [Axure老的项目原型/老的项目原型/【App】交易员/index.html](file://Axure老的项目原型/老的项目原型/【App】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】交易员/index.html](file://Axure老的项目原型/老的项目原型/【PC】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】商户/index.html](file://Axure老的项目原型/老的项目原型/【PC】商户/index.html)

交互流程图（示例：登录与接单流程） ​

mermaid
sequenceDiagram
participant U as "用户"
participant L as "登录页面"
participant H as "首页"
participant O as "接单管理"
U->>L : 输入账号/密码并提交
L-->>U : 登录成功/失败提示
U->>H : 进入首页
H->>O : 展示接单状态休息中/接单中
U->>O : 切换工作状态/接受/拒绝订单
O-->>U : 状态更新与提示

图表来源

  • [Axure老的项目原型/老的项目原型/【PC】交易员/index.html](file://Axure老的项目原型/老的项目原型/【PC】交易员/index.html)

交互流程图（示例：提现流程） ​

mermaid
sequenceDiagram
participant U as "用户"
participant W as "提现页面"
participant C as "收款方式"
participant S as "发送成功"
U->>W : 选择提现金额与收款方式
W->>C : 校验收款方式有效性
C-->>W : 返回校验结果
W->>S : 提交申请并返回成功提示
S-->>U : 显示到账时间与流水号

图表来源

  • [Axure老的项目原型/老的项目原型/【App】交易员/index.html](file://Axure老的项目原型/老的项目原型/【App】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】商户/index.html](file://Axure老的项目原型/老的项目原型/【PC】商户/index.html)

状态变化图（示例：订单状态） ​

mermaid
stateDiagram-v2
[*] --> 待支付
待支付 --> 已支付 : "用户确认转账"
待支付 --> 已取消 : "超时/取消"
已支付 --> 已放行 : "交易员确认放行"
已支付 --> 已退款 : "异常/退款"
已放行 --> 已完成 : "系统结算"
已退款 --> 已完成 : "退款完成"

图表来源

  • [Axure老的项目原型/老的项目原型/【App】交易员/index.html](file://Axure老的项目原型/老的项目原型/【App】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】交易员/index.html](file://Axure老的项目原型/老的项目原型/【PC】交易员/index.html)

依赖分析 ​

  • 角色与页面耦合
    • App端与PC端页面相互独立，但存在相似业务模块（登录、资产、订单、提现、充值），需保持交互一致性。
    • 交易员与商户页面在“客户”“收款方式”“资金流水”等模块存在复用，建议抽象通用组件。
  • 插件与资源依赖
    • 原型插件（调试、页面注释、回放录制、站点地图）与资源文件（CSS、图片、脚本）共同决定原型的可评审性与可测试性。
  • 外部依赖
    • 浏览器兼容性：Chrome/Firefox/Safari的预览与交互差异需纳入测试范围。
    • 移动端适配：iOS/Android的交互差异与字体渲染需在评审中关注。
mermaid
graph TB
Roles["角色与页面"]
Plugins["Axure插件"]
Resources["资源文件"]
Browser["浏览器兼容性"]
Mobile["移动端适配"]
Roles --> Plugins
Roles --> Resources
Plugins --> Browser
Resources --> Browser
Browser --> Mobile

图表来源

  • [Axure老的项目原型/老的项目原型/【App】交易员/index.html](file://Axure老的项目原型/老的项目原型/【App】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】交易员/index.html](file://Axure老的项目原型/老的项目原型/【PC】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】商户/index.html](file://Axure老的项目原型/老的项目原型/【PC】商户/index.html)

章节来源

  • [Axure老的项目原型/老的项目原型/【App】交易员/index.html](file://Axure老的项目原型/老的项目原型/【App】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】交易员/index.html](file://Axure老的项目原型/老的项目原型/【PC】交易员/index.html)
  • [Axure老的项目原型/老的项目原型/【PC】商户/index.html](file://Axure老的项目原型/老的项目原型/【PC】商户/index.html)

性能考虑 ​

  • 原型性能
    • 页面数量较多，建议在评审前进行轻量化处理，剔除不必要的资源与冗余交互。
    • 使用Axure插件进行交互简化，避免复杂动画影响预览流畅度。
  • 交互性能
    • 控制页面跳转与模态弹窗数量，减少DOM层级深度。
    • 对高频操作（如搜索、筛选、批量操作）提供本地缓存与节流策略。
  • 渲染性能
    • 在大屏PC端，合理控制表格与图表的数据量，避免一次性渲染过多节点。
    • 移动端优先使用轻量级组件，减少重排与重绘。

故障排查指南 ​

  • 常见问题
    • 页面空白或资源加载失败：检查资源路径与浏览器缓存。
    • 交互失效：确认Axure插件启用与脚本加载顺序。
    • 移动端预览异常：调整视口设置与字体大小。
  • 处理步骤
    • 清理缓存并重新打开原型。
    • 检查插件与资源文件完整性。
    • 在不同浏览器与设备上进行交叉验证。
  • 记录与追踪
    • 将问题分类记录于任务与测试过程文档中，形成问题清单与修复跟踪。

章节来源

  • [任务和测试过程/Readme.md](file://任务和测试过程/Readme.md)
  • [任务和测试过程/2026-06-05-Discussion.md](file://任务和测试过程/2026-06-05-Discussion.md)

结论 ​

本原型设计文档基于Axure生成的完整前端界面原型，系统化梳理了移动端与PC端的界面设计、交互逻辑与页面关系。通过明确的角色分流、页面职责与交互流程，结合设计规范与组件库建议，为后续评审、测试与实现提供了清晰的依据。建议在下一阶段将原型与最终实现进行逐项对照，确保一致性与可追溯性。

附录 ​

  • 原型测试与反馈
    • 测试过程与讨论记录详见任务与测试过程文档。
    • 沟通记录与决策清单为原型迭代与变更提供依据。
  • 设计规范与组件库
    • 建议在现有原型基础上补充颜色、字体、组件与动效规范，形成可复用的设计系统。
  • 原型与实现对应关系
    • 建立原型页面与实现模块的映射表，确保开发与设计的一致性。

章节来源

  • [AI沟通记录/2026-06-03-Chat.md](file://AI沟通记录/2026-06-03-Chat.md)
  • [AI沟通记录/2026-06-05-Chat.md](file://AI沟通记录/2026-06-05-Chat.md)
  • [AI沟通记录/2026-06-06_沟通记录.md](file://AI沟通记录/2026-06-06_沟通记录.md)
  • [AI沟通记录/2026-06-08_沟通记录.md](file://AI沟通记录/2026-06-08_沟通记录.md)
  • [决策变更清单.md](file://决策变更清单.md)
  • [待确认决策清单.md](file://待确认决策清单.md)
  • [承兑平台产品方案文档.md](file://承兑平台产品方案文档.md)
  • [文档/Readme.md](file://文档/Readme.md)
  • [综合审查报告.md](file://综合审查报告.md)