rogee/wxapp-guantong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a2b76f2a3bae10e22afa82852086a01ccc19ecf3
wxapp-guantong/docs/smile-first-5-page-interaction-flow.md
T
rogee 967dcecb7e Initial commit
2026-09-22 22:51:19 +08:00

420 lines
16 KiB
Markdown
Raw Blame History

# Smile First 五页预约交互流程设计文档
版本：v0.2
日期：2026-06-29
视觉依据：`mockups/exports/smile-first-ai-visual-board-5-pages.png`
适用范围：微信小程序 C 端预约主流程
## 1. 流程定位
本流程基于五页视觉稿重构预约路径：
1. 首页
2. 选择项目
3. 选择日期与时间
4. 确认预约
5. 预约成功
核心目标是让用户从首页点击预约主入口后先完成微信手机号授权，授权成功后再进入项目选择。已授权用户可直接进入选择项目页，确认预约页只负责核对信息与提交预约。流程不再包含独立门店选择页，也不在首页使用底部导航。
主体验句：
> 选好项目，约好护理时间。
## 2. 首页底部导航约束
首页不需要底部导航。
视觉稿中的首页底部 Tab Bar 仅视为 AI 图残留，不进入最终交互实现。最终首页底部只能出现与当前预约路径相关的入口，例如“预约时间”“我的预约”快捷卡或一个主按钮，不能出现全局导航栏。
实现约束：
- 首页不作为小程序 `tabBar` 页面配置。
- 如果项目已有全局 `tabBar`，首页进入时需要隐藏，例如在页面 `onShow` 中调用 `wx.hideTabBar({ animation: false })`。
- 首页底部不得出现“首页 / 服务 / 日程 / 我的”等全局 Tab。
- “我的预约”可以作为内容区快捷卡或右上角入口存在，但不是 Tab Bar。
- 首页主要操作使用 `立即预约`，点击后先检查手机号授权状态，授权成功后再进入 `选择项目`，不要把用户分流到多个平级栏目。
## 3. 主流程图
```mermaid
flowchart TD
A["进入首页"] --> B{"用户选择入口"}
B -- "点击立即预约 / 预约时间" --> P{"是否已授权手机号"}
B -- "点击我的预约" --> M{"是否已授权手机号"}
P -- "否" --> Q["微信手机号授权"]
P -- "是" --> C["选择项目页"]
Q -- "授权成功" --> C
Q -- "拒绝或失败" --> B
M -- "是" --> N["我的预约列表"]
M -- "否" --> O["微信手机号授权"]
O -- "授权成功" --> N
O -- "拒绝或失败" --> B
C --> D{"是否已选择项目"}
D -- "否" --> C
D -- "是，点击下一步" --> E["选择日期与时间页"]
E --> F{"是否已选择日期和时段"}
F -- "否" --> E
F -- "是，点击下一步" --> G["确认预约页"]
G --> J["提交预约"]
J -- "成功" --> K["预约成功页"]
J -- "失败" --> G
K --> L["查看我的预约 / 返回首页"]
```
## 4. 页面 01：首页
### 4.1 页面目标
用真实笑容和品牌气质建立信任，让用户快速理解这是一个口腔护理预约小程序，并进入预约路径。
### 4.2 页面结构
| 区域 | 内容 | 交互 |
| --- | --- | --- |
| 顶部状态区 | 微信状态栏、小程序胶囊、品牌名 Smile First | 胶囊为系统控件，无业务动作 |
| 主视觉区 | 人物笑容图、主文案 `自然之力 予你自信笑容` | 图片不点击 |
| 价值说明 | `温和护理 · 精致体验 · 用心陪伴` | 仅展示 |
| 快捷入口 | `预约时间`、`我的预约` 两个内容卡 | 分别跳转预约路径和预约列表 |
| 主按钮 | `立即预约` | 先触发手机号授权检查，授权成功后跳转选择项目页 |
### 4.3 首页底部处理
最终首页删除底部 Tab Bar。若保留两个快捷卡，则它们属于页面内容，不属于固定导航。
建议底部结构：
```text
[预约时间] [我的预约]
[立即预约]
```
页面滚动到底部时，主按钮可以固定在底部安全区上方；如果首页内容较短，也可以作为普通按钮放在快捷卡下方。
### 4.4 入口规则
| 用户动作 | 结果 |
| --- | --- |
| 点击 `立即预约` | 已绑定手机号时进入选择项目页；未绑定时触发微信手机号授权，授权成功后进入选择项目页 |
| 点击 `预约时间` | 与 `立即预约` 一致；若已绑定且已有未完成草稿，可恢复到最近一步 |
| 点击 `我的预约` | 已绑定手机号时进入我的预约列表；未绑定时触发手机号授权，授权成功后进入预约列表 |
| 拒绝或授权失败 | 停留首页，展示 `用于预约提醒与服务通知` 说明，不创建预约草稿 |
| 直接关闭小程序 | 不产生预约草稿 |
### 4.5 状态
| 状态 | 页面表现 |
| --- | --- |
| 新用户 | 显示标准首屏与预约入口 |
| 有未完成选择 | 已授权用户在快捷入口下方提示 `继续上次预约`；未授权用户先完成手机号授权 |
| 有未来预约 | `我的预约` 卡显示 `查看预约记录` |
## 5. 页面 02：选择项目
### 5.1 页面目标
让用户选择一个口腔护理项目，并理解项目价格、时长和基础说明。
### 5.2 页面结构
| 区域 | 内容 | 交互 |
| --- | --- | --- |
| 顶部导航 | 返回按钮、标题 `选择项目`、小程序胶囊 | 返回首页 |
| 左侧分类 | 日常护理、深层清洁、美白亮齿、口气清新、儿童护理 | 点击切换项目列表 |
| 项目列表 | 项目名、简短说明、价格、时长、单选状态 | 点击项目卡选中 |
| 底部按钮 | `下一步` | 已选项目后进入选择日期与时间页 |
### 5.3 项目卡字段
| 字段 | 示例 | 说明 |
| --- | --- | --- |
| 项目名称 | `清新洁牙护理` | 后台配置 |
| 项目说明 | `温和清洁 · 清新口气` | 不写诊断、治疗承诺 |
| 价格 | `¥398` | 可配置为 `到店咨询` 或价格文本 |
| 时长 | `60分钟` | 用于后续确认 |
| 选中态 | 右上角实心勾选 | 单选 |
### 5.4 交互规则
- 用户首次进入时默认不选中项目，除非从首页恢复草稿。
- 点击项目卡任意区域即可选中。
- 再次点击已选项目不取消，保持单选稳定性。
- 切换分类后，如果已选项目不属于当前分类，底部仍显示已选项目摘要。
- `下一步` 在未选项目时置灰；已选项目后启用。
### 5.5 异常状态
| 场景 | 处理 |
| --- | --- |
| 项目列表为空 | 显示 `当前分类暂无可预约项目`，提供切换分类 |
| 项目下架 | 不展示；若草稿中项目已下架，提示重新选择 |
| 价格暂不可展示 | 使用 `到店咨询`，不阻断流程 |
## 6. 页面 03：选择日期与时间
### 6.1 页面目标
把日期和时间段合并在一个页面完成，减少一步跳转。用户在同一页先选日期，再选该日期下的时段。
### 6.2 页面结构
| 区域 | 内容 | 交互 |
| --- | --- | --- |
| 顶部导航 | 返回按钮、标题 `选择日期与时间`、小程序胶囊 | 返回选择项目页 |
| 已选摘要 | `已选择：清新洁牙护理` | 点击可返回项目页修改 |
| 日期区域 | 前端固定生成未来日期和选中日期 | 点击日期加载固定时段 |
| 时段区域 | `选择时间段`，展示 09:30、10:30、13:00 等固定时段 | 点击时段选中 |
| 底部按钮 | `下一步` | 已选日期与时段后进入确认预约页 |
### 6.3 交互顺序
1. 用户进入页面后，前端按所选项目生成固定日期与时段。
2. 默认选中第一个日期。
3. 用户点击某个日期后，刷新下方时段。
4. 用户点击时段后，按钮启用。
5. 点击 `下一步` 后进入确认预约页。
### 6.4 日期状态
| 状态 | 表现 | 是否可点 |
| --- | --- | --- |
| 可约 | 深色日期文字 | 是 |
| 已选 | 松石绿圆形底 + 白字 | 是 |
### 6.5 时段状态
| 状态 | 表现 | 是否可点 |
| --- | --- | --- |
| 可约 | 白底细边框，显示时间 | 是 |
| 已选 | 松石绿描边或浅薄荷底 | 是 |
### 6.6 底部按钮逻辑
| 条件 | 按钮状态 |
| --- | --- |
| 未选日期 | 禁用，文案 `请选择日期` |
| 已选日期但未选时段 | 禁用，文案 `请选择时间段` |
| 已选日期与时段 | 启用，文案 `下一步` |
### 6.7 空状态
| 场景 | 文案 | 动作 |
| --- | --- | --- |
| 草稿缺少项目 | 返回选择项目 | 重新选择项目 |
## 7. 页面 04：确认预约
### 7.1 页面目标
让用户核对项目、日期、时间和已授权手机号，并完成预约提交。
### 7.2 页面结构
| 区域 | 内容 | 交互 |
| --- | --- | --- |
| 顶部导航 | 返回按钮、标题 `确认预约`、小程序胶囊 | 返回日期与时间页 |
| 预约信息卡 | 服务项目、预约日期、预约时间、服务时长、价格 | 可点击 `编辑` 返回对应步骤 |
| 手机号信息卡 | 已绑定手机号、换绑入口 | 展示脱敏手机号；换绑时二次触发 `getPhoneNumber` |
| 预约须知 | 准时提醒、取消规则、联系客服 | 只展示 |
| 底部按钮 | `确认预约` | 已授权手机号后提交 |
### 7.3 手机号规则
手机号首次授权前置到首页预约入口：点击 `立即预约` 或 `预约时间` 时触发授权检查，授权成功后才进入选择项目页。确认预约页默认只展示已绑定手机号，不再作为首次授权入口。
| 用户状态 | 页面表现 | 主按钮 |
| --- | --- | --- |
| 已授权手机号 | 显示脱敏手机号 | `确认预约` |
| 手机号失效或被清空 | 显示重新授权说明 | `返回首页授权` 或触发换绑 |
| 换绑手机号 | 保留预约信息并重新授权 | 授权成功后更新手机号 |
实现方式：
- 首页预约主按钮在未授权时使用 `button open-type="getPhoneNumber"`。
- 授权成功后，后端换取手机号并绑定当前微信会话，再跳转选择项目页。
- 确认预约页的底部主按钮为普通提交按钮，不承担首次授权。
- 用户在首页拒绝授权时，停留首页，不进入项目选择页，也不创建预约草稿。
### 7.4 编辑规则
| 点击位置 | 返回页面 | 保留内容 |
| --- | --- | --- |
| 服务项目编辑 | 选择项目页 | 已选日期和时间清空 |
| 日期或时间编辑 | 选择日期与时间页 | 保留已选项目 |
| 手机号换绑 | 当前页 | 保留全部预约信息，授权成功后更新手机号 |
### 7.5 提交规则
1. 点击确认预约。
2. 前端检查项目、日期、时间、手机号是否完整。
3. 调用创建预约接口。
4. 接口成功后进入预约成功页。
5. 接口失败时停留当前页，展示失败原因。
如果进入确认页时发现手机号缺失或授权状态失效，不能直接提交预约，应提示用户返回首页重新授权，或使用当前页换绑入口完成授权后再提交。
建议幂等：
- 每次进入确认页生成 `confirmToken`。
- 提交接口带上 `confirmToken`，避免重复点击生成多条预约。
- 主按钮点击后进入 loading，接口返回前禁用。
## 8. 页面 05：预约成功
### 8.1 页面目标
给用户明确完成感，并提供预约记录、日程添加和返回首页入口。
### 8.2 页面结构
| 区域 | 内容 | 交互 |
| --- | --- | --- |
| 成功状态 | 勾选图标、标题 `已为你保留本次预约` | 静态展示 |
| 说明文案 | `期待为你带来美好的护理体验` | 静态展示 |
| 预约信息卡 | 服务项目、预约日期、预约时间、服务时长、预约编号 | 静态展示 |
| 辅助按钮 | `添加到我的日程` | 调起日历或提醒能力 |
| 主按钮 | `查看我的预约` | 进入预约记录 |
| 次按钮 | `返回首页` | 回到首页 |
### 8.3 成功后动作
| 用户动作 | 结果 |
| --- | --- |
| 点击 `查看我的预约` | 进入我的预约列表 |
| 点击 `返回首页` | 返回首页，清空当前预约草稿 |
| 点击 `添加到我的日程` | 调起系统日历或小程序提醒能力 |
| 直接关闭小程序 | 预约已保存 |
### 8.4 失败回退
若创建预约成功但成功页数据加载失败：
- 展示基础成功态。
- 提示 `预约已提交，可在我的预约中查看`。
- 主按钮仍为 `查看我的预约`。
## 9. 页面跳转与返回规则
| 当前页 | 返回按钮行为 | 手势返回行为 |
| --- | --- | --- |
| 首页 | 退出小程序或返回来源页 | 同系统默认 |
| 选择项目 | 返回首页 | 保留或清空草稿由业务配置 |
| 选择日期与时间 | 返回选择项目 | 保留已选项目 |
| 确认预约 | 返回选择日期与时间 | 保留项目、日期、时间 |
| 预约成功 | 返回首页，不回到确认页 | 禁止返回重复提交状态 |
成功页需要使用重定向或清栈策略，避免用户从成功页返回确认页后重复提交。
建议：
- 从确认页到成功页使用 `wx.redirectTo`。
- 从成功页返回首页使用 `wx.reLaunch` 或清空预约草稿后 `wx.navigateBack` 到首页。
## 10. 预约草稿状态
前端维护一个轻量预约草稿：
| 字段 | 来源 | 清空时机 |
| --- | --- | --- |
| `projectId` | 选择项目页 | 修改项目或预约成功 |
| `projectName` | 选择项目页 | 修改项目或预约成功 |
| `date` | 选择日期与时间页 | 修改项目或预约成功 |
| `timeSlotId` | 选择日期与时间页 | 修改项目、修改日期或预约成功 |
| `timeText` | 选择日期与时间页 | 修改项目、修改日期或预约成功 |
| `phone` | 首页预约入口手机号授权 | 用户换绑或退出账号 |
| `confirmToken` | 确认预约页 | 提交成功或确认页销毁 |
草稿保存建议：
- 当前会话内使用页面状态或全局 store。
- 可选使用本地缓存保存未完成草稿，但过期时间不超过 30 分钟。
- 日期与时间由前端固定生成，不依赖后端排期校验。
## 11. 接口建议
| 方法 | 路径 | 用途 |
| --- | --- | --- |
| GET | `/api/app/bootstrap` | 首页文案、推荐项目、用户预约概览 |
| GET | `/api/projects` | 获取项目分类和项目列表 |
| POST | `/api/auth/wechat/session` | 微信登录换取会话 |
| POST | `/api/auth/wechat/phone` | 手机号授权换取手机号 |
| POST | `/api/bookings` | 创建预约，提交项目、日期、开始时间和静态时段 ID |
| GET | `/api/bookings` | 我的预约列表 |
| GET | `/api/bookings/:id` | 预约详情 |
`/api/bookings` 入参建议：
```json
{
"project_id": "project_fresh_clean",
"date": "2026-07-02",
"start_time": "09:30",
"slot_id": "slot_day_project_fresh_clean_20260702_0930",
"phone": "13900000000"
}
```
## 12. 埋点建议
| 事件 | 触发点 | 关键属性 |
| --- | --- | --- |
| `home_view` | 首页曝光 | source |
| `home_start_booking_click` | 点击预约入口 | entry |
| `project_select` | 选择项目 | projectId, category |
| `project_next_click` | 项目页下一步 | projectId |
| `date_select` | 选择日期 | projectId, date |
| `slot_select` | 选择时段 | projectId, date, slotId |
| `confirm_view` | 确认页曝光 | projectId, date, slotId |
| `phone_auth_start` | 点击手机号授权 | entry, projectId 可选 |
| `phone_auth_success` | 手机号授权成功 | entry, projectId 可选 |
| `phone_auth_fail` | 手机号授权失败 | reason |
| `booking_submit_success` | 预约成功 | bookingId, projectId |
| `booking_submit_fail` | 预约失败 | reason |
## 13. 合规与文案边界
本流程使用“口腔护理预约”叙事，不使用医疗诊疗叙事。
推荐文案：
- `预约护理时间`
- `选择日期与时间`
- `授权手机号用于预约提醒`
- `已为你保留本次预约`
- `查看我的预约`
避免文案：
- `诊断`
- `治疗`
- `医生问诊`
- `疗效保证`
- `病历`
- `到院`
- `挂号`
手机号授权说明：
> 用于预约提醒与服务通知。
不要写成：
- `必须授权手机号`
- `不授权无法继续使用`
- `登录后才能查看`
## 14. 验收标准
- 主流程只有 5 个页面：首页、选择项目、选择日期与时间、确认预约、预约成功。
- 首页不出现底部 Tab Bar。
- 首页点击 `立即预约` 或 `预约时间` 后先检查手机号授权。
- 已授权手机号后才能进入选择项目页。
- 日期和时间段在同一页面完成选择。
- 未选择项目时不能进入日期与时间页。
- 未选择日期或时间段时不能进入确认预约页。
- 确认预约页不作为首次手机号授权入口，只展示已绑定手机号与换绑入口。
- 用户在首页拒绝手机号授权后停留首页，不进入项目选择页。
- 预约成功后不能通过返回键回到确认页重复提交。
- 页面文案不出现医疗诊断、治疗承诺、医生问诊等高风险表达。
Reference in New Issue View Git Blame Copy Permalink