# Smile First 口腔护理预约小程序产品与交互设计文档

版本：v0.3
日期：2026-06-29  
范围：微信小程序 C 端、运营后台、项目排期配置、微信手机号授权与预约提交链路  
视觉依据：[口腔预约小程序前沿设计重做依据](./design-research-redesign.md)、[Smile First 五页预约交互流程设计文档](./smile-first-5-page-interaction-flow.md)

## 1. 产品定位

本小程序面向有口腔护理服务预约需求的用户，帮助用户快速完成“授权手机号、选择项目、选择日期与时间、提交预约”的闭环。体验目标是少输入、少跳转、少解释，用户在 30-60 秒内完成一次有效预约。

最新设计采用 **Smile First 高级预约体验**：先用真实、健康、自信的笑容建立情绪信任，再通过短路径的五页流程降低决策负担。

### 1.1 推荐定位

对外页面建议使用“口腔护理预约 / 口腔项目预约 / 护理时间预约”作为主叙事，不把首屏做成医院导诊、疾病筛查、医生问诊或治疗挂号入口。

如果业务主体具备医疗相关资质，可以在后台配置合规服务说明；如果资质不完整，页面文案应避免诊断、治疗承诺、处方、疗程、医生问诊等表达。

### 1.2 核心目标

- 用户点击首页预约入口并授权手机号后，可以按口腔护理项目选择前端固定生成的日期与时段。
- 用户可以在同一页面完成日期与时间段选择。
- 用户可以使用已授权手机号接收预约提醒并完成预约确认。
- 用户可以在预约成功后查看预约记录。
- 运营可以配置项目、价格文案与预约记录状态。
- 后台可以查看预约、调整状态、备注、导出和联系用户。

### 1.3 设计原则

- **Smile First**：首屏先用自信笑容建立信任，再引导用户开始预约。
- **五页短路径**：首页、选择项目、选择日期与时间、确认预约、预约成功。
- **首页无底部导航**：首页只承担品牌信任和预约入口，不使用全局 Tab Bar。
- **先授权，后选择项目**：手机号授权不在页面曝光时弹出，只在用户主动点击首页预约入口时触发；授权成功后进入项目选择。
- **日期时间合并**：日期和时间段在同一页完成，减少一步跳转。
- **文案克制可信**：少用医疗恐吓、焦虑营销和夸张效果承诺。
- **视觉高级克制**：使用暖象牙、深墨绿、松石绿、雾蓝灰和陶土红，避免常见蓝绿医疗系统感。

## 2. 平台与合规约束

### 2.1 微信手机号授权

微信手机号能力需要用户主动同意后才能获取手机号，小程序端应使用 `button open-type="getPhoneNumber"` 触发。

本项目中，手机号授权前置到首页预约入口：

- 首页曝光时不请求手机号。
- 用户点击首页 `立即预约` 或 `预约时间` 时检查手机号授权状态。
- 未授权时使用微信手机号授权，授权成功后进入项目选择页。
- 已授权时直接进入项目选择页。
- 日期与时间页不请求手机号。
- 确认预约页只展示已绑定手机号并提交预约，换绑手机号时可再次触发授权。

授权成功后，后端使用微信返回的动态凭证换取手机号，并与当前微信登录会话绑定，再进入项目选择页。授权失败或用户拒绝时，停留在首页，不创建预约草稿。

### 2.2 位置信息与门店信息

本版 C 端主流程不包含独立门店选择页，也不在首页或预约路径中请求位置授权。

设计原因：

- 最新视觉稿已移除门店相关信息，预约主路径聚焦项目与护理时间。
- 小程序路径应轻快，避免用户在完成核心预约前被位置授权或门店筛选打断。
- 若后续业务必须支持多门店，可作为二期扩展，在确认页之后或独立设置页中处理，不进入当前 MVP 主流程。

当前 MVP 不配置 `requiredPrivateInfos: ["getLocation"]`，也不在主流程中调用 `wx.getLocation`。

### 2.3 口腔行业边界

