咨询客服
下面把上一份总开发文档继续拆成可以直接给 UI/UX、产品经理、前端使用的《页面/原型需求文档》。重点会放在：每个页面展示什么、按钮做什么、页面之间怎么跳、不同状态怎么表现、交互规则和原型标注方式。
会员推荐关系 + 新零售商城
页面 / 原型需求文档
文档版本： V1.0
文档类型： 页面结构、交互及原型规格
适用角色： 产品经理、UI/UX、前端、后端、测试
设计目标： 在保留现有核心业务的基础上，统一会员、团队、商城、订单、资产和个人中心的产品体验。
1. 产品信息架构
新版本采用 5 个一级入口：
工作台
商城
团队
订单
我的完整结构：
工作台
├── 会员信息
├── 会员等级
├── 升级申请
├── 升级记录
├── 下级审核
├── 邀请注册
└── 公告
商城
├── 商城首页
├── 搜索
├── 分类
├── 专区
├── 商品详情
└── 购物车
团队
├── 团队概况
└── 团队成员
订单
├── 全部
├── 待付款
├── 待发货
├── 待收货
├── 已完成
└── 订单详情
我的
├── 用户资料
├── 资产中心
├── 积分明细
├── 积分转账
├── 提现
├── 收货地址
├── 收藏
├── 关注
├── 浏览记录
├── 客服
├── 关于我们
└── 设置2. 全局页面设计规范
2.1 移动端设计基准
主要设计尺寸：
375 × 812
390 × 844
414 × 896页面内容：
width: 100%
max-width: 750px
margin: auto桌面访问时仍保持移动端主内容比例，不允许内容无限横向拉伸。
3. 全局底部导航
所有登录后的主要页面统一底部导航：
┌────────┬────────┬────────┬────────┬────────┐
│ 工作台 │ 商城 │ 团队 │ 订单 │ 我的 │
└────────┴────────┴────────┴────────┴────────┘选中态
当前页面对应入口高亮。
点击逻辑
点击工作台 → /mob/ucenter
点击商城 → /mob/Catalog
点击团队 → /mob/UCenter/team
点击订单 → /mob/order/list
点击我的 → /mob/account注意
登录、注册、支付、订单确认等沉浸式页面不显示底部导航。
4. 全局顶部导航
标准二级页面：
┌─────────────────────────┐
│ ← 页面标题 │
└─────────────────────────┘可配置：
返回
标题
右侧操作例如：
← 收货地址 ＋5. P01 登录页
页面目的
让已有用户快速登录。
页面结构
┌─────────────────────┐
│ │
│ Logo │
│ 欢迎回来 │
│ │
│ 手机号 │
│ ┌─────────────────┐ │
│ │ 请输入手机号 │ │
│ └─────────────────┘ │
│ │
│ 密码 │
│ ┌─────────────────┐ │
│ │ 请输入密码 │ │
│ └─────────────────┘ │
│ │
│ 登录 │
│ │
│ 忘记密码 注册 │
│ │
└─────────────────────┘交互
登录按钮：
点击
↓
前端校验
↓
显示 Loading
↓
调用登录接口
↓
成功 → 工作台
失败 → 页面提示错误状态
手机号不能为空
请输入正确手机号
密码不能为空
账号或密码错误
登录过于频繁
账号已被停用6. P02 注册页
页面结构
┌─────────────────────┐
│ ← 注册 │
├─────────────────────┤
│ 推荐人：张三 │
│ │
│ 手机号 │
│ 微信号 │
│ 姓名 │
│ 密码 │
│ 确认密码 │
│ │
│ ☑ 同意相关协议 │
│ │
│ 完成注册 │
└─────────────────────┘推荐人
如果 URL 存在 tid：
/register?tid=123页面自动查询并显示推荐人。
推荐人应为只读字段，不允许用户修改。
注册成功
注册成功
↓
自动登录或跳转登录
↓
工作台7. P03 帮助注册页
与注册页结构基本一致。
区别：
顶部增加：
推荐注册
推荐人：XXX原型要求
推荐人区域使用轻量信息卡：
┌─────────────────────┐
│ 推荐人 │
│ 👤 张三 │
│ 会员等级：一星 │
└─────────────────────┘不要直接展示不必要的完整手机号等敏感信息。
8. P04 工作台
这是登录后的首页。
页面结构
┌─────────────────────┐
│ 会员头部 │
│ │
│ 头像 张三 │
│ 一星会员 │
│ │
│ 邀请码：ABC123 复制 │
├─────────────────────┤
│ 公告 │
│ 系统公告内容…… │
├─────────────────────┤
│ ┌──────┬──────┐ │
│ │邀请注册│申请升级│ │
│ ├──────┼──────┤ │
│ │下级审核│团队成员│ │
│ ├──────┼──────┤ │
│ │进入商城│升级记录│ │
│ └──────┴──────┘ │
└─────────────────────┘功能宫格
每个功能由权限控制。
例如当前无审核权限：
邀请注册
申请升级
团队成员
进入商城
升级记录不显示无权限功能，避免出现点击后无权限的空操作。
9. P05 邀请注册
页面
┌─────────────────────┐
│ ← 邀请注册 │
├─────────────────────┤
│ │
│ 二维码 │
│ │
│ 推荐码：ABC123 │
│ │
│ [复制邀请链接] │
│ [保存二维码] │
│ │
│ 推荐说明 │
│ 分享链接给朋友…… │
└─────────────────────┘交互
复制：
复制成功分享链接：
系统生成：
/register?tid=当前用户ID10. P06 升级申请页
页面结构
┌─────────────────────┐
│ ← 会员升级 │
├─────────────────────┤
│ 当前等级 │
│ 一星会员 │
│ │
│ 下一等级 │
│ 二星会员 │
│ │
│ 升级条件 │
│ · 条件一 │
│ · 条件二 │
│ │
│ 申请说明 │
│ ┌─────────────────┐ │
│ │ │ │
│ └─────────────────┘ │
│ │
│ 提交申请 │
└─────────────────────┘已提交状态
如果存在待审核：
┌─────────────────────┐
│ 当前申请 │
│ │
│ 一星 → 二星 │
│ 状态：审核中 │
│ 申请时间：xxxx │
│ │
│ 当前不可重复申请 │
└─────────────────────┘11. P07 升级历史页
列表
┌─────────────────────┐
│ ← 升级记录 │
├─────────────────────┤
│ 一星 → 二星 │
│ 2026-09-21 │
│ 审核中
├─────────────────────┤
│ 二星 → 三星 │
│ 2026-08-01 │
│ 已通过
└─────────────────────┘状态样式
统一使用：
审核中
已通过
已拒绝
已取消空状态
📄
暂无升级记录12. P08 下级审核页
页面定位
只有具备审核权限的用户看到。
页面结构
┌─────────────────────┐
│ ← 升级审核 │
├─────────────────────┤
│ 待审核 3 │
├─────────────────────┤
│ 张三 │
│ 手机：138****1234 │
│ 一星 → 二星 │
│ 申请：09-21 10:20 │
│ 查看 >│
├─────────────────────┤
│ 李四 │
│ 二星 → 三星 │
│ 申请：09-20 14:10 │
│ 查看 >│
└─────────────────────┘13. P09 审核详情
页面
┌─────────────────────┐
│ ← 审核详情 │
├─────────────────────┤
│ 申请人 │
│ 张三 │
│ 手机：138****1234 │
│ 微信：wx****123 │
├─────────────────────┤
│ 当前等级 │
│ 一星会员 │
│ │
│ 申请等级 │
│ 二星会员 │
│ │
│ 申请时间 │
│ 2026-09-21 10:20 │
├─────────────────────┤
│ 审核说明 │
│ │
├─────────────────────┤
│ 拒绝 同意 │
└─────────────────────┘拒绝
点击后弹出：
┌─────────────────────┐
│ 拒绝申请 │
│ │
│ 请填写拒绝原因 │
│ ┌─────────────────┐ │
│ └─────────────────┘ │
│ │
│ 取消 确认拒绝 │
└─────────────────────┘同意
弹窗：
确认同意该会员升级？确认后：
提交中
↓
成功
↓
返回审核列表14. P10 团队首页
页面结构
┌─────────────────────┐
│ ← 我的团队 │
├─────────────────────┤
│ 直接成员 12 │
│ │
│ 一星 8 二星 3 │
│ 三星 1 │
├─────────────────────┤
│ 团队成员 │
├─────────────────────┤
│ 张三 一星 │
│ 手机：138****1234 │
│ │
│ 李四 二星 │
│ 手机：139****5678 │
└─────────────────────┘后续可扩展
顶部统计：
总成员
一级成员
二级成员
活跃成员V1 不强制实现复杂团队树。
15. P11 商城首页
页面结构
┌─────────────────────┐
│ 🔍 搜索商品 │
├─────────────────────┤
│ Banner │
├─────────────────────┤
│ 分类 │
│ ○食品 ○日用 ○健康 │
├─────────────────────┤
│ 热门专区 │
│ [专区] [专区] [专区]│
├─────────────────────┤
│ 推荐商品 │
│ ┌────┬────┬────┐ │
│ │商品│商品│商品│ │
│ │图 │图 │图 │ │
│ │￥99 │￥69 │￥39 │ │
│ └────┴────┴────┘ │
└─────────────────────┘商品卡片
必须显示：
商品图
商品名
价格可选：
销量
积分抵扣
促销标签16. P12 分类页
页面结构
┌─────────────────────┐
│ ← 分类 │
├──────────┬──────────┤
│ 食品 │ 商品 │
│ 日用 │ 商品 │
│ 美妆 │ 商品 │
│ 健康 │ 商品 │
│ 其他 │ 商品 │
│ │ 商品 │
└──────────┴──────────┘左侧：
一级分类右侧：
二级分类 + 商品17. P13 专区页
页面顶部
专区 Banner
专区标题
专区介绍商品列表
使用统一商品卡片。
支持：
综合
价格
销量
最新18. P14 商品详情
这是商城最重要页面之一。
页面结构
┌─────────────────────┐
│ ← ♡ │
├─────────────────────┤
│ │
│ 商品图片 │
│ │
├─────────────────────┤
│ 商品名称 │
│ ￥199 │
│ 可使用积分抵扣 │
├─────────────────────┤
│ 规格 │
│ ○规格A ○规格B │
├─────────────────────┤
│ 数量 - 1 + │
├─────────────────────┤
│ 商品说明 │
│ │
├─────────────────────┤
│ [加入购物车] [立即购买]│
└─────────────────────┘规格选择
没有选择规格时：
请选择商品规格库存不足
当前规格库存不足19. P15 购物车
页面结构
┌─────────────────────┐
│ ← 购物车 │
├─────────────────────┤
│ ☑ 商品A │
│ 规格：红色 │
│ ￥99 - 1 + │
├─────────────────────┤
│ ☑ 商品B │
│ ￥69 - 1 + │
├─────────────────────┤
│ ☑ 全选 │
│ │
│ 合计：￥168 │
│ [去结算] │
└─────────────────────┘空购物车
🛒
购物车还是空的
去商城逛逛20. P16 收货地址列表
页面
┌─────────────────────┐
│ ← 收货地址 ＋│
├─────────────────────┤
│ 张三 默认 │
│ 138****1234 │
│ 广东省深圳市…… │
│ 编辑 > │
├─────────────────────┤
│ 李四 │
│ 139****5678 │
│ 广东省…… │
│ 编辑 > │
└─────────────────────┘21. P17 地址编辑
┌─────────────────────┐
│ ← 编辑地址 │
├─────────────────────┤
│ 收货人 张三 │
│ 手机号 138... │
│ 省市区 广东深圳... │
│ 详细地址 │
│ ┌─────────────────┐ │
│ └─────────────────┘ │
│ │
│ ☑ 设为默认地址 │
│ │
│ 保存地址 │
└─────────────────────┘删除操作：
编辑 → 删除
↓
确认删除该地址？22. P18 确认订单页
页面结构
┌─────────────────────┐
│ ← 确认订单 │
├─────────────────────┤
│ 📍 张三 138****1234 │
│ 广东省深圳市…… │
│ > │
├─────────────────────┤
│ 商品A ￥99 │
│ x 1 │
├─────────────────────┤
│ 商品金额 ￥99 │
│ 运费 ￥0 │
│ 积分抵扣 -￥10 │
├─────────────────────┤
│ 实付款 ￥89 │
│ │
│ 提交订单 │
└─────────────────────┘核心规则
订单确认页显示的金额仅用于展示。
最终金额必须由服务端重新计算。
23. P19 支付页
现有黑盒检查没有真正触发支付，因此这里定义为后续页面规格。
页面结构
订单金额：￥89
选择支付方式：
○ 微信支付
○ 其他支付方式
[立即支付]支付状态
支付中
支付成功
支付失败
支付取消支付成功：
→ 订单详情/支付成功页24. P20 订单列表
顶部 Tab：
全部 | 待付款 | 待发货 | 待收货 | 已完成订单卡：
┌─────────────────────┐
│ 订单号 xxx 待付款│
├─────────────────────┤
│ 商品A │
│ 商品B │
│ 共2件 │
├─────────────────────┤
│ 合计 ￥168 │
│ │
│ [取消订单] [去付款] │
└─────────────────────┘25. P21 订单详情
订单状态头部
待付款
请在 XX:XX 前完成支付或：
待发货
商家正在为您准备商品或：
已发货
物流信息时间线
● 已发货
│ 2026-09-21 10:30
│
● 已付款
│ 2026-09-21 10:20
│
● 创建订单
2026-09-21 10:18建议所有重要订单节点都形成时间线。
26. P22 我的
页面结构
┌─────────────────────┐
│ 👤 张三 │
│ 一星会员 │
├─────────────────────┤
│ 待付款 2 │
│ 待发货 1 │
│ 待收货 3 │
│ 全部订单 │
├─────────────────────┤
│ 我的资产 > │
│ 收货地址 > │
│ 收藏 > │
│ 关注 > │
│ 浏览记录 > │
│ 个人资料 > │
│ 客服中心 > │
│ 关于我们 > │
└─────────────────────┘27. P23 资产中心
页面顶部
┌─────────────────────┐
│ 当前积分 │
│ │
│ 12,580 │
│ │
│ 100积分 = 1元抵扣 │
├─────────────────────┤
│ [积分转账] [提现] │
└─────────────────────┘下方：
积分流水28. P24 积分明细
列表：
购物抵扣 -100
转账转入 +500
转账转出 -200
系统奖励 +100每条显示：
类型
金额
余额
时间
业务编号29. P25 积分转账
页面
┌─────────────────────┐
│ ← 积分转账 │
├─────────────────────┤
│ 转给谁 │
│ [手机号/会员账号] │
│ │
│ 用户信息 │
│ 张三 / 138****1234 │
│ │
│ 转账数量 │
│ [ ] 积分 │
│ │
│ 当前余额：12580 │
│ │
│ 下一步 │
└─────────────────────┘下一步进入确认页：
转出方
接收方
转账数量
风险提示
确认转账30. P26 提现页
情况一：资料完整
┌─────────────────────┐
│ ← 提现 │
├─────────────────────┤
│ 可提现积分 │
│ 12,580 │
│ │
│ 提现数量 │
│ [ ] │
│ │
│ 提现至 │
│ 中国银行 ****1234 │
│ │
│ 提交提现申请 │
└─────────────────────┘情况二：资料缺失
必须清晰提示：
尚未完善提现资料
请先完善：
✓ 实名信息
✕ 银行卡信息
[去完善资料]而不是点击提现后进入死循环。
31. P27 提现记录
列表：
提现 1000积分
状态：审核中
2026-09-21
提现 500积分
状态：已打款
2026-09-10状态：
待审核
审核中
已通过
已打款
已拒绝32. P28 个人资料
分成两个区域：
基础资料
头像
姓名
手机号
微信号实名/资产资料
实名认证
银行卡敏感资料默认脱敏。
33. P29 收藏
顶部：
我的收藏 12商品列表统一商品卡。
操作：
取消收藏
进入详情
批量删除34. P30 浏览记录
按照时间倒序：
今天
商品A
商品B
昨天
商品C支持：
清空浏览记录35. P31 客服中心
页面结构
┌─────────────────────┐
│ ← 客服中心 │
├─────────────────────┤
│ 在线客服 │
│ [联系客服] │
├─────────────────────┤
│ 客服电话 │
│ 400-xxxx-xxxx │
│ │
│ 客服微信 │
│ XXXXX │
├─────────────────────┤
│ 常见问题 │
│ 注册问题 > │
│ 订单问题 > │
│ 积分问题 > │
│ 提现问题 > │
└─────────────────────┘36. P32 关于我们
页面：
公司简介
经营主体
营业执照
联系方式
隐私政策
用户协议营业执照点击：
→ 高清预览37. P33 商家入驻
第一版可采用：
商家入驻
↓
入驻条件
↓
联系客服申请后续扩展在线申请。
38. 页面通用状态
每个页面必须设计 6 种状态。
正常态
正常展示业务内容。
Loading
数据加载中…空状态
暂无数据错误状态
加载失败
[重新加载]无权限
暂无权限访问
[返回]登录失效
登录已失效
请重新登录
[去登录]39. 弹窗规范
统一使用底部 Sheet 或标准 Dialog。
删除确认
确定删除？
删除后不可恢复
取消 删除操作确认
确认执行此操作？
取消 确认风险操作
积分转账、提现等操作增加二次确认。
40. 表单交互规范
字段失焦时进行基本校验：
手机号 → 格式校验
密码 → 长度校验
确认密码 → 一致性校验
积分 → 数量范围校验提交时：
按钮 Loading
禁止重复提交成功：
Toast
或
成功状态页失败：
明确告诉用户失败原因41. 页面跳转关系
核心页面流程：
登录
↓
工作台
├── 升级申请 → 升级记录
├── 下级审核 → 审核详情
├── 团队 → 团队成员
└── 邀请 → 注册
商城
↓
分类/专区
↓
商品详情
├── 收藏
├── 加购物车 → 购物车
└── 立即购买 → 确认订单
↓
支付
↓
订单详情
我的
├── 资产
│ ├── 积分明细
│ ├── 转账
│ └── 提现
├── 地址
├── 收藏
├── 浏览记录
└── 资料42. 原型标注规范
所有原型按钮建议增加以下标注：
【点击】
【跳转】
【弹窗】
【接口】
【权限】
【状态】
【异常】例如：
[申请升级]
【点击】
→ POST /api/member/upgrade/apply
【条件】
当前等级存在下一等级
【异常】
已有待审核申请 → Toast43. 页面权限标注
产品原型中必须明确：
普通会员：
申请升级
邀请注册
团队
审核会员：
以上 +
下级审核
管理员：
后台全部功能不要只画一个页面然后交给开发自行猜权限。
44. 原型验收标准
每个页面完成原型时，需要同时包含：
默认状态
Loading
空状态
错误状态
无权限状态
数据超长状态
按钮点击反馈
表单错误
成功状态例如商品详情至少需要：
正常
无库存
规格未选
加载失败
商品下架
加入购物车成功
购买失败45. UI 视觉统一建议
当前系统的最大视觉问题是会员系统、商城系统、账户系统分别采用不同模板。
新版应统一以下元素：
顶部导航
按钮
卡片
列表
输入框
弹窗
Toast
Tab
Badge
商品卡片
订单卡片
空状态
Loading
底部导航推荐视觉关系：
会员：品牌色 + 白色卡片
商城：品牌色 + 商品图片
资产：数字重点突出
订单：状态色区分
设置：标准列表46. 首页视觉层级建议
工作台：
会员身份
↓
当前任务
↓
公告
↓
快捷功能商城：
搜索
↓
Banner
↓
分类
↓
专区
↓
商品我的：
个人信息
↓
订单状态
↓
资产
↓
功能列表47. V1 页面开发优先级
第一批：核心账户
P01 登录
P02 注册
P03 帮助注册
P04 工作台
P05 邀请注册
P06 升级申请
P07 升级记录
P08 下级审核
P09 审核详情
P10 团队第二批：商城交易
P11 商城
P12 分类
P13 专区
P14 商品详情
P15 购物车
P16 地址
P17 地址编辑
P18 确认订单
P19 支付
P20 订单列表
P21 订单详情第三批：个人资产
P22 我的
P23 资产
P24 积分明细
P25 积分转账
P26 提现
P27 提现记录
P28 资料
P29 收藏
P30 浏览记录
P31 客服
P32 关于我们
P33 商家入驻48. UI 设计文件建议
设计师的 Figma / Sketch 页面建议按以下 Page 组织：
00 Design System
01 登录注册
02 工作台
03 会员升级
04 团队
05 商城首页
06 分类专区
07 商品
08 购物车
09 订单
10 我的
11 资产
12 提现
13 公共组件
14 Empty/Error/Loading组件优先于页面。
49. 第一版必须完成的核心页面
如果开发资源有限，V1 最低闭环为：
登录
↓
工作台
↓
邀请/注册
↓
会员升级
↓
团队
↓
商城
↓
商品
↓
购物车
↓
确认订单
↓
订单
↓
我的
↓
资产这样可以形成完整的：
用户 → 会员 → 推荐 → 商城 → 订单 → 资产业务闭环。
50. 最终页面设计原则
新版页面不再按照旧网站的三个模板分别设计，而是统一成一套产品语言：
统一导航
统一组件
统一状态
统一权限
统一数据口径
统一交互
统一响应式规则同时保证：
会员体系 ≠ 商城体系
会员身份 = 一个统一用户身份
订单数据 → 商城域
会员等级 → 会员域
积分资产 → 资产域
推荐关系 → 关系域这样后续继续开发后台、分销、商户、财务和运营功能时，不需要重新推翻前面的页面结构。
这份可以直接作为 UI 出原型图的页面基准。接下来最实用的是把它再进一步拆成 《Figma 原型页面清单 + 每个页面的线框图布局说明 + 前端对应接口编号》，这样设计师和开发可以一页一页对照执行。
