20 KiB
20 KiB
Smile First 口腔护理预约小程序产品与交互设计文档
版本：v0.3
日期：2026-06-29
范围：微信小程序 C 端、运营后台、项目排期配置、微信手机号授权与预约提交链路
视觉依据：口腔预约小程序前沿设计重做依据、Smile First 五页预约交互流程设计文档
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 主预约流程
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 手机号授权流程
flowchart TD
A["用户点击首页立即预约"] --> B{"是否已有手机号"}
B -- "有" --> C["进入选择项目页"]
B -- "无" --> D["展示授权按钮：用于预约提醒与服务通知"]
D --> E{"用户是否同意授权"}
E -- "同意" --> F["后端换取手机号并绑定用户"]
F --> C
E -- "拒绝或失败" --> G["停留首页，不创建预约草稿"]
G --> H["可重新点击立即预约发起授权"]
6.3 成功页返回流程
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 入参建议：
{
"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 个小程序页面：
- 首页
- 选择项目
- 选择日期与时间
- 确认预约
- 预约成功 / 我的预约入口
后台原型建议覆盖 3 个页面：
- 项目管理
- 排期日历
- 预约列表