本文档以“口腔护理项目预约”为基础模型，避免把无资质业务包装成医疗服务。

可用表达：

- 口腔护理
- 护理项目
- 护理时间
- 预约提醒
- 服务通知
- 清新洁牙护理
- 美白亮齿护理

避免表达：

- 诊断
- 治疗
- 医生问诊
- 疗效保证
- 挂号
- 病例
- 术前术后

## 3. 用户角色

| 角色 | 目标 | 关键能力 |
| --- | --- | --- |
| 游客用户 | 了解品牌与预约入口 | 首页、预约入口、手机号授权说明 |
| 授权用户 | 选择项目、确认预约、查看预约记录 | 微信手机号授权、项目与时段查看、提交预约、查看/取消预约 |
| 运营人员 | 管理预约与联系用户 | 查看预约列表、修改状态、备注、导出 |
| 后台管理员 | 配置项目并查看预约记录 | 项目配置、预约管理、操作日志 |

## 4. 功能模型

### 4.1 小程序端功能

| 模块 | 功能 | MVP 要求 |
| --- | --- | --- |
| 首页 | Smile First 主视觉、预约入口、我的预约入口 | 必须 |
| 项目选择 | 分类筛选、项目列表、项目说明、价格文案、服务时长 | 必须 |
| 日期与时间 | 日期选择、固定时间段选择 | 必须 |
| 确认预约 | 展示项目、日期、时间、手机号、备注入口、预约须知 | 必须 |
| 手机号授权 | 首页预约入口微信手机号授权、授权失败重试 | 必须 |
| 预约结果 | 成功页、预约摘要、查看我的预约、返回首页 | 必须 |
| 我的预约 | 未来预约、历史预约、状态查看、取消预约 | 建议 |
| 消息提醒 | 预约提醒订阅消息 | 后续迭代 |

### 4.2 后台功能

| 模块 | 功能 | MVP 要求 |
| --- | --- | --- |
| 项目管理 | 新增/编辑/上下架项目，配置分类、服务时长、价格文案、注意事项 | 必须 |
| 排期配置 | 后台查看与维护项目排期 | 建议 |
| 预约管理 | 预约列表、筛选、状态变更、备注、导出 | 必须 |
| 用户管理 | 查看授权手机号、预约历史 | 建议 |
| 数据看板 | 预约量、转化率、项目热度、时段热度 | 后续迭代 |
| 操作日志 | 后台配置变更记录 | 建议 |

## 5. 数据模型

### 5.1 核心实体

| 实体 | 关键字段 | 说明 |
| --- | --- | --- |
| User | id, openid, unionid, phone, createdAt, lastLoginAt | 微信用户与手机号绑定 |
| ProjectCategory | id, name, sort, status | 项目分类 |
| Project | id, categoryId, name, subtitle, priceText, status, sort | 可预约护理项目 |
| ScheduleDay | id, projectId, date, status, note | 静态预约日期 |
| TimeSlot | id, scheduleDayId, startTime, endTime, status | 静态预约时段 |
| Booking | id, userId, projectId, slotId, phone, status, remark, confirmToken, createdAt | 预约单 |
| ConfigAuditLog | id, adminId, targetType, targetId, action, before, after, createdAt | 配置审计 |

### 5.2 预约状态

| 状态 | 含义 | 用户可见文案 |
| --- | --- | --- |
| pending | 已提交，待运营确认 | 待确认 |
| confirmed | 预约已确认 | 已预约 |
| cancelled_by_user | 用户取消 | 已取消 |
| cancelled_by_operator | 运营取消 | 已取消 |
| completed | 服务已完成 | 已完成 |
| expired | 超过可展示周期或运营标记失效 | 已失效 |

### 5.3 预约提交规则

- 日期与时间段由前端固定生成，不依赖后端排期接口。
- 提交预约时后端按项目、日期和开始时间确保静态时段存在。
- 同一手机号、同一项目、同一时段默认只能有一条有效预约。
- 用户修改项目后，应清空已选日期与时间段。

## 6. 核心交互流程

