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

16 KiB
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. 主流程图

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。若保留两个快捷卡，则它们属于页面内容，不属于固定导航。

建议底部结构：

[预约时间] [我的预约]

[立即预约]

页面滚动到底部时，主按钮可以固定在底部安全区上方；如果首页内容较短，也可以作为普通按钮放在快捷卡下方。

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 入参建议：

{
  "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