# 戒烟助手 UI 原型设计

## 📱 原型文件

- **ui-redesign.html** - 完整的移动端UI原型

## 🎨 设计特点

### 双模式设计

1. **戒烟打卡模式**
   - 适合已决定戒烟的用户
   - 简单直接的天数计时
   - 每日打卡激励
   - 强调成就感

2. **记录减量模式**
   - 适合逐步减少吸烟的用户
   - 详细记录每次抽烟
   - AI 智能分析和建议
   - 科学递减计划

### 页面结构

#### 1. 模式选择页
- 首次进入或切换模式时显示
- 清晰展示两种模式的特点和适用场景
- 可在个人中心随时切换

#### 2. 首页（双模式）
**戒烟打卡模式首页：**
- 戒烟天数大卡片（天/小时/分钟）
- 今日打卡按钮
- 健康收益展示（节省金额、未吸烟支数）
- 激励语

**记录减量模式首页：**
- AI 智能提示卡片
- 距上次抽烟计时器
- 下次建议时间
- 今日统计（已抽/已忍住）
- 快速记录按钮

#### 3. 统计页
- 周/月/年时间范围切换
- 吸烟趋势柱状图
- 日均吸烟量和变化百分比
- 健康收益（节省金额、肺功能恢复）
- 成就展示（连续记录、已拒绝次数）

#### 4. AI 助手页
- 30天递减计划进度
- 每日 AI 分析（昨日表现 + 今日建议）
- 今日任务清单

#### 5. 历史记录页
- 筛选标签（全部/已抽烟/已忍住）
- 按日期分组展示
- 记录详情（时间、数量、等级、备注、间隔）
- 编辑和删除功能

#### 6. 个人中心页
- 用户信息展示
- 模式切换入口
- 功能菜单（目标设定、提醒设置、数据导出、基础设置）
- 帮助和关于

## 🎨 设计规范

### 配色方案
- **主色调**: #10B981 (翡翠绿) - 代表健康和成长
- **成功色**: #10B981 (绿色) - 忍住、正向激励
- **危险色**: #EF4444 (红色) - 抽烟记录
- **信息色**: #4F46E5 (靛蓝) - AI 助手、编辑
- **警告色**: #D97706 (琥珀) - 提示、警告

### 渐变背景
- 首页: `linear-gradient(180deg, #D1FAE5 0%, #F0FDF4 50%, #FFFFFF 100%)`
- 模式选择: `linear-gradient(135deg, #D1FAE5 0%, #F0FDF4 100%)`

### 字体规范
- 标题: 24px, 700
- 副标题: 16-18px, 600
- 正文: 13-15px, 400
- 辅助文字: 11-12px, 400

### 圆角规范
- 卡片: 12px
- 按钮: 8-12px
- 标签: 12px
- 头像: 50%

### 间距规范
- 页面边距: 16-20px
- 卡片间距: 12-16px
- 元素内边距: 12-16px

## 📱 交互说明

### 页面切换
- 点击底部导航切换主要页面
- 首页根据当前模式自动显示对应内容
- 模式选择页隐藏底部导航

### 按钮交互
- 所有按钮有点击缩放效果
- 主要操作使用主色调
- 危险操作使用红色

### 动画效果
- 卡片淡入动画
- 按钮点击反馈
- 页面切换平滑过渡

## 🚀 使用方法

1. 在浏览器中打开 `ui-redesign.html`
2. 首次进入显示模式选择页
3. 选择戒烟模式后进入对应首页
4. 使用底部导航切换不同页面
5. 在个人中心可以切换模式

## 💡 设计亮点

1. **双模式灵活切换** - 满足不同用户需求
2. **清晰的视觉层级** - 重要信息突出显示
3. **友好的配色** - 绿色主调传递健康积极的感觉
4. **简洁的交互** - 减少操作步骤，提升效率
5. **数据可视化** - 图表直观展示趋势
6. **AI 智能辅助** - 个性化建议和任务

## 📝 后续开发建议

1. 使用 uni-app 框架实现跨平台
2. 集成真实的图表库（如 uCharts）
3. 实现记录弹框组件
4. 对接后端 API
5. 添加更多动画效果
6. 实现数据持久化
7. 添加分享功能
8. 完善通知提醒

## 🔗 相关文档

- [产品需求文档](../docs/PRD.md)
- [双模式改造方案](../docs/smt双模式改造方案.md)
- [技术方案](../docs/TECH.md)