10 KiB
10 KiB
宠小它 — 产品全方位优化说明（v1）
角色：资深产品 + UI/UX 方向说明，与当前仓库文档、页面结构对齐，供评审与拆迭代。
日期：2026-04-19
说明：本文件为 v1 汇总落地版；细节子域仍以专文为准，避免重复维护时以专文覆盖冲突段落。
关联文档
| 文档 | 用途 |
|---|---|
| 产品设计文档 | 功能、数据模型、状态机基线 |
| 产品改进建议 | 中长期方向库 |
| 本期主线-下一步产品优化点 | 报告传播 + 成片 + 留资 + 绑定切片 |
| 宠主端预约体验优化-产品说明 | C 端预约入口与表单 |
| 前端 UI 规范 | 视觉与组件基线（已与 global.css 对齐主色与 token） |
| 洗美报告短视频成片方案 | 成片边界与工程契约 |
| P0 研发落地清单 | 发给研发的 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 落地规范
「我的」分组（老板示例）
- 经营与订单：我的订单、预约相关入口（若未合并则保留高频项）
- 店铺配置：店铺设置、服务类型、排班（中频）
- 团队与线索：员工管理、线索（Leads）
- 个人：资料、退出
每组 ≤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-研发落地清单。
九、修订记录
| 版本 | 日期 | 说明 |
|---|---|---|
| v1 | 2026-04-19 | 首版：汇总深度优化结论并落盘；主色与 global.css 对齐决策记入 §〇 |
实施时以迭代看板为准；专文与主设计文档冲突处，以评审后更新专文为准。