麦瓣健康APP原型图说明

📱 原型图列表

本目录包含麦瓣健康用户端APP的核心页面原型图，基于功能清单v3.0设计。

核心页面（12个）

文件名页面名称功能说明状态
00-登录注册.html登录注册手机号+微信+Apple ID登录，新用户自动注册✅
00-兴趣标签选择.html兴趣标签选择新用户选择兴趣标签，智能推荐服务✅
01-首页.html首页服务类别、推荐技术老师、Banner、底部导航✅
02-技术老师列表.html技术老师列表筛选、排序、老师卡片（单量、好评、星级）✅
03-下单页面.html确认订单服务类别选择、价格计算、夜间服务费提示✅
04-订单详情.html订单详情订单状态、地图追踪、心率监测记录✅
05-个人中心.html个人中心会员等级、积分余额、钱包余额、功能入口✅
06-服务类别详情.html服务类别详情5大服务类别特色、营业时间、对比表、咨询客服✅
07-会员中心.html会员中心消费自动升级、等级权益、会员专属券✅
08-优惠券中心.html优惠券中心促销券/优惠券分类、抢券功能、按等级发放✅
09-我的钱包.html我的钱包储值账单、消费记录分离（参考华住）✅
10-套餐计划.html套餐计划套餐购买、确认、核销、复购（最多5次）✅

🎨 设计规范

配色方案

  • 主色调: #4CAF50 (绿色 - 健康、关爱)
  • 辅助色: #2196F3 (蓝色 - 专业、信任)
  • 强调色: #FFC107 (黄色 - 优惠、活动)
  • 成功色: #4CAF50
  • 警告色: #FF9800
  • 错误色: #F44336
  • 价格色: #FF5722

字体规范

  • 主标题: 17-24px, 粗体
  • 副标题: 15-16px, 粗体
  • 正文: 14-15px, 常规
  • 辅助文本: 12-13px, 常规
  • 小字: 11px, 常规

间距规范

  • 页面边距: 15px
  • 卡片间距: 10-15px
  • 元素内边距: 12-15px
  • 圆角: 8-12px

组件规范

  • 按钮: 高度44px, 圆角20-25px
  • 卡片: 白色背景, 圆角12px, 阴影
  • 输入框: 高度44px, 圆角8px
  • 底部导航: 高度70px

✨ v3.0 核心功能体现

1. 会员体系（消费自动升级）

  • 页面: 05-个人中心.html, 07-会员中心.html
  • 功能: 青铜/白银/黄金/钻石等级，按年度消费次数自动升级
  • 特点: 参考全季+美团，消费即会员

2. 5大服务类别

  • 页面: 01-首页.html, 03-下单页面.html, 06-服务类别详情.html
  • 类别:
    • 💎 专业严选（可预约至后一周）
    • 🌸 健康管理（仅女性技师）
    • ⚡ 功能型服务
    • ✈️ 差旅放松（营业至23:00）
    • 💆 肩颈快按（支持团购）

3. 心率监测记录

  • 页面: 04-订单详情.html
  • 功能: 服务前心率监测数据展示
  • 特点: 安全保障，数据可追溯

4. 优惠券体系升级

  • 页面: 08-优惠券中心.html
  • 功能: 促销券（人人可领）+ 优惠券（等级获取）
  • 特点: 抢券功能、会员专属券

5. 钱包系统（参考华住）

  • 页面: 09-我的钱包.html
  • 功能: 储值账单、消费记录分离展示
  • 特点: 账单清晰，余额透明

6. 套餐计划（最多5次）

  • 页面: 10-套餐计划.html
  • 功能: 套餐购买、确认机制、复购跳转
  • 特点: 客户确认后技师领提成

7. 技术老师展示增强

  • 页面: 02-技术老师列表.html
  • 功能: 单量、好评率、星级评定
  • 特点: 商家入驻模式

8. 营业时间提示

  • 页面: 03-下单页面.html, 06-服务类别详情.html
  • 功能: 根据服务类别显示不同营业时间
  • 特点: 智能提示，避免超时下单

📋 功能覆盖检查

已实现功能 ✅

  • [x] 登录注册（手机号+微信+Apple ID）
  • [x] 新用户兴趣标签选择（6大用户群体）
  • [x] 智能推荐服务匹配
  • [x] 5大服务类别展示
  • [x] 服务类别详情页（营业时间、特色功能对比）
  • [x] 技术老师单量、好评、星级展示
  • [x] 心率监测记录查看
  • [x] 消费自动升级会员体系
  • [x] 会员等级权益展示
  • [x] 会员专属券发放
  • [x] 促销券/优惠券分类
  • [x] 抢券功能
  • [x] 储值账单和消费记录分离
  • [x] 套餐计划（最多5次）
  • [x] 套餐确认机制
  • [x] 套餐复购提示
  • [x] 夜间服务费提示
  • [x] 营业时间智能提示
  • [x] 价格明细展示
  • [x] 专业严选客服咨询入口

待补充页面（次要优先级）

  • [ ] 订单列表页
  • [ ] 健康档案页
  • [ ] 团购下单页面
  • [ ] 积分中心页
  • [ ] 签到页面
  • [ ] 设备管理页
  • [ ] 地址管理页
  • [ ] 聊天页面

🔧 使用说明

查看原型图

  1. 直接用浏览器打开对应的HTML文件
  2. 建议使用Chrome浏览器查看
  3. 可以按F12打开开发者工具，切换到移动设备视图

手机预览

  1. 将HTML文件部署到Web服务器
  2. 用手机浏览器访问
  3. 体验真实的移动端效果

修改原型图

  1. 用任意文本编辑器打开HTML文件
  2. 修改HTML/CSS代码
  3. 刷新浏览器查看效果

📝 版本记录

v1.1 (2025-10-27)

  • ✅ 新增登录注册页面（支持手机号+微信+Apple ID）
  • ✅ 新增兴趣标签选择页面（6大用户群体）
  • ✅ 完善新用户引导流程

v1.0 (2025-10-23)

  • ✅ 完成10个核心页面原型图
  • ✅ 实现v3.0功能清单核心功能
  • ✅ 统一配色和设计规范
  • ✅ 参考华住、全季、美团设计风格

📮 反馈说明

如需补充或修改原型图，请联系产品团队。

文档版本: v1.1
最后更新: 2025-10-27
维护者: 麦瓣健康产品团队