### 6.1 主预约流程

```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["查看我的预约 / 返回首页"]
```

### 6.2 手机号授权流程

```mermaid
flowchart TD
  A["用户点击首页立即预约"] --> B{"是否已有手机号"}
  B -- "有" --> C["进入选择项目页"]
  B -- "无" --> D["展示授权按钮：用于预约提醒与服务通知"]
  D --> E{"用户是否同意授权"}
  E -- "同意" --> F["后端换取手机号并绑定用户"]
  F --> C
  E -- "拒绝或失败" --> G["停留首页，不创建预约草稿"]
  G --> H["可重新点击立即预约发起授权"]
```

### 6.3 成功页返回流程

```mermaid
flowchart TD
  A["预约成功页"] --> B{"用户操作"}
  B -- "查看我的预约" --> C["我的预约列表"]
  B -- "返回首页" --> D["首页"]
  B -- "添加到我的日程" --> E["系统日程/提醒能力"]
  C --> D
```

成功页应使用 `redirectTo` 或清栈策略进入，避免用户返回确认页重复提交。

## 7. 页面结构

### 7.1 首页

目标：用笑容建立信任，并让用户快速进入预约路径。

页面内容：

- 顶部：微信状态栏、小程序胶囊、品牌名 Smile First。
- 主视觉：真实笑容图，文案为 `自然之力 予你自信笑容`。
- 价值说明：`温和护理 · 精致体验 · 用心陪伴`。
- 快捷入口：`预约时间`、`我的预约`。
- 主按钮：使用 `立即预约`。

交互细节：

- 首页不使用底部 Tab Bar。
- 视觉稿中的底部导航视为 AI 图残留，最终实现删除。
- 首页曝光时不弹手机号授权，不弹位置授权。
- 点击 `立即预约` 或 `预约时间`：已绑定手机号则进入项目选择页；未绑定则触发微信手机号授权，授权成功后进入项目选择页。
- 点击 `我的预约`：已绑定手机号则进入预约列表；未绑定则触发手机号授权，授权成功后进入预约列表。
- 用户拒绝手机号授权时停留首页，不进入项目选择页。

### 7.2 选择项目页

目标：让用户选择一个护理项目，不陷入过多说明。

布局建议：

- 顶部：返回按钮、标题 `选择项目`、小程序胶囊。
- 左侧分类：日常护理、深层清洁、美白亮齿、口气清新、儿童护理。
- 右侧项目列表：项目名、简短说明、价格、服务时长、选中态。
- 底部固定按钮：`下一步`。

项目卡片只展示必要信息：

- 项目名称
- 一行服务说明
- 价格文案
- 服务时长
- 单选状态

交互规则：

- 未选择项目时，`下一步` 置灰。
- 选择项目后，`下一步` 启用。
- 再次点击已选项目不取消选择。
- 切换分类不清空已选项目。
- 修改项目后清空已选日期与时间。

### 7.3 选择日期与时间页

目标：在同一页面完成日期和时间段选择，减少跳转。

布局建议：

- 顶部：返回按钮、标题 `选择日期与时间`。
- 已选摘要：`已选择：清新洁牙护理`。
- 日期区域：前端固定生成未来日期和选中日期。
- 时间段区域：展示所选日期下的固定时段。
- 底部固定按钮：`下一步`。

日期状态：

| 状态 | 表现 | 是否可点 |
| --- | --- | --- |
| 可约 | 深色日期文字 | 是 |
| 已选 | 松石绿圆形底 + 白字 | 是 |

时段状态：

| 状态 | 表现 | 是否可点 |
| --- | --- | --- |
| 可约 | 白底细边框，显示时间 | 是 |
| 已选 | 浅薄荷底或松石绿描边 | 是 |

底部按钮逻辑：

- 未选日期：禁用，文案 `请选择日期`。
- 已选日期但未选时段：禁用，文案 `请选择时间段`。
- 已选日期与时段：启用，文案 `下一步`。

### 7.4 确认预约页

