194 lines
10 KiB
Markdown
194 lines
10 KiB
Markdown
# 宠小它 — 产品全方位优化说明（v1）
|
||
|
||
> 角色：资深产品 + UI/UX 方向说明，与当前仓库文档、页面结构对齐，供评审与拆迭代。
|
||
> 日期：2026-04-19
|
||
> 说明：本文件为 **v1 汇总落地版**；细节子域仍以专文为准，避免重复维护时以专文覆盖冲突段落。
|
||
|
||
**关联文档**
|
||
|
||
| 文档 | 用途 |
|
||
|------|------|
|
||
| [产品设计文档](./产品设计文档.md) | 功能、数据模型、状态机基线 |
|
||
| [产品改进建议](./产品改进建议.md) | 中长期方向库 |
|
||
| [本期主线-下一步产品优化点](./本期主线-下一步产品优化点.md) | 报告传播 + 成片 + 留资 + 绑定切片 |
|
||
| [宠主端预约体验优化-产品说明](./宠主端预约体验优化-产品说明.md) | C 端预约入口与表单 |
|
||
| [前端 UI 规范](./前端UI规范.md) | 视觉与组件基线（已与 `global.css` 对齐主色与 token） |
|
||
| [洗美报告短视频成片方案](./洗美报告短视频成片方案.md) | 成片边界与工程契约 |
|
||
| [**P0 研发落地清单**](./P0-研发落地清单.md) | **发给研发的 P0 任务与验收表** |
|
||
|
||
---
|
||
|
||
## 〇、待决策项（避免返工）
|
||
|
||
| ID | 议题 | 选项 | 建议 |
|
||
|----|------|------|------|
|
||
| D1 | 主色唯一源 | A `#2db96d`（`--c-brand`，与 `pages.json`/全局样式一致） / B `#16a34a` | **已采纳 A**：以代码与品牌 VI 为准；见《前端 UI 规范》修订 |
|
||
| D2 | 对外是否承诺「排队」 | 有容量模型再写 / 不写 | **已冻结：不写**「排队」「不排队」类绝对话术；统一文案为「在线选时段，到店更省心」 |
|
||
| D3 | 报告 token | 仅页内提示 / + 作废重发 MVP / + 有效期 | 短期提示 + 埋点；中期 **作废重发** 优先于复杂有效期 |
|
||
| D4 | 会员/储值/套餐是否进入 P0 | 进 P0 / 推到 P1/P2 | **已冻结：推到 P1/P2**；本期 P0 只做预约/公开报告/留资/基础埋点/报告分享/门店服务闭环 |
|
||
| D5 | 宠主历史报告汇总是否进入 P0 | 进 P0 / 推到 P2 | **已冻结：推到 P2**；本期不实现宠主账号内历史报告汇总 |
|
||
|
||
---
|
||
|
||
## 一、定位、场景与核心流程
|
||
|
||
### 1.1 问题与方向
|
||
|
||
| 问题 | 方案 | 理由 |
|
||
|------|------|------|
|
||
| 价值偏「台账工具」，老板难感知增收留客 | **双叙事**：B 端强调「工单 + 可传播报告 + 线索」；C 端强调「少填一步 + 报告回看 + 提醒」 | 与 SaaS 北极星、主线文档一致 |
|
||
| 预约多为店员录单，与「用户自助预约」心智混 | 短期文案统一为 **「代客预约」** 或 **「门店预约」**；中长期宠主自助 + 核销见宠主专文 | 降低期望落差 |
|
||
| 状态迁移接口未完全收口 | 后端状态机校验 + 取消权限与按钮显隐一致；错误码：`INVALID_STATUS`、`CANCEL_NOT_ALLOWED` | 防脏数据、纠纷 |
|
||
| 报告提交后是否可改 | **v1 锁死**则全链路提示「提交后不可修改」；补救能力单独立项 | 减少客诉与随意改档 |
|
||
|
||
### 1.2 落地规范（研发验收）
|
||
|
||
- 预约状态机以《产品设计文档》矩阵为准；列表筛选默认 **不含已取消**（见 §二）。
|
||
- 对外宣传物料与小程序描述：**不写**未实现的排队/叫号能力。
|
||
|
||
---
|
||
|
||
## 二、信息架构、菜单与导航
|
||
|
||
### 2.1 问题与方向
|
||
|
||
| 问题 | 方案 | 理由 |
|
||
|------|------|------|
|
||
| 「我的」入口随功能增长臃肿 | **角色分流**：`Home`/`Mine` 内按 `role` 分支；宠主 **不展示** 门店 KPI 看板 | 专文已明确：C 端不进「后台感」 |
|
||
| 「已完成」Tab 含取消单 | 列表默认 `status=done`；提供「含已取消」筛选或子 Tab | 财务与心智分离 |
|
||
| 深链不足 | **Query 协议**（建议统一文档化）：`storeId`、`petId`、`from=report&reportToken=` 等；`CustAppointmentCreate` `onLoad` 解析并预填 | 扫码、报告再约、分享落地 |
|
||
|
||
### 2.2 落地规范
|
||
|
||
**「我的」分组（老板示例）**
|
||
|
||
1. **经营与订单**：我的订单、预约相关入口（若未合并则保留高频项）
|
||
2. **店铺配置**：店铺设置、服务类型、排班（中频）
|
||
3. **团队与线索**：员工管理、线索（Leads）
|
||
4. **个人**：资料、退出
|
||
|
||
每组 ≤5 个一级入口；使用 `.module-title` 分组标题。
|
||
|
||
**深链优先级**：扫码参数 > 报告带来的预填 > 用户上次默认（门店/宠物）。
|
||
|
||
---
|
||
|
||
## 三、交互、路径、文案、空态与异常
|
||
|
||
### 3.1 问题与方向
|
||
|
||
| 问题 | 方案 | 理由 |
|
||
|------|------|------|
|
||
| 宠主首屏「+」弱、空列表冷启动差 | 首屏 **主按钮「预约服务」**；空列表主 CTA 置顶 | 见宠主专文 P0 |
|
||
| 发送报告步骤多 | **发送成功页同屏**：链接 + 二维码 + **2 条可复制话术**（变量模板） | 降店员切换成本 |
|
||
| 成片/留资仅成功态精致 | **统一三态**：骨架/加载、失败（归类原因+重试）、成功 | 信任与主线文档一致 |
|
||
| 登录打断填单 | **点击预约再登录**；返回保留草稿（Storage 或状态恢复） | 降首步流失 |
|
||
|
||
### 3.2 按钮与文案常量（前端可抽 `copy` 模块）
|
||
|
||
| 场景 | 主按钮 | 次要 | 危险操作 |
|
||
|------|--------|------|----------|
|
||
| 工单 | 开始服务 | 查看详情 | 取消预约（二次确认） |
|
||
| 报告 | 提交报告 → 发送报告 | 稍后生成短片 | — |
|
||
| 宠主 | 预约服务 | 更换门店 | 取消预约 |
|
||
| 发送成功 | 复制链接 | 保存二维码到相册 | — |
|
||
|
||
**失败原因对用户映射（示例）**
|
||
|
||
- `NETWORK`：网络异常，请重试
|
||
- `ASSET`：素材不足或损坏，请补充后重试
|
||
- `BUSY`：生成排队中，请稍后查看报告
|
||
- `UNKNOWN`：服务暂时不可用，请联系门店
|
||
|
||
禁止直接展示堆栈或内部英文错误句。
|
||
|
||
### 3.3 空态与网络
|
||
|
||
- 统一 `.empty`；弱网：首屏请求超时内置阈值（如 10s）后展示「网络不佳，点击重试」。
|
||
- 列表首屏：**骨架屏** 3～5 行占位（与《前端 UI 规范》并行落地）。
|
||
|
||
---
|
||
|
||
## 四、UI、色彩、字体与卡片
|
||
|
||
### 4.1 问题与方向
|
||
|
||
| 问题 | 方案 | 理由 |
|
||
|------|------|------|
|
||
| 历史规范主色与代码不一致 | **以 `src/assets/global.css` 的 `--c-*` 为唯一源**；禁止业务页写死绿色 | 设计系统可维护 |
|
||
| 工具感偏强 | 高亮区用 `--c-brand-light`；卡片白底 + `--c-border` + `--c-shadow` | 与品牌「温暖」一致 |
|
||
|
||
### 4.2 落地规范
|
||
|
||
- **主色**：`var(--c-brand)` `#2db96d`；深绿 `var(--c-brand-dark)`；浅底 `var(--c-brand-light)`。
|
||
- **字体层级**：标题 18/700，正文 14～15/400～500，辅助 12；禁止 ≤11px。
|
||
- **圆角**：组件 12～16px；页面左右边距 16px（`.page-section`）。
|
||
- **H5 报告页模块顺序**：店信息 → 服务摘要 → **短片区（若有）** → 前后对比 → 过程素材 → 备注 → 留资/绑定 CTA。
|
||
|
||
---
|
||
|
||
## 五、功能细节、边缘场景、会员与闭环
|
||
|
||
| 问题 | 方案 | 备注 |
|
||
|------|------|------|
|
||
| `report_token` 长期有效 | 页内隐私提示；埋点异常频次；中期作废重发 | 见《产品改进建议》§六 |
|
||
| 谁点谁服务、无协作记录 | 短期备注协作；长期多技师/分工表 | 不改表则产品不写「多技师提成」 |
|
||
| 宠物历史 MVP | 列表/详情展示「第 N 次 / 距上次 X 天」**有数据才展示** | 与 `/api/pet/history` 等对齐 |
|
||
| 会员储值 | **不进入本期 P0**；放到 P1/P2 方向库（与《P0-研发落地清单》「不在 P0」一致）。本期仅在数据层保留可扩展字段位，不实现前端功能 | 避免前端假功能；与 common context、P0 清单口径一致 |
|
||
| 时段已满 | 明确文案 + **快捷切次日** | 宠主专文 |
|
||
|
||
**报告媒体类型**：前后端统一枚举；优先字段化 `media_type`，与成片任务对齐。
|
||
|
||
---
|
||
|
||
## 六、商业化、转化、留存
|
||
|
||
| 方向 | 动作 | 指标建议（与主线一致，可二选一） |
|
||
|------|------|----------------------------------|
|
||
| 传播 | 分享标题规则：宠物名 + 服务 + 门店；封面：成片封面帧 > 后图首帧 > Logo | `report_open` / `report_reopen` |
|
||
| 成片 | 成功页引导保存/转发；失败可重试 | `highlight_share`、生成成功率 |
|
||
| 留资 | **单钩子** + 最少字段（手机必填）；隐私一句 | `lead_submit`、转化率 |
|
||
| 绑定 | 留资后一句话价值 + 最短路径授权 | `wx_bind_success` |
|
||
| 回访 | Leads 超时未跟进标红（阈值运营定） | 门店执行率 |
|
||
|
||
计费模型（按店/月、成片加量包等）在《产品改进建议》§七层次定假设，指导裁剪。
|
||
|
||
---
|
||
|
||
## 七、微信小程序与性能
|
||
|
||
| 方向 | 规范 |
|
||
|------|------|
|
||
| 能力差异 | H5 不承诺原生分享卡片；以长按保存、复制链接为主；小程序以 `onShareAppMessage` 为主 |
|
||
| 成片 | 接口返回 `posterUrl`、`durationSec`；前端视频 `poster`、封面优先加载 |
|
||
| 分包 | 低频管理页（服务类型、排班、线索等）评估 `subPackages` 减小主包 |
|
||
| 安全区 | `navigationStyle: custom` 下统一底部 **≥120rpx** 与刘海适配自检 |
|
||
| 图片 | 列表缩略图 lazy-load；报告页大图渐进 |
|
||
|
||
---
|
||
|
||
## 八、建议迭代切片（排期用）
|
||
|
||
| 切片 | 内容 | 产出 |
|
||
|------|------|------|
|
||
| S0 | UI token 与规范文档一致；扫硬编码色 | MR + 自检表 |
|
||
| S1 | 宠主 P0：首屏 CTA、空态、扫码 storeId、登录与草稿 | 专文验收项 |
|
||
| S2 | 传播：发送成功页话术 + 分享元信息 + `report_open` 埋点 | 埋点表 |
|
||
| S3 | 成片三态 + 对外文案「可变时长有上限」 | 报告页/H5 文案冻结 |
|
||
| S4 | 留资 MVP + 绑定引导 + Leads 状态 | 接口与页面状态机 |
|
||
| S5 | 列表筛选默认 done、可选取消 | 接口参数 + UI |
|
||
|
||
实际顺序可按依赖调整（埋点可与 S1/S2 并行）。**P0 必做项已拆为独立表** → [P0-研发落地清单](./P0-研发落地清单.md)。
|
||
|
||
---
|
||
|
||
## 九、修订记录
|
||
|
||
| 版本 | 日期 | 说明 |
|
||
|------|------|------|
|
||
| v1 | 2026-04-19 | 首版：汇总深度优化结论并落盘；主色与 `global.css` 对齐决策记入 §〇 |
|
||
|
||
---
|
||
|
||
*实施时以迭代看板为准；专文与主设计文档冲突处，以评审后更新专文为准。*
|