承兑平台在线文档

Appearance

交互设计规范 ​

**本文引用的文件** - [Admin-demo/src/pages/Orders/OrderDetail.tsx](file://Admin-demo/src/pages/Orders/OrderDetail.tsx) - [Admin-demo/src/i18n/index.ts](file://Admin-demo/src/i18n/index.ts) - [Admin-demo/src/i18n/en-US.ts](file://Admin-demo/src/i18n/en-US.ts) - [Admin-demo/src/i18n/zh-CN.ts](file://Admin-demo/src/i18n/zh-CN.ts) - [【PC】交易员/src/pages/Orders/index.tsx](file://【PC】交易员/src/pages/Orders/index.tsx) - [【PC】商户/src/pages/Orders/index.tsx](file://【PC】商户/src/pages/Orders/index.tsx) - [Axure老的项目原型/【App】交易员/data/document.js](file://Axure老的项目原型/【App】交易员/data/document.js) - [Axure老的项目原型/【App】交易员/plugins/page_notes/page_notes.js](file://Axure老的项目原型/【App】交易员/plugins/page_notes/page_notes.js) - [Axure老的项目原型/【App】交易员/plugins/recordplay/recordplay.js](file://Axure老的项目原型/【App】交易员/plugins/recordplay/recordplay.js) - [Axure老的项目原型/【App】交易员/plugins/sitemap/sitemap.js](file://Axure老的项目原型/【App】交易员/plugins/sitemap/sitemap.js) - [Axure老的项目原型/【App】交易员/files/登录/data.js](file://Axure老的项目原型/【App】交易员/files/登录/data.js) - [Axure老的项目原型/【App】交易员/files/注册（进入首页，用户实名认证）/data.js](file://Axure老的项目原型/【App】交易员/files/注册（进入首页，用户实名认证）/data.js) - [Axure老的项目原型/【App】交易员/files/我的/data.js](file://Axure老的项目原型/【App】交易员/files/我的/data.js) - [Axure老的项目原型/【App】交易员/files/资产/data.js](file://Axure老的项目原型/【App】交易员/files/资产/data.js) - [Axure老的项目原型/【App】交易员/files/提现/data.js](file://Axure老的项目原型/【App】交易员/files/提现/data.js) - [Axure老的项目原型/【App】交易员/files/充值/data.js](file://Axure老的项目原型/【App】交易员/files/充值/data.js) - [Axure老的项目原型/【App】交易员/files/客户订单/data.js](file://Axure老的项目原型/【App】交易员/files/客户订单/data.js) - [Axure老的项目原型/【App】交易员/files/订单明细/data.js](file://Axure老的项目原型/【App】交易员/files/订单明细/data.js) - [Axure老的项目原型/【App】交易员/files/搜索/data.js](file://Axure老的项目原型/【App】交易员/files/搜索/data.js) - [Axure老的项目原型/【App】交易员/files/搜索_1/data.js](file://Axure老的项目原型/【App】交易员/files/搜索_1/data.js) - [Axure老的项目原型/【App】交易员/files/搜索_2/data.js](file://Axure老的项目原型/【App】交易员/files/搜索_2/data.js) - [Axure老的项目原型/【App】交易员/files/忘记密码/data.js](file://Axure老的项目原型/【App】交易员/files/忘记密码/data.js) - [Axure老的项目原型/【App】交易员/files/安全验证/data.js](file://Axure老的项目原型/【App】交易员/files/安全验证/data.js) - [Axure老的项目原型/【App】交易员/files/完善资料/data.js](file://Axure老的项目原型/【App】交易员/files/完善资料/data.js) - [Axure老的项目原型/【App】交易员/files/完善资料（注册部分/data.js](file://Axure老的项目原型/【App】交易员/files/完善资料（注册部分/data.js) - [Axure老的项目原型/【App】交易员/files/完成/data.js](file://Axure老的项目原型/【App】交易员/files/完成/data.js) - [Axure老的项目原型/【App】交易员/files/发送成功/data.js](file://Axure老的项目原型/【App】交易员/files/发送成功/data.js) - [Axure老的项目原型/【App】交易员/files/启动加载图/data.js](file://Axure老的项目原型/【App】交易员/files/启动加载图/data.js) - [Axure老的项目原型/【App】交易员/files/手机-网络异常/data.js](file://Axure老的项目原型/【App】交易员/files/手机-网络异常/data.js) - [Axure老的项目原型/【App】交易员/files/404/data.js](file://Axure老的项目原型/【App】交易员/files/404/data.js) - [Axure老的项目原型/【App】交易员/files/卖u_买u_交易/data.js](file://Axure老的项目原型/【App】交易员/files/卖u_买u_交易/data.js) - [Axure老的项目原型/【App】交易员/files/接单管理/data.js](file://Axure老的项目原型/【App】交易员/files/接单管理/data.js) - [Axure老的项目原型/【App】交易员/files/我的分成规则/data.js](file://Axure老的项目原型/【App】交易员/files/我的分成规则/data.js) - [Axure老的项目原型/【App】交易员/files/邀请数据/data.js](file://Axure老的项目原型/【App】交易员/files/邀请数据/data.js) - [Axure老的项目原型/【App】交易员/files/邀请规则/data.js](file://Axure老的项目原型/【App】交易员/files/邀请规则/data.js) - [Axure老的项目原型/【App】交易员/files/邀请规则--列表/data.js](file://Axure老的项目原型/【App】交易员/files/邀请规则--列表/data.js) - [Axure老的项目原型/【App】交易员/files/邀请规则-查看/data.js](file://Axure老的项目原型/【App】交易员/files/邀请规则-查看/data.js) - [Axure老的项目原型/【App】交易员/files/首页--交易员--接单管理/data.js](file://Axure老的项目原型/【App】交易员/files/首页--交易员--接单管理/data.js) - [Axure老的项目原型/【App】交易员/files/首页--待完善资料/data.js](file://Axure老的项目原型/【App】交易员/files/首页--待完善资料/data.js) - [Axure老的项目原型/【App】交易员/files/授权/data.js](file://Axure老的项目原型/【App】交易员/files/授权/data.js) - [Axure老的项目原型/【App】交易员/files/谷歌验证/data.js](file://Axure老的项目原型/【App】交易员/files/谷歌验证/data.js) - [Axure老的项目原型/【App】交易员/files/贡献排行/data.js](file://Axure老的项目原型/【App】交易员/files/贡献排行/data.js) - [Axure老的项目原型/【App】交易员/files/账户安全/data.js](file://Axure老的项目原型/【App】交易员/files/账户安全/data.js) - [Axure老的项目原型/【App】交易员/files/资产明细/data.js](file://Axure老的项目原型/【App】交易员/files/资产明细/data.js) - [Axure老的项目原型/【App】交易员/files/收入/data.js](file://Axure老的项目原型/【App】交易员/files/收入/data.js) - [Axure老的项目原型/【App】交易员/files/收入明细/data.js](file://Axure老的项目原型/【App】交易员/files/收入明细/data.js) - [Axure老的项目原型/【App】交易员/files/收款方式/data.js](file://Axure老的项目原型/【App】交易员/files/收款方式/data.js) - [Axure老的项目原型/【App】交易员/files/新增/data.js](file://Axure老的项目原型/【App】交易员/files/新增/data.js) - [Axure老的项目原型/【App】交易员/files/查看_修改/data.js](file://Axure老的项目原型/【App】交易员/files/查看_修改/data.js) - [Axure老的项目原型/【App】交易员/files/详情/data.js](file://Axure老的项目原型/【App】交易员/files/详情/data.js) - [Axure老的项目原型/【App】交易员/files/详情_1/data.js](file://Axure老的项目原型/【App】交易员/files/详情_1/data.js) - [Axure老的项目原型/【App】交易员/files/详情_2/data.js](file://Axure老的项目原型/【App】交易员/files/详情_2/data.js) - [Axure老的项目原型/【App】交易员/files/语言/data.js](file://Axure老的项目原型/【App】交易员/files/语言/data.js) - [Axure老的项目原型/【App】交易员/files/协议（h5）/data.js](file://Axure老的项目原型/【App】交易员/files/协议（h5）/data.js) - [Axure老的项目原型/【App】交易员/files/协议（到时看要不要）/data.js](file://Axure老的项目原型/【App】交易员/files/协议（到时看要不要）/data.js) - [Axure老的项目原型/【App】交易员/files/协议（待）/data.js](file://Axure老的项目原型/【App】交易员/files/协议（待）/data.js) - [Axure老的项目原型/【App】交易员/files/加载状态/data.js](file://Axure老的项目原型/【App】交易员/files/加载状态/data.js) - [Axure老的项目原型/【App】交易员/index.html](file://Axure老的项目原型/【App】交易员/index.html) - [Axure老的项目原型/【App】交易员/start.html](file://Axure老的项目原型/【App】交易员/start.html) - [Axure老的项目原型/【App】交易员/start_with_pages.html](file://Axure老的项目原型/【App】交易员/start_with_pages.html) - [Axure老的项目原型/【App】交易员/404.html](file://Axure老的项目原型/【App】交易员/404.html) - [Axure老的项目原型/【App】交易员/resources/scripts/axure/action.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/action.js) - [Axure老的项目原型/【App】交易员/resources/scripts/axure/events.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/events.js) - [Axure老的项目原型/【App】交易员/resources/scripts/axure/model.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/model.js) - [Axure老的项目原型/【App】交易员/resources/scripts/axure/globals.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/globals.js) - [Axure老的项目原型/【App】交易员/resources/scripts/axutils.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axutils.js) - [Axure老的项目原型/【App】交易员/resources/css/axure_rp_page.css](file://Axure老的项目原型/【App】交易员/resources/css/axure_rp_page.css) - [Axure老的项目原型/【App】交易员/resources/css/reset.css](file://Axure老的项目原型/【App】交易员/resources/css/reset.css) - [Axure老的项目原型/【App】交易员/resources/css/default.css](file://Axure老的项目原型/【App】交易员/resources/css/default.css) - [Axure老的项目原型/【App】交易员/resources/css/jquery-ui-themes.css](file://Axure老的项目原型/【App】交易员/resources/css/jquery-ui-themes.css) - [Axure老的项目原型/【App】交易员/resources/css/previewfonts.css](file://Axure老的项目原型/【App】交易员/resources/css/previewfonts.css)

更新摘要 ​

所做更改

  • 新增抽屉式详情视图系统交互规范
  • 更新订单管理交互流程增强说明
  • 新增国际化交互模式设计标准
  • 更新交互元素设计标准以支持新设计系统
  • 新增动画效果规范与响应时间要求
  • 更新Axure插件使用方法与测试流程

目录 ​

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

引言 ​

本规范面向Axure原型的交互设计与实现，基于现有原型文件与插件系统，总结页面间跳转逻辑、用户操作反馈、状态变化机制，制定交互元素设计标准、动画效果规范与响应时间要求。同时提供Axure插件使用方法、交互测试流程、用户体验评估标准、交互一致性检查清单、可用性测试方法与交互优化策略，并给出常见交互问题的解决方案与最佳实践案例。

更新 本版本特别关注新的抽屉式详情视图系统、增强的订单管理交互流程以及国际化交互模式的设计规范。

项目结构 ​

该仓库包含三套Axure原型：App端交易员、PC端交易员、PC端商户。每套原型均包含页面文件夹、资源文件、脚本与插件等。App端交易员原型是本次规范的主要依据来源，涵盖登录、注册、我的、资产、提现、充值、客户订单、订单明细、搜索、忘记密码、安全验证、完善资料、完成、发送成功、启动加载图、手机网络异常、404、卖u_买u_交易、接单管理、我的分成规则、邀请数据、邀请规则、首页--交易员--接单管理、首页--待完善资料、授权、谷歌验证、贡献排行、账户安全、资产明细、收入、收入明细、收款方式、新增、查看_修改、详情、详情_1、详情_2、语言、协议（h5）、协议（到时看要不要）、协议（待）、加载状态等页面。

mermaid
graph TB
subgraph "App端交易员原型"
IDX["index.html"]
START["start.html"]
STARTP["start_with_pages.html"]
PAGES["files/* 页面集合"]
PLUGINS["plugins/* 插件集合"]
RES["resources/* 资源与脚本"]
end
subgraph "PC端交易员原型"
ORDERS["订单管理页面"]
DRAWER["抽屉式详情视图"]
ORDERDETAIL["订单详情页面"]
end
subgraph "国际化系统"
I18N["i18n国际化配置"]
EN["英文翻译"]
ZH["中文翻译"]
end
IDX --> PAGES
START --> PAGES
STARTP --> PAGES
PAGES --> PLUGINS
PAGES --> RES
ORDERS --> DRAWER
DRAWER --> ORDERDETAIL
I18N --> EN
I18N --> ZH

图表来源

  • [Admin-demo/src/i18n/index.ts](file://Admin-demo/src/i18n/index.ts)
  • [Admin-demo/src/i18n/en-US.ts](file://Admin-demo/src/i18n/en-US.ts)
  • [Admin-demo/src/i18n/zh-CN.ts](file://Admin-demo/src/i18n/zh-CN.ts)
  • [【PC】交易员/src/pages/Orders/index.tsx](file://【PC】交易员/src/pages/Orders/index.tsx)

章节来源

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

核心组件 ​

  • 页面与页面集合：每个页面由data.js定义交互行为、事件绑定、变量与状态；页面通过链接或按钮触发跳转。
  • 插件系统：page_notes、recordplay、sitemap三个插件分别用于页面注释、录制回放、站点地图生成。
  • 资源与脚本：Axure运行时脚本（action.js、events.js、model.js、globals.js、axutils.js）以及CSS样式文件（axure_rp_page.css、default.css、reset.css等）共同构成交互执行环境。
  • 页面导航：index.html、start.html、start_with_pages.html作为入口，组织页面集合与初始状态。
  • 新增 抽屉式详情视图系统：基于Ant Design Drawer组件，提供非阻断式的详情查看与操作界面。
  • 新增 国际化交互系统：支持中英文双语切换，动态语言加载与存储。

章节来源

  • [Axure老的项目原型/【App】交易员/data/document.js](file://Axure老的项目原型/【App】交易员/data/document.js)
  • [Axure老的项目原型/【App】交易员/plugins/page_notes/page_notes.js](file://Axure老的项目原型/【App】交易员/plugins/page_notes/page_notes.js)
  • [Axure老的项目原型/【App】交易员/plugins/recordplay/recordplay.js](file://Axure老的项目原型/【App】交易员/plugins/recordplay/recordplay.js)
  • [Axure老的项目原型/【App】交易员/plugins/sitemap/sitemap.js](file://Axure老的项目原型/【App】交易员/plugins/sitemap/sitemap.js)
  • [Admin-demo/src/i18n/index.ts](file://Admin-demo/src/i18n/index.ts)

架构总览 ​

Axure原型的交互执行依赖于页面数据（data.js）与运行时脚本（action.js、events.js、model.js、globals.js、axutils.js）。页面通过事件绑定（如点击、输入、加载）触发动作（如跳转、显示/隐藏、设置变量），并通过CSS样式控制视觉表现。插件通过独立脚本扩展功能，如页面注释、录制回放、站点地图。

mermaid
graph TB
subgraph "页面层"
PAGE["页面(data.js)"]
ORDERS["订单管理页面"]
DRAWER["抽屉式详情视图"]
ORDERDETAIL["订单详情页面"]
END
subgraph "运行时脚本层"
ACT["action.js"]
EVT["events.js"]
MOD["model.js"]
GLB["globals.js"]
AXU["axutils.js"]
END
subgraph "插件层"
PN["page_notes.js"]
RP["recordplay.js"]
SM["sitemap.js"]
END
subgraph "样式层"
CSS1["axure_rp_page.css"]
CSS2["default.css"]
CSS3["reset.css"]
CSS4["jquery-ui-themes.css"]
CSS5["previewfonts.css"]
END
subgraph "国际化层"
I18N["i18n国际化系统"]
EN["英文翻译"]
ZH["中文翻译"]
END
PAGE --> ACT
PAGE --> EVT
PAGE --> MOD
PAGE --> GLB
PAGE --> AXU
PN -.-> PAGE
RP -.-> PAGE
SM -.-> PAGE
PAGE --> CSS1
PAGE --> CSS2
PAGE --> CSS3
PAGE --> CSS4
PAGE --> CSS5
ORDERS --> DRAWER
DRAWER --> ORDERDETAIL
I18N --> EN
I18N --> ZH

图表来源

  • [Axure老的项目原型/【App】交易员/data/document.js](file://Axure老的项目原型/【App】交易员/data/document.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/action.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/action.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/events.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/events.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/model.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/model.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/globals.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/globals.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axutils.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axutils.js)
  • [Admin-demo/src/i18n/index.ts](file://Admin-demo/src/i18n/index.ts)

详细组件分析 ​

页面间跳转逻辑 ​

  • 跳转触发：页面通过按钮、链接或菜单项触发事件，事件绑定在data.js中定义。
  • 跳转目标：支持页面内跳转、跨页面跳转、打开新窗口或模态弹窗。
  • 跳转条件：可基于变量状态、输入校验结果、权限判断等条件决定是否允许跳转。
  • 返回与前进：通过浏览器历史或自定义状态维护返回路径。
mermaid
sequenceDiagram
participant U as "用户"
participant P as "当前页面(data.js)"
participant E as "事件系统(events.js)"
participant A as "动作系统(action.js)"
participant N as "目标页面"
U->>P : 点击"下一步"
P->>E : 触发事件
E->>A : 解析动作(跳转/显示/隐藏/设置变量)
A->>N : 导航至目标页面
N-->>U : 显示目标页面

图表来源

  • [Axure老的项目原型/【App】交易员/data/document.js](file://Axure老的项目原型/【App】交易员/data/document.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/events.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/events.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/action.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/action.js)

章节来源

  • [Axure老的项目原型/【App】交易员/files/登录/data.js](file://Axure老的项目原型/【App】交易员/files/登录/data.js)
  • [Axure老的项目原型/【App】交易员/files/注册（进入首页，用户实名认证）/data.js](file://Axure老的项目原型/【App】交易员/files/注册（进入首页，用户实名认证）/data.js)
  • [Axure老的项目原型/【App】交易员/files/我的/data.js](file://Axure老的项目原型/【App】交易员/files/我的/data.js)
  • [Axure老的项目原型/【App】交易员/files/资产/data.js](file://Axure老的项目原型/【App】交易员/files/资产/data.js)
  • [Axure老的项目原型/【App】交易员/files/提现/data.js](file://Axure老的项目原型/【App】交易员/files/提现/data.js)
  • [Axure老的项目原型/【App】交易员/files/充值/data.js](file://Axure老的项目原型/【App】交易员/files/充值/data.js)
  • [Axure老的项目原型/【App】交易员/files/客户订单/data.js](file://Axure老的项目原型/【App】交易员/files/客户订单/data.js)
  • [Axure老的项目原型/【App】交易员/files/订单明细/data.js](file://Axure老的项目原型/【App】交易员/files/订单明细/data.js)
  • [Axure老的项目原型/【App】交易员/files/搜索/data.js](file://Axure老的项目原型/【App】交易员/files/搜索/data.js)
  • [Axure老的项目原型/【App】交易员/files/搜索_1/data.js](file://Axure老的项目原型/【App】交易员/files/搜索_1/data.js)
  • [Axure老的项目原型/【App】交易员/files/搜索_2/data.js](file://Axure老的项目原型/【App】交易员/files/搜索_2/data.js)
  • [Axure老的项目原型/【App】交易员/files/忘记密码/data.js](file://Axure老的项目原型/【App】交易员/files/忘记密码/data.js)
  • [Axure老的项目原型/【App】交易员/files/安全验证/data.js](file://Axure老的项目原型/【App】交易员/files/安全验证/data.js)
  • [Axure老的项目原型/【App】交易员/files/完善资料/data.js](file://Axure老的项目原型/【App】交易员/files/完善资料/data.js)
  • [Axure老的项目原型/【App】交易员/files/完善资料（注册部分/data.js](file://Axure老的项目原型/【App】交易员/files/完善资料（注册部分/data.js)
  • [Axure老的项目原型/【App】交易员/files/完成/data.js](file://Axure老的项目原型/【App】交易员/files/完成/data.js)
  • [Axure老的项目原型/【App】交易员/files/发送成功/data.js](file://Axure老的项目原型/【App】交易员/files/发送成功/data.js)
  • [Axure老的项目原型/【App】交易员/files/启动加载图/data.js](file://Axure老的项目原型/【App】交易员/files/启动加载图/data.js)
  • [Axure老的项目原型/【App】交易员/files/手机-网络异常/data.js](file://Axure老的项目原型/【App】交易员/files/手机-网络异常/data.js)
  • [Axure老的项目原型/【App】交易员/files/404/data.js](file://Axure老的项目原型/【App】交易员/files/404/data.js)
  • [Axure老的项目原型/【App】交易员/files/卖u_买u_交易/data.js](file://Axure老的项目原型/【App】交易员/files/卖u_买u_交易/data.js)
  • [Axure老的项目原型/【App】交易员/files/接单管理/data.js](file://Axure老的项目原型/【App】交易员/files/接单管理/data.js)
  • [Axure老的项目原型/【App】交易员/files/我的分成规则/data.js](file://Axure老的项目原型/【App】交易员/files/我的分成规则/data.js)
  • [Axure老的项目原型/【App】交易员/files/邀请数据/data.js](file://Axure老的项目原型/【App】交易员/files/邀请数据/data.js)
  • [Axure老的项目原型/【App】交易员/files/邀请规则/data.js](file://Axure老的项目原型/【App】交易员/files/邀请规则/data.js)
  • [Axure老的项目原型/【App】交易员/files/邀请规则--列表/data.js](file://Axure老的项目原型/【App】交易员/files/邀请规则--列表/data.js)
  • [Axure老的项目原型/【App】交易员/files/邀请规则-查看/data.js](file://Axure老的项目原型/【App】交易员/files/邀请规则-查看/data.js)
  • [Axure老的项目原型/【App】交易员/files/首页--交易员--接单管理/data.js](file://Axure老的项目原型/【App】交易员/files/首页--交易员--接单管理/data.js)
  • [Axure老的项目原型/【App】交易员/files/首页--待完善资料/data.js](file://Axure老的项目原型/【App】交易员/files/首页--待完善资料/data.js)
  • [Axure老的项目原型/【App】交易员/files/授权/data.js](file://Axure老的项目原型/【App】交易员/files/授权/data.js)
  • [Axure老的项目原型/【App】交易员/files/谷歌验证/data.js](file://Axure老的项目原型/【App】交易员/files/谷歌验证/data.js)
  • [Axure老的项目原型/【App】交易员/files/贡献排行/data.js](file://Axure老的项目原型/【App】交易员/files/贡献排行/data.js)
  • [Axure老的项目原型/【App】交易员/files/账户安全/data.js](file://Axure老的项目原型/【App】交易员/files/账户安全/data.js)
  • [Axure老的项目原型/【App】交易员/files/资产明细/data.js](file://Axure老的项目原型/【App】交易员/files/资产明细/data.js)
  • [Axure老的项目原型/【App】交易员/files/收入/data.js](file://Axure老的项目原型/【App】交易员/files/收入/data.js)
  • [Axure老的项目原型/【App】交易员/files/收入明细/data.js](file://Axure老的项目原型/【App】交易员/files/收入明细/data.js)
  • [Axure老的项目原型/【App】交易员/files/收款方式/data.js](file://Axure老的项目原型/【App】交易员/files/收款方式/data.js)
  • [Axure老的项目原型/【App】交易员/files/新增/data.js](file://Axure老的项目原型/【App】交易员/files/新增/data.js)
  • [Axure老的项目原型/【App】交易员/files/查看_修改/data.js](file://Axure老的项目原型/【App】交易员/files/查看_修改/data.js)
  • [Axure老的项目原型/【App】交易员/files/详情/data.js](file://Axure老的项目原型/【App】交易员/files/详情/data.js)
  • [Axure老的项目原型/【App】交易员/files/详情_1/data.js](file://Axure老的项目原型/【App】交易员/files/详情_1/data.js)
  • [Axure老的项目原型/【App】交易员/files/详情_2/data.js](file://Axure老的项目原型/【App】交易员/files/详情_2/data.js)
  • [Axure老的项目原型/【App】交易员/files/语言/data.js](file://Axure老的项目原型/【App】交易员/files/语言/data.js)
  • [Axure老的项目原型/【App】交易员/files/协议（h5）/data.js](file://Axure老的项目原型/【App】交易员/files/协议（h5）/data.js)
  • [Axure老的项目原型/【App】交易员/files/协议（到时看要不要）/data.js](file://Axure老的项目原型/【App】交易员/files/协议（到时看要不要）/data.js)
  • [Axure老的项目原型/【App】交易员/files/协议（待）/data.js](file://Axure老的项目原型/【App】交易员/files/协议（待）/data.js)
  • [Axure老的项目原型/【App】交易员/files/加载状态/data.js](file://Axure老的项目原型/【App】交易员/files/加载状态/data.js)

用户操作反馈与状态变化机制 ​

  • 输入反馈：文本框输入时进行实时校验，错误提示以消息形式展示；成功后切换到下一步或完成状态。
  • 加载状态：长耗时操作显示加载图，避免用户重复提交；完成后根据结果切换到成功或失败页面。
  • 成功/失败状态：通过"发送成功"、"完成"、"手机网络异常"、"404"等页面表达不同结果状态。
  • 权限与条件：根据用户状态（已登录、资料完整度、权限等级）动态显示/隐藏控件或跳转到相应页面。
  • 新增 抽屉式交互反馈：抽屉打开/关闭时提供平滑动画过渡，状态变化通过宽度变化和透明度渐变体现。
  • 新增 国际化状态反馈：所有用户反馈消息支持中英文切换，动态语言环境下的状态提示保持一致性。
mermaid
flowchart TD
Start(["开始操作"]) --> Input["用户输入/选择"]
Input --> Validate{"校验通过?"}
Validate --> |否| ShowError["显示错误提示"]
Validate --> |是| Loading["显示加载状态"]
Loading --> Result{"操作结果"}
Result --> |成功| SuccessPage["跳转成功页面"]
Result --> |失败| FailPage["跳转失败页面"]
SuccessPage --> Drawer["打开抽屉式详情视图"]
Drawer --> I18n["国际化语言切换"]
I18n --> End(["结束"])
FailPage --> End
ShowError --> End

图表来源

  • [Axure老的项目原型/【App】交易员/files/发送成功/data.js](file://Axure老的项目原型/【App】交易员/files/发送成功/data.js)
  • [Axure老的项目原型/【App】交易员/files/完成/data.js](file://Axure老的项目原型/【App】交易员/files/完成/data.js)
  • [Axure老的项目原型/【App】交易员/files/手机-网络异常/data.js](file://Axure老的项目原型/【App】交易员/files/手机-网络异常/data.js)
  • [Axure老的项目原型/【App】交易员/files/404/data.js](file://Axure老的项目原型/【App】交易员/files/404/data.js)
  • [Axure老的项目原型/【App】交易员/files/启动加载图/data.js](file://Axure老的项目原型/【App】交易员/files/启动加载图/data.js)
  • [Admin-demo/src/i18n/index.ts](file://Admin-demo/src/i18n/index.ts)

章节来源

  • [Axure老的项目原型/【App】交易员/files/登录/data.js](file://Axure老的项目原型/【App】交易员/files/登录/data.js)
  • [Axure老的项目原型/【App】交易员/files/忘记密码/data.js](file://Axure老的项目原型/【App】交易员/files/忘记密码/data.js)
  • [Axure老的项目原型/【App】交易员/files/安全验证/data.js](file://Axure老的项目原型/【App】交易员/files/安全验证/data.js)
  • [Axure老的项目原型/【App】交易员/files/完善资料/data.js](file://Axure老的项目原型/【App】交易员/files/完善资料/data.js)
  • [Axure老的项目原型/【App】交易员/files/完善资料（注册部分/data.js](file://Axure老的项目原型/【App】交易员/files/完善资料（注册部分/data.js)
  • [Axure老的项目原型/【App】交易员/files/启动加载图/data.js](file://Axure老的项目原型/【App】交易员/files/启动加载图/data.js)

抽屉式详情视图系统 ​

新增 抽屉式详情视图是本次更新的核心组件，提供非阻断式的订单详情查看与操作界面。

设计原则 ​

  • 非阻断性：抽屉从右侧滑入，不影响主界面内容，用户可随时关闭查看详情。
  • 信息层次：详情内容按重要程度分组，关键信息突出显示，次要信息有序排列。
  • 操作便捷：常用操作按钮位于显眼位置，支持一键操作和快速反馈。

交互流程 ​

mermaid
sequenceDiagram
participant U as "用户"
participant T as "订单列表"
participant D as "抽屉详情视图"
participant O as "订单详情"
U->>T : 点击订单行
T->>D : 打开抽屉(placement='right')
D->>O : 渲染详情内容
O-->>U : 显示订单详情
U->>O : 执行操作(放行/付款/查看)
O-->>U : 显示操作反馈
U->>D : 关闭抽屉
D->>T : 恢复主界面

图表来源

  • [【PC】交易员/src/pages/Orders/index.tsx](file://【PC】交易员/src/pages/Orders/index.tsx)

组件规范 ​

  • 尺寸规格：默认宽度400px，支持自定义宽度调整。
  • 打开方式：从右侧滑入，支持键盘Esc关闭。
  • 内容布局：采用卡片式布局，信息分组清晰，支持滚动查看。
  • 状态展示：使用标签、徽章、时间轴等组件展示订单状态。

章节来源

  • [【PC】交易员/src/pages/Orders/index.tsx](file://【PC】交易员/src/pages/Orders/index.tsx)
  • [【PC】商户/src/pages/Orders/index.tsx](file://【PC】商户/src/pages/Orders/index.tsx)

增强的订单管理交互流程 ​

更新 订单管理界面经过重新设计，提供更直观的操作体验和更丰富的状态展示。

多视图模式 ​

  • 网格视图：适合快速浏览订单概览，显示关键信息如订单号、金额、状态。
  • 列表视图：适合详细查看和批量操作，支持完整的订单信息展示。
  • 视图切换：支持localStorage持久化，用户偏好自动保存。

状态分类与展示 ​

  • 主标签页：卖出/买入订单分离，支持独立筛选和管理。
  • 子标签页：待处理/已完成/全部订单分类，支持实时统计。
  • 状态标识：使用颜色编码和图标增强状态识别。

操作集成 ​

  • 一键处理：待处理订单提供"处理"按钮，直接进入操作流程。
  • 查看详情：已完成订单提供"查看"按钮，进入只读详情视图。
  • 批量操作：支持批量选择和统一操作。

章节来源

  • [【PC】交易员/src/pages/Orders/index.tsx](file://【PC】交易员/src/pages/Orders/index.tsx)

国际化交互模式 ​

新增 国际化系统支持中英文双语切换，提供一致的用户体验。

语言配置 ​

  • 动态加载：支持运行时语言切换，无需页面刷新。
  • 本地存储：用户语言偏好自动保存到localStorage。
  • 回退机制：支持语言回退到默认语言（zh-CN）。

翻译键值设计 ​

  • 模块化组织：按功能模块组织翻译键值，便于维护和扩展。
  • 上下文相关：同一词汇在不同上下文使用不同翻译。
  • 占位符支持：支持动态内容插入，如数字、日期等。

交互一致性 ​

  • 组件级国际化：所有UI组件文本支持国际化。
  • 状态消息：操作反馈、错误提示、确认对话框支持多语言。
  • 日期时间：本地化日期时间格式显示。

章节来源

  • [Admin-demo/src/i18n/index.ts](file://Admin-demo/src/i18n/index.ts)
  • [Admin-demo/src/i18n/en-US.ts](file://Admin-demo/src/i18n/en-US.ts)
  • [Admin-demo/src/i18n/zh-CN.ts](file://Admin-demo/src/i18n/zh-CN.ts)

交互元素设计标准 ​

  • 按钮：尺寸、颜色、禁用态、悬停态、点击反馈明确；重要操作使用强调色，危险操作使用警示色。
  • 输入框：占位符、必填标记、输入类型限制、字数/格式校验提示清晰。
  • 列表与表格：分页、排序、筛选、空状态提示；移动端适配。
  • 弹窗与模态：遮罩层级、关闭方式、键盘交互（Esc）、焦点管理。
  • 导航：面包屑、侧边栏、顶部导航；选中态与禁用态一致化。
  • 新增 抽屉组件：支持placement配置、宽度自定义、动画过渡效果。
  • 新增 国际化组件：支持动态语言切换、文本方向适配、本地化格式化。

动画效果规范 ​

  • 进出场动画：页面切换采用淡入淡出或滑动过渡，时长不超过0.3秒；复杂弹窗采用缩放+淡入。
  • 加载动画：旋转、进度条、骨架屏；避免阻塞主线程。
  • 反馈动画：按钮点击波纹、成功/失败图标动画、错误抖动提示。
  • 性能优先：动画帧率稳定，避免过度使用阴影与模糊。
  • 新增 抽屉动画：从右侧滑入滑出，使用缓动函数确保流畅体验。
  • 新增 国际化动画：语言切换时提供平滑的文本替换动画。

响应时间要求 ​

  • 无网络请求：交互反馈延迟≤50ms。
  • 网络请求：首屏渲染≤2秒，后续页面切换≤1秒，长列表加载≤3秒。
  • 错误处理：错误提示即时出现，建议提供重试按钮或返回路径。
  • 新增 抽屉打开：延迟≤100ms，确保用户操作的即时响应。
  • 新增 语言切换：切换延迟≤200ms，避免影响用户操作连续性。

Axure插件使用方法 ​

  • page_notes：在页面上添加注释说明，便于评审与协作。启用后可在页面中查看注释面板。
  • recordplay：录制用户操作流程，回放验证交互正确性，辅助回归测试。
  • sitemap：生成站点地图，梳理页面关系与跳转路径，便于一致性检查。
  • 新增 国际化测试：使用recordplay插件录制多语言操作流程，验证语言切换功能。

章节来源

  • [Axure老的项目原型/【App】交易员/plugins/page_notes/page_notes.js](file://Axure老的项目原型/【App】交易员/plugins/page_notes/page_notes.js)
  • [Axure老的项目原型/【App】交易员/plugins/recordplay/recordplay.js](file://Axure老的项目原型/【App】交易员/plugins/recordplay/recordplay.js)
  • [Axure老的项目原型/【App】交易员/plugins/sitemap/sitemap.js](file://Axure老的项目原型/【App】交易员/plugins/sitemap/sitemap.js)

交互测试流程 ​

  • 单页面测试：逐项验证按钮、输入、列表、弹窗等交互，记录预期与实际差异。
  • 跳转链路测试：从登录→首页→我的→资产→提现，验证路径连贯性与状态一致性。
  • 错误场景测试：网络异常、404页面、必填项为空、格式错误等，验证错误提示与恢复路径。
  • 移动端测试：模拟不同屏幕尺寸，验证布局与交互可用性。
  • 可访问性测试：Tab键导航、键盘操作、屏幕阅读器友好性。
  • 新增 抽屉式交互测试：验证抽屉打开/关闭动画、内容渲染、操作反馈。
  • 新增 国际化测试：验证中英文切换、文本显示、布局适配、文化相关格式。

用户体验评估标准 ​

  • 易学性：首次使用能快速理解主要流程与关键操作。
  • 效率性：完成任务步骤最少，信息密度合理。
  • 安全性：敏感操作二次确认，撤销与重试机制。
  • 一致性：风格统一、命名一致、交互模式一致。
  • 可靠性：稳定性高，错误提示明确，恢复路径清晰。
  • 新增 适应性：支持不同语言环境，界面布局适配多语言字符长度。

交互一致性检查清单 ​

  • 颜色与字体：品牌色、辅助色、字号、行高是否统一。
  • 组件复用：按钮、输入框、弹窗模板是否一致。
  • 交互模式：点击、悬停、禁用态是否一致。
  • 跳转路径：页面间跳转是否符合业务逻辑。
  • 错误处理：错误文案、图标、按钮位置是否一致。
  • 移动端适配：触摸目标大小、滚动行为、键盘遮挡。
  • 新增 抽屉组件：抽屉样式、动画效果、交互行为是否一致。
  • 新增 国际化：多语言文本一致性、布局适配性、文化相关性。

可用性测试方法 ​

  • A/B测试：对关键流程的不同设计方案进行对比。
  • 留存与转化：观察关键节点的跳出率与转化率。
  • 用户访谈：收集用户反馈，识别痛点与改进建议。
  • 专家评审：结合可访问性与设计规范进行评审。
  • 新增 语言测试：邀请母语者参与测试，验证语言准确性和本地化质量。

交互优化策略 ​

  • 减少认知负荷：简化流程、合并步骤、提供默认值。
  • 提升反馈速度：预加载、骨架屏、即时校验。
  • 增强容错能力：输入容错、撤销、自动保存。
  • 个性化与偏好：记住用户选择，提供快捷入口。
  • 新增 性能优化：抽屉组件懒加载、国际化资源按需加载。
  • 新增 可访问性：支持键盘导航、屏幕阅读器、高对比度模式。

常见交互问题与解决方案 ​

  • 问题：页面切换卡顿
    • 解决：减少一次性渲染元素数量，使用懒加载与虚拟滚动。
  • 问题：输入校验不及时
    • 解决：增加实时校验与即时提示，避免提交后再报错。
  • 问题：错误页面跳转混乱
    • 解决：统一错误页面风格与返回路径，提供明确的重试与帮助入口。
  • 问题：移动端点击不灵敏
    • 解决：增大触摸目标尺寸，避免元素过密，优化点击区域。
  • 问题：弹窗遮罩层级冲突
    • 解决：统一z-index管理，确保弹窗始终在最前层。
  • 新增 问题：抽屉式详情视图显示异常
    • 解决：检查Drawer组件配置、宽度设置、动画参数，确保与主界面协调。
  • 新增 问题：国际化文本截断
    • 解决：调整容器宽度、使用省略号处理、优化字体渲染。
  • 新增 问题：语言切换闪烁
    • 解决：使用CSS过渡动画、预加载翻译资源、避免强制重绘。

依赖关系分析 ​

  • 页面依赖：各页面通过data.js定义自身交互，相互之间通过事件与动作建立依赖关系。
  • 运行时脚本：action.js、events.js、model.js、globals.js、axutils.js为页面交互提供底层支撑。
  • 插件依赖：page_notes、recordplay、sitemap独立运行，不改变页面核心逻辑，但增强协作与测试能力。
  • 样式依赖：页面样式由多份CSS文件组合，需保持样式一致性与覆盖顺序正确。
  • 新增 抽屉组件依赖：Drawer组件依赖Ant Design样式库，需要确保样式文件正确加载。
  • 新增 国际化依赖：i18n系统依赖react-i18next库，需要正确配置资源文件和语言检测。
mermaid
graph LR
DATA["data.js(页面)"] --> ACT["action.js"]
DATA --> EVT["events.js"]
DATA --> MOD["model.js"]
DATA --> GLB["globals.js"]
DATA --> AXU["axutils.js"]
PN["page_notes.js"] -.-> DATA
RP["recordplay.js"] -.-> DATA
SM["sitemap.js"] -.-> DATA
DATA --> CSS["CSS样式集"]
ORDERS["订单管理页面"] --> DRAWER["抽屉组件"]
DRAWER --> ORDERDETAIL["订单详情视图"]
I18N["国际化系统"] --> EN["英文资源"]
I18N --> ZH["中文资源"]

图表来源

  • [Axure老的项目原型/【App】交易员/data/document.js](file://Axure老的项目原型/【App】交易员/data/document.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/action.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/action.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/events.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/events.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/model.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/model.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/globals.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/globals.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axutils.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axutils.js)
  • [Admin-demo/src/i18n/index.ts](file://Admin-demo/src/i18n/index.ts)

章节来源

  • [Axure老的项目原型/【App】交易员/data/document.js](file://Axure老的项目原型/【App】交易员/data/document.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/action.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/action.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/events.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/events.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/model.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/model.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axure/globals.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axure/globals.js)
  • [Axure老的项目原型/【App】交易员/resources/scripts/axutils.js](file://Axure老的项目原型/【App】交易员/resources/scripts/axutils.js)

性能考虑 ​

  • 脚本加载：尽量减少不必要的事件绑定与DOM查询，避免在高频事件中执行重计算。
  • 样式渲染：避免频繁触发重排与重绘，使用transform与opacity等高性能属性。
  • 资源优化：图片与字体按需加载，CSS与JS合并压缩。
  • 动画节流：在滚动与触摸事件中对动画进行节流，保证流畅度。
  • 新增 抽屉性能：使用CSS transform实现滑入效果，避免重排；内容懒加载减少初始渲染压力。
  • 新增 国际化性能：资源文件按需加载，避免一次性加载所有语言包。

故障排查指南 ​

  • 页面无法跳转：检查事件绑定是否正确，目标页面是否存在，动作参数是否完整。
  • 加载状态不消失：确认异步回调是否执行，状态变量是否更新，错误分支是否处理。
  • 错误页面显示异常：核对错误码映射与页面映射关系，确保返回路径有效。
  • 插件功能失效：确认插件脚本是否正确引入，浏览器兼容性与版本匹配。
  • 新增 抽屉组件问题：检查Drawer组件配置、样式文件加载、动画参数设置。
  • 新增 国际化问题：确认i18n配置、语言资源文件、本地存储数据格式。

章节来源

  • [Axure老的项目原型/【App】交易员/files/404/data.js](file://Axure老的项目原型/【App】交易员/files/404/data.js)
  • [Axure老的项目原型/【App】交易员/files/手机-网络异常/data.js](file://Axure老的项目原型/【App】交易员/files/手机-网络异常/data.js)
  • [Axure老的项目原型/【App】交易员/plugins/page_notes/page_notes.js](file://Axure老的项目原型/【App】交易员/plugins/page_notes/page_notes.js)
  • [Axure老的项目原型/【App】交易员/plugins/recordplay/recordplay.js](file://Axure老的项目原型/【App】交易员/plugins/recordplay/recordplay.js)
  • [Axure老的项目原型/【App】交易员/plugins/sitemap/sitemap.js](file://Axure老的项目原型/【App】交易员/plugins/sitemap/sitemap.js)

结论 ​

本规范基于Axure原型的页面与插件体系，建立了统一的交互设计原则、页面跳转逻辑、状态变化机制与测试评估方法。通过一致性检查清单与优化策略，可显著提升原型质量与用户体验。

更新 本次更新特别强化了抽屉式详情视图系统、增强的订单管理交互流程以及国际化交互模式的设计规范，为新设计系统的交互规范提供了全面指导。建议在后续迭代中持续完善插件使用与测试流程，确保交互设计的一致性与可维护性。

附录 ​

  • 参考页面：登录、注册、我的、资产、提现、充值、客户订单、订单明细、搜索、忘记密码、安全验证、完善资料、完成、发送成功、启动加载图、手机网络异常、404、卖u_买u_交易、接单管理、我的分成规则、邀请数据、邀请规则、首页--交易员--接单管理、首页--待完善资料、授权、谷歌验证、贡献排行、账户安全、资产明细、收入、收入明细、收款方式、新增、查看_修改、详情、详情_1、详情_2、语言、协议（h5）、协议（到时看要不要）、协议（待）、加载状态等。
  • 参考插件：page_notes、recordplay、sitemap。
  • 参考脚本：action.js、events.js、model.js、globals.js、axutils.js。
  • 参考样式：axure_rp_page.css、default.css、reset.css、jquery-ui-themes.css、previewfonts.css。
  • 新增 参考组件：Drawer抽屉组件、国际化i18n系统。
  • 新增 参考文件：订单管理页面、订单详情页面、语言资源配置文件。