目标：让用户核对项目、日期、时间和已授权手机号，并完成预约提交。

字段：

- 服务项目
- 预约日期
- 预约时间
- 服务时长
- 价格文案
- 手机号，显示已授权的脱敏手机号
- 备注，可选，默认折叠或轻入口

按钮：

- 主按钮：`确认预约`
- 次要入口：`更换手机号`

说明：

- 手机号用途文案：`用于预约提醒与服务通知`。
- 确认页不作为首次手机号授权入口，首次授权在首页预约入口完成。
- 换绑授权失败后停留当前页，保留项目、日期和时间。

编辑规则：

| 点击位置 | 返回页面 | 保留内容 |
| --- | --- | --- |
| 服务项目编辑 | 选择项目页 | 日期和时间清空 |
| 日期或时间编辑 | 选择日期与时间页 | 保留项目 |
| 手机号换绑 | 当前页 | 保留全部预约信息 |

### 7.5 预约成功页

目标：给用户确定感，并引导后续动作。

内容：

- 成功状态
- 标题：`已为你保留本次预约`
- 服务项目
- 预约日期
- 预约时间
- 服务时长
- 预约编号
- `添加到我的日程`
- `查看我的预约`
- `返回首页`

交互规则：

- 点击 `查看我的预约` 进入预约列表。
- 点击 `返回首页` 回到首页并清空当前预约草稿。
- 成功页不允许返回确认页重复提交。
- 后续迭代可加入订阅消息提醒，但订阅消息授权应单独触发。

### 7.6 我的预约页

目标：让用户能找回预约，减少客服成本。

结构：

- 未来预约
- 历史预约
- 预约详情
- 取消预约

取消规则由后台配置，例如距预约开始不足 2 小时不可自助取消，只能联系运营。

## 8. 后台配置模型

### 8.1 项目配置

字段建议：

- 项目名称
- 分类
- 简短说明
- 服务时长
- 价格展示文案
- 护理前提示
- 展示排序
- 上下架状态

注意：若无医疗资质，项目文案应避免“治疗某疾病、保证效果、医生诊断”等表达。

### 8.2 日期与时段规则

- 小程序前端固定生成未来日期。
- 每个日期展示固定时段：09:30、10:30、13:00、14:00、18:00、19:00、20:00。
- 后端不提供日期时段查询接口，也不做时段可服务状态判定。

### 8.3 后台预约管理

字段建议：

- 预约编号
- 项目
- 日期
- 开始时间
- 手机号
- 预约状态

规则：

- 运营可以筛选、确认、取消、完成预约。
- 取消预约不释放或改变时段状态。

## 9. 接口草案

### 9.1 小程序端接口

| 方法 | 路径 | 用途 |
| --- | --- | --- |
| 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` | 预约详情 |
| PATCH | `/api/bookings/:id/cancel` | 取消预约 |

`/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"
}
```

### 9.2 后台接口

| 方法 | 路径 | 用途 |
| --- | --- | --- |
| GET/POST | `/admin/projects` | 项目管理 |
| GET/POST | `/admin/categories` | 分类管理 |
| GET/POST | `/admin/schedules` | 排期配置 |
| GET | `/admin/bookings` | 预约列表 |
| PATCH | `/admin/bookings/:id/status` | 修改预约状态 |
| GET | `/admin/reports/bookings` | 预约导出与统计 |

## 10. 视觉设计方向

### 10.1 设计关键词

Smile First、高级克制、真实笑容、暖象牙瓷釉、轻护理感、强转化、五步短路径。界面应更像高端口腔护理品牌的小程序预约工具，而不是医院系统或强营销落地页。

### 10.2 色彩系统

| 用途 | 色值 | 说明 |
| --- | --- | --- |
| 页面背景 | `#F7F2EA` | 暖象牙瓷釉感，避免纯白刺眼 |
| 表面色 | `#FFFDF8` | 卡片、确认单、底部操作区 |
| 主文字 | `#12201E` | 最高强调文字 |
| 品牌色 | `#153D37` | 标题、品牌名、关键选中态文字 |
| 主操作 | `#0F6F63` | 主按钮、可约状态、步骤激活 |
| 辅助薄荷 | `#BFE7DE` | 选中底、轻提示背景 |
| 雾蓝灰 | `#DDE9EC` | 弱分区背景 |
| 暖强调 | `#AA573E` | 步骤标记、少量强调 |
| 次文字 | `#5A706B` | 说明文字 |
| 分割线 | `#D9E5DF` | 轻边框 |

