主题
前台 · 账号体系与帮助中心
覆盖页面：登录入口页（
/）、会员注册（/portal/register）、帮助中心（/portal/help） 设计目标：降低注册/登录门槛，自助解决常见问题
一、登录入口页（/）
1.1 页面定位
- 角色：前后台统一入口，品牌门面 + 身份分流
- 用户决策：我是消费者还是商家？登录还是注册？
- 核心指标：登录成功率、注册转化率
1.2 页面结构
┌─────────────────────────────────────┐
│ 品牌视觉区 │
│ Mall Logo + Slogan │
├─────────────────────────────────────┤
│ [ 会员登录 ]（主入口） │
│ [ 注册账号 ] │
├─────────────────────────────────────┤
│ ── 商家服务 ── │
│ [ 商家后台登录 ]（次级入口） │
├─────────────────────────────────────┤
│ 帮助 / 关于我们（弱链接） │
└─────────────────────────────────────┘1.3 功能模块
会员登录表单
| 字段 | 规则 |
|---|---|
| 用户名/手机号 | 必填 |
| 密码 | 必填，密码可见切换（眼睛图标） |
| 验证码 | 图形验证码（防暴力破解），点击刷新 |
- 登录成功：
- 有回跳目标（redirect 参数）→ 回跳原页面
- 无回跳目标 → 跳转商城首页
/portal/home
- 登录失败：明确提示"用户名或密码错误"（不区分具体原因，防账号探测）
- 账号被禁用：提示"该账号已被禁用，请联系客服"
身份分流
- 会员登录 → 前台商城
- 商家后台登录 → 后台管理系统
/admin（独立账号体系） - 两套账号体系隔离，互不通用
1.4 业务规则
| 规则 | 说明 |
|---|---|
| 登录态 | Token 存储，过期自动跳回登录 |
| 回跳机制 | 需登录页面拦截时携带 redirect，登录后回跳 |
| 安全 | 连续登录失败 5 次锁定 15 分钟（后端策略） |
1.5 验收标准
- AC-LG01：会员登录成功跳转商城首页，携带 redirect 时回跳原页面
- AC-LG02：登录失败给出明确且不泄露账号存在性的提示
- AC-LG03：后台登录入口跳转后台，账号体系隔离
- AC-LG04：验证码正确校验，可刷新
二、会员注册（/portal/register）
2.1 页面定位
- 角色：新客转化第一站，注册漏斗的起点
- 用户决策：注册麻不麻烦？值不值得注册？
- 核心指标：注册转化率、注册完成率
2.2 页面结构
┌─────────────────────────────────────┐
│ ← 返回 会员注册 │
├─────────────────────────────────────┤
│ 用户名* [________________] │
│ 手机号* [________________] │
│ 密码* [________________] 👁 │
│ 确认密码* [________________] │
│ 验证码* [________] [图形验证码] │
│ │
│ ☑ 我已阅读并同意《用户协议》《隐私政策》 │
│ │
│ [注册]（主按钮，通栏） │
│ │
│ 已有账号？去登录 > │
└─────────────────────────────────────┘2.3 表单规则
| 字段 | 校验规则 | 错误提示 |
|---|---|---|
| 用户名 | 4-20 位，字母/数字/下划线，唯一 | "用户名已被注册" |
| 手机号 | 11 位有效手机号，唯一 | "该手机号已注册" |
| 密码 | 6-20 位，字母+数字组合 | "密码需包含字母和数字" |
| 确认密码 | 与密码一致 | "两次密码输入不一致" |
| 验证码 | 与图形验证码一致 | "验证码错误" |
| 协议 | 必须勾选 | "请先同意用户协议" |
2.4 交互规则
- 实时校验：字段失焦即校验，错误提示在字段下方
- 注册成功：
- 自动登录并跳转商城首页
- 轻提示"注册成功，欢迎加入"
- 新用户赠送新人礼包（积分/优惠券，后端策略）
- 用户名重复检测：失焦时后端查重，即时反馈
2.5 状态设计
| 状态 | 表现 |
|---|---|
| 提交中 | 按钮 loading"注册中..." |
| 注册失败 | 对应字段标红 + 错误文案 |
| 注册成功 | 自动登录 + 跳转首页 |
2.6 验收标准
- AC-RG01：所有字段校验规则生效，错误提示准确
- AC-RG02：用户名/手机号重复时即时提示
- AC-RG03：注册成功自动登录并跳转，新用户获得初始积分
- AC-RG04：未勾选协议不可提交
三、帮助中心（/portal/help）
3.1 页面定位
- 角色：自助服务门户，降低客服压力
- 用户决策：我的问题能不能自己找到答案？
- 核心指标：问题解决率、客服咨询下降率
3.2 页面结构
┌─────────────────────────────────────┐
│ 搜索框：搜索你遇到的问题... │
├─────────────────────────────────────┤
│ 帮助分类（Tab 或宫格） │
│ [购物指南] [配送方式] [支付问题] [售后] │
├─────────────────────────────────────┤
│ 问题列表（当前分类下） │
│ Q: 如何下单购买？ > │
│ Q: 支持哪些支付方式？ > │
│ Q: 如何申请退货退款？ > │
├─────────────────────────────────────┤
│ 没找到答案？[联系客服] │
└─────────────────────────────────────┘3.3 功能模块
分类导航
- 帮助分类来自后台配置（购物指南/配送/支付/售后等）
- 默认展示第一个分类下的问题列表
问题列表
- 按分类展示帮助文章标题列表
- 点击展开/跳转问题详情
问题详情
- 标题 + 富文本正文（图文解答）
- 阅读量统计（+1）
- 底部反馈："这个问题解决你的问题了吗？[有用] [没用]"（可选）
搜索
- 按标题/内容关键词搜索帮助文章
- 无结果提示 + 引导联系客服
3.4 业务规则
| 规则 | 说明 |
|---|---|
| 内容来源 | 后台帮助管理模块配置，仅展示"发布"状态文章 |
| 排序 | 按后台配置的排序值展示 |
| 游客访问 | 帮助中心对游客开放 |
3.5 验收标准
- AC-HP01：帮助分类与文章来自后台配置，正确展示
- AC-HP02：问题详情正确渲染富文本
- AC-HP03：搜索可按关键词检索帮助文章
- AC-HP04：无结果时引导联系客服
四、举报反馈（订单/商品详情页内嵌）
4.1 功能定位
- 角色：平台治理的用户入口，收集违规线索
- 触发位置：商品详情页"举报该商品"、评价区"举报该评论"
4.2 举报表单（弹层）
| 字段 | 规则 |
|---|---|
| 举报类型 | 单选：商品评价/话题内容/用户评论 |
| 举报对象 | 自动填充（被举报的商品/评论标识） |
| 举报内容 | 必填，文本域，描述违规情况 |
- 提交成功提示"举报已提交，我们会尽快处理"
- 同一对象短期内不可重复举报（防骚扰）
4.3 验收标准
- AC-RP01：举报表单正确提交，后台举报管理可见
- AC-RP02：重复举报给出提示
五、体验优化（用户视角）
账号体系的体验核心是"低门槛进入、高信心使用"。按优先级排列。
登录
| 优先级 | 优化点 | 说明 |
|---|---|---|
| P0 | 短信验证码登录 | 除密码外提供"手机号+验证码"登录方式，降低记密码门槛（需短信通道，本期可预留） |
| P1 | 记住我 | 提供"7天内自动登录"选项，减少重复登录 |
| P1 | 找回密码 | 登录页提供"忘记密码"入口（手机号验证重置），避免用户流失 |
| P2 | 第三方登录 | 微信/支付宝快捷登录（本期可预留） |
注册
| 优先级 | 优化点 | 说明 |
|---|---|---|
| P0 | 密码强度条 | 输入密码时实时显示强度（弱/中/强），比报错更友好的引导 |
| P1 | 新人礼包可见 | 注册页展示"注册即得 xxx 积分/优惠券"，给用户注册理由 |
| P2 | 分步注册 | 先手机号快速注册，后补全信息，降低首步门槛 |
帮助中心
| 优先级 | 优化点 | 说明 |
|---|---|---|
| P0 | 热门问题置顶 | 首页展示"大家都在问"（Top 5 高频问题），80% 用户不需要进分类 |
| P1 | 相关问题推荐 | 问题详情页底部"相关问题"，引导自助解决 |
| P2 | 反馈闭环 | 问题"没用"时弹出追问"请描述你的问题"，收集优化线索 |
设计要点：
- 登录/注册是全部转化的前提，任何一点门槛都会放大流失，优先降低门槛
- 密码强度条与找回密码是账号体验的基本盘，不可缺失
- 帮助中心"热门问题"能拦截大部分咨询，是降本增效的关键设计