商户 Portal 设计复盘：复杂跨境支付产品如何被理解
原创2026/7/2大约 7 分钟
商户 Portal 设计复盘：复杂跨境支付产品如何被理解
复杂金融产品的 Portal 不应按内部系统划分，而应围绕客户资金状态、待办任务和关键旅程组织。
为什么值得讨论
商户并不关心背后有多少服务，只关心钱在哪里、为什么没有完成以及下一步做什么。本文将原型说明改写为可迁移的产品方法。
适合读者：商户产品、交互设计、Portal 前端、运营后台和开发者体验团队。
1. 原型定位
- 是什么：高保真交互原型，用于验证产品信息架构、核心旅程与体验主张，可直接用于评审与用户访谈;
- 不是什么：非工程脚手架。数据全部为前端模拟，无后端;正式开发时应按 09 篇：跨境支付平台架构：领域边界、技术选型与演进路径架构以工程化方式重建(Vite + 组件库 + API 对接)。
2. 页面清单与文档溯源
| 导航 | 页面 | 对应文档 |
|---|---|---|
| 资金 | 概览(余额存根卡、待办任务、资金动态) | 12 篇：API 与商户体验：把复杂金融能力做成简单产品 §3 |
| 资金 | 余额(可用/冻结/在途三段式，冻结单下钻) | 06 篇：金融账务核心：多币种账户与复式记账怎么设计 §2 |
| 资金 | 换汇(实时报价 30s 倒计时、CNY/CNH 区分、锁汇占位) | 04 篇：换汇与头寸管理：定价、敞口与流动性的系统解法 §2 |
| 收款 | 全球账户(账户卡、复制/导出、开户流程) | 14 篇：全球账户服务：虚拟账户的产品边界与生命周期 |
| 收款 | 收款记录(状态徽、资金时间线、挂账认领、RFI 上传) | 02 篇：全球收款拆解：资金流、信息流与账务流如何对齐 §4/§6 |
| 收款 | 店铺授权(连接器状态、勾稽率、断连告警) | 13 篇：贸易背景中心：让业务真实性成为可复用系统能力 §4 |
| 付款 | 付款列表 + 三步向导(收款人→报价→确认)、退票详情 | 03 篇：全球付款系统：从指令生命周期到失败退回 |
| 付款 | 收款人(创建即校验+预筛) | 03 篇：全球付款系统：从指令生命周期到失败退回 §2.2 |
| 中心 | 账单与费用(月账单、费用明细可溯源) | 10 篇：计费引擎设计：复杂费率如何准确、可解释、可运营 §5 |
| 中心 | 合规中心(KYB 状态、额度、任务卡) | 05 篇：跨境支付合规风控：从 KYB 到交易监控/12 篇：API 与商户体验：把复杂金融能力做成简单产品 §3.1 |
| 中心 | 开发者(API Key、Webhook) | 12 篇：API 与商户体验：把复杂金融能力做成简单产品 §1/§2 |
3. 设计系统(体现的产品立场)
- 签名组件"资金时间线"：每笔收付款可点开查看"钱走到哪一步"，冻结/挂账/退票均有原因与建议动作——12 篇：API 与商户体验：把复杂金融能力做成简单产品"让商户看到钱在哪"的落地;
- 票据存根式余额卡：虚线裁切+币种水印，取自银行回单的视觉语系;
- 等宽数字：金额、账号、汇率一律 IBM Plex Mono，账本式可扫读;
- 透明定价立场：报价面板展示"中间价 + 加点 bps + 费用分列"(12 篇：API 与商户体验：把复杂金融能力做成简单产品关键设计取舍 1 的 demo 化，便于管理层直观对比后拍板);
- 色彩：深藏青 #17263B / 钞票绿 #0E6E5C / 鎏金 #B98A2F(仅用于待办与预警)。
4. 可交互的关键流程(演示脚本)
- 注册与入驻(v0.2 新增)：打开原型先到登录页——
- 走"登录"标签直接进入示例商户(KYB 已通过，体验全功能);
- 走"注册"标签体验完整入驻：注册(验证码模拟)→ 企业信息 → 上传认证材料(营业执照/法人证件/UBO 声明/店铺链接)→ 分级放行：基础核验通过即可进入商户中心浏览产品与报价，但收付/换汇/开户被禁用并给出解释，约 20 秒后模拟全量审核通过、功能自动解锁(12 篇：API 与商户体验：把复杂金融能力做成简单产品 §3.1 的落地);
- 合规中心新增"认证材料"管理卡，支持更新材料并重新核验;侧栏可退出登录切换身份;
- 发起付款：概览"发起付款"→ 选"东莞恒晟"(CNY)→ 输金额、选经济/快速 → 获取报价(30s 倒计时，过期需重报)→ 确认 → 余额实时扣减冻结，8 秒后模拟到账 Toast;
- 挂账认领：收款记录里 IN-20260630-UNAP(待认领)→ 认领 → 上传材料 → 状态变为"认领审核中";
- RFI 任务：概览任务卡"补充贸易背景材料"→ 上传合同发票 → 6 秒后模拟审核通过、资金解冻入余额;
- 换汇:USD→CNH 报价成交，余额联动更新，费用明细自动新增一条"换汇加点";
- 店铺授权:Shopee 重新授权 → 任务卡消除，勾稽率恢复;
- 开户：开通 JPY 账户 → "开立中"4 秒后激活并出现 JPY 余额。
5. 已知简化(评审时注意)
- 汇率为静态模拟值，无实时跳动;批量付款、锁汇、导出类功能为占位 Toast;
- 收款人表单校验、申报用途码仅示意两级，正式版按 11 篇：申报系统设计：让监管数据从交易源头就正确分类树设计;
- 登录为模拟鉴权(无真实账号体系)，法人活体核验在入驻流程中略过;未实现多用户与权限角色;移动端仅做基础自适应;
- 演示数据在注册新账户后仍复用示例商户数据集(原型简化，评审时说明即可)。
6. 后续迭代方向
- 运营后台原型(12 篇：API 与商户体验：把复杂金融能力做成简单产品 §4：合规工作台、差错工作台、商户 360);
- 定价透明度 A/B 两版报价面板，支撑决策点讨论;
- 多用户与权限(制单/审批分离，财务场景刚需);
- 评审意见回收后，以此原型为基准输出 PRD。
核心结论
- 余额、冻结、在途和待办任务必须在首页形成统一视图。
- 状态文案要从客户行动出发，而不是直接暴露内部枚举。
- 费用、汇率、材料和回执都需要可追溯下钻。