119 lines
9.0 KiB
Markdown
119 lines
9.0 KiB
Markdown
# 宠主端（客户版）预约体验优化 — 产品说明
|
||
|
||
> 目标：围绕「想给宠物做洗护/美容」的真实动机，缩短**从打开小程序到提交预约**的路径，降低决策与操作成本。
|
||
> 现状对齐：宠主角色首页为「服务预约」列表 + 状态 Tab + **右下角「+」** 进入 `CustAppointmentCreate`（门店、宠物、类型、服务、时段、备注）。
|
||
|
||
---
|
||
|
||
## 1. 典型进入场景（先对齐人怎么来）
|
||
|
||
| 场景 | 用户心智 | 当前易卡点 | 优化方向（产品层） |
|
||
|------|----------|------------|-------------------|
|
||
| **A. 主动搜小程序** | 记得店名/品牌，想约服务 | 首屏是列表，**「+」在角落**，新用户未必第一眼发现 | 首屏强化**主行动**：大按钮「预约服务」与 FAB 二选一或主次分明 |
|
||
| **B. 微信聊天里点小程序卡片/分享** | 被朋友或店员推荐 | 若落在首页，路径同 A；若**无登录态**需先登录 | 明确**分享落地页**：能否直达「新建预约」或带**默认门店** |
|
||
| **C. 扫门店码 / 桌贴** | 人在店附近或已到店 | 期望**默认就是本店**，少选一步 | **扫码参数带 storeId** → 预约页预填门店且可折叠展示「本店」 |
|
||
| **D. 看完服务报告 / 海报再来** | 信任已建立，想复购 | 从报告链路过来的**深链**若只到首页，打断情绪 | 报告页 CTA：**「为 TA 再约一次」** → 带宠物名/门店进预约（字段能预填则预填） |
|
||
| **E. 老客复约** | 同宠、同店、同类服务 | 每次重填信息易烦 | **默认选中上次门店+宠物档案+常用服务**；一键改时间即可提交 |
|
||
|
||
**结论**：优化不是单页微调，而是 **入口（怎么进）+ 首屏（第一眼干什么）+ 表单（填什么、默认什么）** 三条线一起收紧。
|
||
|
||
---
|
||
|
||
## 2. 首屏信息架构（宠主首页）
|
||
|
||
**问题**：列表 + Tab 偏「管理已有订单」，新用户动机是**先下单**，容易感到「还没约就要先看列表」。
|
||
|
||
**角色边界：数据卡片（重要）**
|
||
|
||
- **宠主端（customer）不建议展示「门店经营视角」的四格看板**（如今日到店数、全店进行中、本周完成单量等）。这类指标本质是 **B 端/店长工作台** 信息，容易让宠主感到「进了后台」，且与「我要约我家宠物」的心智不一致。
|
||
- **若需在首屏给宠主一点「状态感」**，应用 **「与我相关」** 的轻量摘要即可，例如：「你有 1 个待开始预约」或一行状态 + 入口「查看」，而不是多格 KPI。
|
||
- **门店/老板/员工端**保留或强化该类看板，与宠主端**信息架构分离**（同一 `Home` 内按 `role` 分支即可，产品规则上写清）。
|
||
|
||
**建议**
|
||
|
||
1. **分区**：上区 **「我要预约」主按钮**（或保留 FAB 但配一句固定文案「点这里新建预约」首次引导）；下区才是「我的预约」与 Tab。
|
||
2. **文案**：副标题从纯说明型改为**价值型**一句，统一为「在线选时段，到店更省心」（不写「到店不排队」等无容量模型承诺；若门店未来上线排队/叫号能力再单独评估）。
|
||
3. **空列表**：空态时 **主按钮置顶**，避免「空白 + 小加号」的冷启动挫败。
|
||
|
||
---
|
||
|
||
## 3. 新建预约表单（`CustAppointmentCreate`）— 减少步数与记忆负担
|
||
|
||
**字段逻辑（保持业务真实）**：门店、宠物、类型、服务、时段为核心；备注可选。
|
||
|
||
**优化建议**
|
||
|
||
| 方向 | 说明 |
|
||
|------|------|
|
||
| **门店** | 若仅一家合作店或扫码带店：**默认选中且可折叠**（「预约门店：××店 [更换]」），减少首屏高度。多店时保留选择器。 |
|
||
| **宠物** | 已有「我的宠物」时：**默认最近使用的一只**；单宠自动填名。无档案时仍手动输入，但可提示「保存后可下次一键选」。 |
|
||
| **服务类型** | **常用服务前置**（根据上次预约或门店热门 Top3），其余进「更多」。 |
|
||
| **时段** | 保持日期 + 时段联动；**无可用时段**时明确文案（「当日已满，试试明天」）+ 快捷切日，避免空白不知所措。 |
|
||
| **提交** | 主按钮固定底部或表单末；**防重复提交**与 loading 已有则保持；成功页 **一行确认**（时间、店名、宠物）+ 「查看预约」+ 「再约一单」可选。 |
|
||
|
||
---
|
||
|
||
## 4. 登录与身份（体验关键）
|
||
|
||
> **本期冻结策略（P0）**：**提交时登录 + guest 草稿恢复**。未登录可浏览首页与填写预约表单，提交时再调起登录，登录成功后回到预约页并保留草稿。草稿 key 不依赖 `userInfo.id`，避免出现 `userId: undefined`。
|
||
|
||
- **冻结策略**：未登录允许浏览首页/极简介绍，**点击「预约」可进入表单填写**；提交时若仍为未登录，则跳转登录页（带 `redirect` 回预约页），登录成功后**回到预约页并保留已填内容**（避免白填）。
|
||
- 草稿存储：未登录时写入 guest 草稿 key（`petstore_appt_draft_guest`）；登录后优先读 guest 草稿并恢复，恢复成功后删除 guest 草稿；登录态用户可继续使用按 `userId` 维度的草稿 key。
|
||
- 预约时段：以门店营业时间、半小时档、已占用档和已过时间为准；同一门店同一时间档最多一单。对外文案统一「在线选时段，到店更省心」，不承诺排队/叫号能力。
|
||
- 若业务未来强制「进入预约页即登录」，则需在 README 与本节同步更新冻结策略，并保留草稿恢复逻辑。
|
||
|
||
---
|
||
|
||
## 5. 与 Tab /「我的」的关系
|
||
|
||
- **首页 Tab**（待开始/服务中/已完成）：适合老客查进度；新客可弱化认知成本，用文案「下面可查看已提交的预约」。
|
||
- **我的**：宠物档案、历史报告（若已开放）与预约形成闭环；产品上可规划 **「从档案一键预约」**，减少重复录入。
|
||
|
||
---
|
||
|
||
## 6. 分期建议（便于研发排期）
|
||
|
||
| 阶段 | 内容 | 价值 |
|
||
|------|------|------|
|
||
| **P0** | 首屏主按钮 + 空列表强引导；扫码/参数 **storeId** 预填门店（含小程序码 `scene` 解码）；登录策略冻结为「提交时登录 + guest 草稿恢复」 | 最快降低「找不到入口」和「多店选错」 |
|
||
| **P1** | 默认最近宠物/最近服务；时段不可用时的引导 | 提升复购与填单效率 |
|
||
| **P2** | 报告/海报深链「再约一次」；常用服务排序 | 与增长、留资主线联动 |
|
||
|
||
---
|
||
|
||
## 7. 验收关注点（非功能清单）
|
||
|
||
- **新用户**：首次打开 → 能在 **2 次有效点击内**到达可提交的预约表单（含必要登录）。
|
||
- **老用户**：复约场景下，**门店+宠物**默认正确率主观可用（可后续用数据验证）。
|
||
- **异常**：无时段、未登录、网络失败均有**可理解提示**，不出现静默失败。
|
||
|
||
---
|
||
|
||
## 8. 相关文档
|
||
|
||
- 《产品设计文档》§5.2 预约、第二章闭环。
|
||
- 《产品改进建议》「宠主端缺失」「自助预约 + 门店确认」中长期方向。
|
||
- 实现以当前 `Home.vue` / `CustAppointmentCreate.vue` 为基线迭代，**具体路由与参数名由研发定**。
|
||
|
||
---
|
||
|
||
## 9. 界面气质评审（为何「不够优雅」）
|
||
|
||
> 基于宠主首页典型稿：**主标题区 +「预约服务」+ 四格数据 + Tab + 列表/空态「立即预约」+ 右下角「+」**。
|
||
|
||
**这不是「产品文档里唯一理想稿」**，而是「主行动显性化」方向下的一种实现；**优雅感**更多取决于层级是否干净，当前稿常见问题在于：
|
||
|
||
| 问题 | 说明 | 优雅化方向 |
|
||
|------|------|------------|
|
||
| **预约入口重复** | 同屏出现「预约服务」「立即预约」「+」**三条路径**，用户要下意识选一条，认知负担上升 | **只保留一个主 CTA**（推荐：首屏大按钮或空态主按钮二选一）；FAB 与顶栏按钮**不要并存**，或 FAB 降级为老用户习惯入口并弱化样式 |
|
||
| **四格统计偏「店内看板」** | 「今日到店 / 进行中 / 待开始 / 本周完成」对**店长**友好，对**宠主**容易像后台；且占首屏纵向空间 | **宠主端原则上不展示该区块**（见 §2「角色边界」）；仅 B 端保留。若宠主端要状态感，用**与我相关**的一行摘要替代 |
|
||
| **Tab + 空态再一按钮** | 逻辑正确但层级多：先理解 Tab，再读空态，再点「立即预约」 | 空态时**弱化 Tab 视觉权重**（或默认选中「待开始」并一句话说明），**只强调一个「去预约」** |
|
||
| **副文案与标签** | 「开剪前」等偏业内说法，宠主可读性一般 | **全局措辞**：对外统一「未开始服务」「到店前」等（与《产品改进建议》措辞同步原则一致） |
|
||
|
||
**更「优雅」的宠主首页通常长这样（原则，非唯一稿）**：
|
||
**一眼一件事**——「约服务」；**数字是配角**；**列表是结果**，不抢第一步。
|
||
|
||
---
|
||
|
||
*本文为产品侧交互与信息架构建议，定稿后与研发评审可行性（尤其小程序分享落地、扫码参数、登录态）。*
|