petstore-docs/产品全方位优化说明-v1.md

宠小它 — 产品全方位优化说明（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 / + 有效期	短期提示 + 埋点；中期 作废重发 优先于复杂有效期

---

一、定位、场景与核心流程

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；本期仅预留客户域字段亦可	避免前端假功能
时段已满	明确文案 + 快捷切次日	宠主专文

报告媒体类型：前后端统一枚举；优先字段化 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 对齐决策记入 §〇

---

实施时以迭代看板为准；专文与主设计文档冲突处，以评审后更新专文为准。