使用比例：暖象牙与珍珠表面 70%，深墨绿与松石绿 22%，雾蓝灰 5%，陶土红 3%。

### 10.3 字体与排版

微信小程序端优先使用系统中文字体，保证性能和一致性。通过字号、字重和留白建立高级感：

- Hero 标题：48rpx，600。
- 页面标题：40rpx，600。
- 模块标题：32rpx，600。
- 正文：28rpx，400。
- 说明文字：24rpx，400。
- 日期与时间数字：32rpx，600。

### 10.4 组件规则

- 主按钮使用松石绿，固定在底部安全区上方，但不遮挡内容。
- 首页不使用底部导航。
- 项目卡片不使用厚阴影，使用细边线和轻背景区分。
- 日期和时段在同一页展示，选中态不能改变控件尺寸。
- 授权按钮和普通主按钮视觉一致，文案说明放在按钮上方一行小字。
- 空状态要给下一步动作：换项目、换日期、重试。

### 10.5 动效

- 页面进入使用轻微上移与透明度过渡。
- 日期和时段切换只做透明度与位移变化，不做弹跳。
- 按钮按下使用颜色层反馈，不造成布局位移。
- 预约成功页使用一次性状态动效，之后保持静态。
- 尊重系统“减少动态效果”设置。

## 11. 关键文案

| 场景 | 建议文案 |
| --- | --- |
| 首页主标题 | 选好项目，约好护理时间 |
| 首页情绪文案 | 自然之力，予你自信笑容 |
| 项目页标题 | 选择项目 |
| 日期时间页标题 | 选择日期与时间 |
| 手机号授权说明 | 用于预约提醒与服务通知 |
| 预约成功 | 已为你保留本次预约 |
| 取消预约 | 已取消本次预约 |

## 12. MVP 范围

### 12.1 必做

- 首页 Smile First 主视觉与预约入口
- 项目分类与项目列表
- 日期与时间段合并选择
- 首页预约入口手机号授权
- 预约提交与成功页
- 我的预约
- 后台项目与预约管理

### 12.2 暂缓

- 首页底部导航
- 独立门店选择页
- 位置授权
- 在线支付
- 医生排班
- 在线问诊
- 会员积分
- 复杂营销券
- AI 客服
- 多人同行预约

## 13. 验收标准

- 主流程只有 5 个页面：首页、选择项目、选择日期与时间、确认预约、预约成功。
- 首页不出现底部 Tab Bar。
- 首页点击 `立即预约` 或 `预约时间` 后先检查手机号授权。
- 已授权手机号后才能进入选择项目页。
- 日期和时间段在同一页面完成选择。
- 未授权手机号不能进入项目选择、日期与时间选择路径。
- 手机号授权由首页预约入口触发，确认预约页只展示已绑定手机号与换绑入口。
- 用户在首页拒绝手机号授权后停留首页，不创建预约草稿。
- 后台下架项目后，小程序不再展示该项目。
- 预约成功后，用户能在“我的预约”看到记录。
- 设计稿和实现稿中不出现无资质医疗承诺类文案。

## 14. 后续原型建议

第一轮原型覆盖 5 个小程序页面：

1. 首页
2. 选择项目
3. 选择日期与时间
4. 确认预约
5. 预约成功 / 我的预约入口

后台原型建议覆盖 3 个页面：

1. 项目管理
2. 排期日历
3. 预约列表

## 15. 官方能力参考

- 微信开放文档：手机号快速验证组件  
  https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
- 微信开放文档：小程序全局配置  
  https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html