rogee/wxapp-guantong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
rogee
2026-09-22 22:51:19 +08:00
commit 967dcecb7e
80 changed files with 10762 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design-elements.md
+55
View File
@@ -0,0 +1,55 @@
# Smile First 设计元素提取清单
来源：`docs/smile-first-ai-visual-board-5-pages.png`
尺寸：`1692 x 929`
## 视觉原则
- 首页删除视觉稿里的底部 tabBar，只保留内容区入口与主按钮。
- 首页 `立即预约` 先触发手机号授权检查，授权成功后进入项目选择；确认预约页只展示已授权手机号。
- 页面文案保持口腔护理预约叙事，不使用诊疗、问诊、疗效承诺类表达。
## 色彩 token
| 用途 | 色值 |
| --- | --- |
| 页面背景 | `#F7F2EA` |
| 表面色 | `#FFFDF8` |
| 主文字 | `#12201E` |
| 品牌色 | `#153D37` |
| 主操作 | `#0F6F63` |
| 辅助薄荷 | `#BFE7DE` |
| 雾蓝灰 | `#DDE9EC` |
| 暖强调 | `#AA573E` |
| 次文字 | `#5A706B` |
| 分割线 | `#D9E5DF` |
## 已裁切资产
| 资产 | 输出路径 | 裁切坐标 |
| --- | --- | --- |
| 首页参考屏 | `miniapp/assets/reference/home-screen.png` | `(55, 245, 333, 835)` |
| 项目页参考屏 | `miniapp/assets/reference/projects-screen.png` | `(379, 245, 653, 835)` |
| 日期时间参考屏 | `miniapp/assets/reference/schedule-screen.png` | `(704, 245, 979, 835)` |
| 确认预约参考屏 | `miniapp/assets/reference/confirm-screen.png` | `(1030, 245, 1305, 835)` |
| 成功页参考屏 | `miniapp/assets/reference/success-screen.png` | `(1356, 245, 1630, 835)` |
| 首页笑容主图 | `miniapp/assets/extracted/home-hero-smile.png` | `(56, 309, 332, 562)` |
| 成功勾选图标 | `miniapp/assets/extracted/success-check.png` | `(1430, 322, 1530, 402)` |
| 品牌印章 | `miniapp/assets/extracted/brand-seal.png` | `(1340, 55, 1438, 154)` |
| 首页预约图标 | `miniapp/assets/extracted/icon-calendar.png` | `(112, 668, 146, 704)` |
| 我的预约图标 | `miniapp/assets/extracted/icon-booking-card.png` | `(238, 668, 272, 704)` |
| 底部叶片与瓷碗 | `miniapp/assets/extracted/bottom-leaves-bowl.png` | `(0, 836, 268, 929)` |
| 右下织物材质 | `miniapp/assets/extracted/bottom-right-fabric.png` | `(1308, 802, 1692, 929)` |
预览图：`docs/extracted-assets-preview.png`
## 小程序页面映射
| 视觉稿页面 | 实现路径 |
| --- | --- |
| 首页 | `miniapp/pages/index/index` |
| 选择项目 | `miniapp/pages/projects/projects` |
| 选择日期与时间 | `miniapp/pages/schedule/schedule` |
| 确认预约 | `miniapp/pages/confirm/confirm` |
| 预约成功 | `miniapp/pages/success/success` |
| 我的预约承接 | `miniapp/pages/bookings/bookings` |
docs/design-research-redesign.md
+108
View File
@@ -0,0 +1,108 @@
# 口腔预约小程序前沿设计重做依据
版本：v0.2
日期：2026-06-28
## 1. 这次不再继续做“多版换皮”
上一轮的问题不是颜色不够好，而是结构仍然像常见 AI 拼板：手机壳、卡片、圆角按钮、几组时间块并排。它能表达功能，但没有独特的产品语言，也没有让用户产生“这是一个值得信任的口腔护理预约体验”的感受。
最新重做采用一个更直接的强概念：**Smile First 高级预约体验**。
用户先被一个自信、健康的笑容建立情绪信任，点击 `立即预约` 后完成手机号授权，再通过“步骤 1/3、2/3、3/3”降低心理负担。页面从“授权手机号”到“选择项目”再到“选择日期与确认”，每一步只要求用户完成一个清楚动作。
## 2. 互联网参考结论
### 2.1 微信小程序设计原则
参考：微信小程序设计规范镜像页面
https://sec-cdn.static.xiaomi.net/secStatic/groups/miui-sec/mukuashi/miui-wxopen-smcode/design/
可落地原则：
- 每个页面只保留一个明确重点。
- 减少与用户目标无关的视觉元素。
- 权限请求要尊重用户知情权与操作权。
- 小程序应轻快，路径要短，用户进入页面后要迅速知道下一步。
对本项目的转化：
- 首页重点不再是品牌大海报，而是“用笑容建立信任，然后点击立即预约授权手机号”。
- 预约页重点不再是项目卡片堆叠，而是“步骤提示 + 日期路径”。
- 手机号授权不在页面曝光时打断用户，而是在用户主动点击 `立即预约` 时承接预约意图。
### 2.2 表单与转化流程
参考：NN/g 表单可用性建议
https://www.nngroup.com/articles/web-form-design/
参考：Baymard Checkout UX 与减少表单字段
https://baymard.com/blog/current-state-of-checkout-ux
https://baymard.com/blog/checkout-flow-average-form-fields
可落地原则：
- 表单要短，尽量只询问完成任务必需的信息。
- 相关字段要视觉分组。
- 移动端优先单列推进，不打断垂直阅读和操作节奏。
- 账户创建或登录应延后到真正需要的节点。
对本项目的转化：
- 用户只需要选择：项目、日期时段。
- 备注默认不出现，作为确认页轻入口。
- 手机号授权前置到首页预约入口，授权成功后才进入项目选择。
- 确认页只保留项目、时间、已授权手机号和“确认预约”按钮，让用户自然核对。
### 2.3 前沿视觉语言
参考：Material 3 Expressive
https://m3.material.io/
https://m3.material.io/blog/building-with-m3-expressive
参考：Google Design 关于 expressive design 的说明
https://design.google/library/expressive-material-design-google-research
参考：Apple Human Interface Guidelines / Liquid Glass 材质方向
https://developer.apple.com/design/human-interface-guidelines/materials
https://developer.apple.com/documentation/technologyoverviews/liquid-glass
可落地原则：
- 前沿不是“更多渐变”，而是用色彩、形状、尺寸、动效和容器关系帮助用户更快理解界面。
- 材质感应服务于层级，不是到处玻璃拟态。
- Expressive UI 要帮助用户达成目标，而不是只制造视觉噪音。
对本项目的转化：
- 使用“暖象牙 + 深墨绿 + 松石绿 + 雾蓝灰 + 陶土红”的品牌色，不使用常见蓝绿渐变。
- 用“笑容背景、步骤提示、统一下一步按钮”做记忆点。
- 只在关键操作区使用材质层：背景图、已选状态、确认动作。
- 按钮统一为“下一步”，降低判断成本。
## 3. 新设计原则
### 3.1 结构
- 首页：让用户先感受到自信笑容，再点击 `立即预约` 完成手机号授权。
- 选时间：以日期路径为主轴，不让用户在卡片之间找时段。
- 确认预约：核对项目、时间和已授权手机号，直接提交预约。
### 3.2 视觉
- 背景像牙瓷釉面，不用纯白；加入雾蓝灰和暖象牙，避免单一绿色。
- 深墨绿承担品牌与主文字。
- 松石绿承担主操作，陶土红只用于步骤标记。
- 用真实笑容图、轻材质层、低对比边线构成层次。
### 3.3 文案
- 少解释功能，多告诉用户当前能做什么。
- 避免医疗诊断、治疗承诺、焦虑营销。
- 手机号用途写清楚：预约确认与到店提醒。
## 4. 产物
- 当前产品与交互设计：`docs/product-design.md`
- 五页交互流程文档：`docs/smile-first-5-page-interaction-flow.md`
- 当前五页视觉稿：`mockups/exports/smile-first-ai-visual-board-5-pages.png`
docs/extracted-assets-preview.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

docs/product-design.md
+567
View File
@@ -0,0 +1,567 @@
# 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
docs/smile-first-5-page-interaction-flow.md
+419
View File
@@ -0,0 +1,419 @@
# 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。
- 首页点击 `立即预约` 或 `预约时间` 后先检查手机号授权。
- 已授权手机号后才能进入选择项目页。
- 日期和时间段在同一页面完成选择。
- 未选择项目时不能进入日期与时间页。
- 未选择日期或时间段时不能进入确认预约页。
- 确认预约页不作为首次手机号授权入口，只展示已绑定手机号与换绑入口。
- 用户在首页拒绝手机号授权后停留首页，不进入项目选择页。
- 预约成功后不能通过返回键回到确认页重复提交。
- 页面文案不出现医疗诊断、治疗承诺、医生问诊等高风险表达。
docs/smile-first-ai-visual-board-5-pages.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB