diff --git a/prototypes-backup-20260324-160754.tar.gz b/prototypes-backup-20260324-160754.tar.gz new file mode 100644 index 0000000..9265e07 Binary files /dev/null and b/prototypes-backup-20260324-160754.tar.gz differ diff --git a/prototypes/PREMIUM-README.md b/prototypes/PREMIUM-README.md new file mode 100644 index 0000000..88afebf --- /dev/null +++ b/prototypes/PREMIUM-README.md @@ -0,0 +1,149 @@ +# 戒烟助手 Pro - 高级UI设计 + +## 🎨 设计理念 + +这是一个采用苹果设计语言的高级UI版本，具有以下特点： + +### 核心设计元素 + +1. **深色主题** - 纯黑背景 (#000) 营造高端感 +2. **毛玻璃效果** - backdrop-filter 实现iOS风格的半透明效果 +3. **精致阴影** - 多层阴影和发光效果 +4. **流畅动画** - cubic-bezier 缓动函数 +5. **渐变色彩** - 高品质的渐变背景和文字 +6. **圆角设计** - 大圆角 (16-24px) 更现代 + +### 配色方案 + +**主色调：** +- 翡翠绿渐变: `#00D4AA → #00B894` +- 荧光绿: `#00F5D4` (强调色) + +**辅助色：** +- 靛蓝: `#4F46E5 → #6366F1` +- 琥珀: `#FBBF24 → #F59E0B` +- 红色: `#FF6B6B → #EE5A6F` + +**背景：** +- 纯黑: `#000` +- 深灰: `#0a0a0a` +- 半透明白: `rgba(255,255,255,0.05-0.15)` + +## 💎 高级特性 + +### 1. 毛玻璃导航栏 +```css +backdrop-filter: blur(40px) saturate(180%); +background: rgba(28, 28, 30, 0.8); +``` + +### 2. 高级卡片 +- 半透明背景 +- 双层边框（外边框 + 内发光） +- 多层阴影 +- 点击缩放反馈 + +### 3. 渐变文字 +```css +background: linear-gradient(135deg, #00D4AA 0%, #00F5D4 100%); +-webkit-background-clip: text; +-webkit-text-fill-color: transparent; +``` + +### 4. 背景装饰 +- 模糊的径向渐变光晕 +- 动态定位营造空间感 + +### 5. 按钮交互 +- 悬停光扫效果 +- 点击缩放反馈 +- 发光阴影 + +## 📱 页面特色 + +### 模式选择页 +- 大尺寸emoji图标 +- 背景光晕装饰 +- 标签式特性展示 + +### 首页（戒烟打卡） +- 72px超大数字显示 +- 渐变文字效果 +- 分栏统计数据 + +### 首页（记录减量） +- 等宽字体计时器 +- 双色统计卡片 +- 双按钮布局 + +### 统计页 +- 渐变柱状图 +- 发光效果 +- 网格布局成就卡 + +### AI助手页 +- 进度条发光效果 +- 任务完成状态 +- 左边框强调 + +### 记录页 +- 彩色左边框 +- 半透明按钮 +- 时间轴布局 + +### 个人中心 +- 大头像设计 +- 清晰的菜单层级 +- 右箭头导航 + +## 🎯 与普通版对比 + +| 特性 | 普通版 | 高级版 | +|------|--------|--------| +| 背景 | 浅色渐变 | 纯黑 + 光晕 | +| 卡片 | 白色实心 | 毛玻璃半透明 | +| 阴影 | 简单阴影 | 多层阴影 + 发光 | +| 字体 | 常规粗细 | 更粗 (700-800) | +| 圆角 | 12px | 16-24px | +| 动画 | 简单过渡 | cubic-bezier | +| 配色 | 明亮 | 深色 + 霓虹 | + +## 💰 高级感体现 + +1. **视觉层次** - 多层次的透明度和阴影 +2. **精致细节** - 字间距、行高、边框精心调整 +3. **流畅动画** - 所有交互都有平滑过渡 +4. **专业配色** - 深色主题 + 霓虹强调色 +5. **空间感** - 背景光晕营造深度 +6. **品质感** - 毛玻璃、发光、渐变等高级效果 + +## 🚀 技术实现 + +### 关键CSS技术 +- `backdrop-filter` - 毛玻璃效果 +- `filter: blur()` - 背景光晕 +- `box-shadow` - 多层阴影 +- `linear-gradient` - 渐变背景 +- `cubic-bezier` - 自定义缓动 +- `-webkit-background-clip` - 渐变文字 + +### 性能优化 +- 使用 `transform` 而非 `position` 做动画 +- 合理使用 `will-change` +- 避免过度使用 `backdrop-filter` + +## 📝 使用说明 + +直接在浏览器中打开 `ui-premium.html` 即可查看效果。 + +建议使用： +- Chrome/Safari (完整支持 backdrop-filter) +- 移动设备或开发者工具的移动模式 +- 最大宽度 390px (iPhone 14 Pro) + +## 🎨 设计灵感来源 + +- Apple iOS 设计语言 +- Apple Watch 健康应用 +- 高端订阅类产品 (Calm, Headspace) +- 现代深色主题设计趋势 diff --git a/prototypes/README.md b/prototypes/README.md new file mode 100644 index 0000000..21c6aa5 --- /dev/null +++ b/prototypes/README.md @@ -0,0 +1,147 @@ +# 戒烟助手 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) diff --git a/prototypes/ui-premium.html b/prototypes/ui-premium.html new file mode 100644 index 0000000..fa96683 --- /dev/null +++ b/prototypes/ui-premium.html @@ -0,0 +1,791 @@ + + + + + + 戒烟助手 Pro - 高级版 + + + +
+ +
+
+ +
+
+ +
+
🚭
+

选择你的戒烟方式

+

科学方法，个性化定制

+
+ +
+ +
+
+
✅
+
+

戒烟打卡模式

+

+ 适合已经决定戒烟的你
+ 记录戒烟天数，每天打卡激励 +

+
+ 简单直接 + 每日激励 + 成就感强 +
+
+
+
+ + +
+
+
📊
+
+

记录减量模式

+

+ 适合想逐步减少吸烟的你
+ 记录每次抽烟，AI 帮你制定递减计划 +

+
+ 科学递减 + 数据分析 + AI 指导 +
+
+
+
+
+ +
+

💡 选择后可在个人中心随时切换

+
+
+
+ + +
+
+
+ + +
+
+
+ 👤 +
+
+
张三
+
已坚持 15 天
+
+
+
+ + +
+
+
+
当前模式
+
戒烟打卡模式
+
+ +
+
+ + +
+
+
+
🎯
+
目标设定
+
+
›
+
+
+
+
🔔
+
提醒设置
+
+
›
+
+
+
+
📊
+
数据导出
+
+
›
+
+
+
+
⚙️
+
基础设置
+
+
›
+
+
+ + +
+
+
+
❓
+
使用帮助
+
+
›
+
+
+
+
ℹ️
+
关于我们
+
+
+
v1.0.0
+
›
+
+
+
+
+
+ + +
+
+
+
历史记录
+
+ + +
+
+ + + +
+
+ + +
+
今天 3月24日
+
+ +
+
+
+
+
💪
+
想抽忍住了
+
+
14:30
+
距上次 2小时15分
+
+
+ + +
+
+
+ +
+
+
+
+
🚬
+
记录抽烟
+
+
12:15 · 3支 · 等级2
+
压力大
+
距上次 1小时30分
+
+
+ + +
+
+
+ + +
+
昨天 3月23日
+
+ +
+
+
+
+
🚬
+
记录抽烟
+
+
21:45 · 2支 · 等级1
+
饭后习惯
+
+
+ + +
+
+
+
+
+ + +
+
+
+ +
+
AI 戒烟助手
+
+ + +
+
+
30天递减计划
+
第15天
+
+
阶段2 - 减量期
+
+
+
+
🎯 进度 50% · 继续加油！
+
+ + +
+
+
🤖
+
今日 AI 分析
+
+
+
+ 昨日表现：你昨天成功控制在5支以内，比目标少了1支，做得很棒！

+ 今日建议：今天目标4支。建议在下午3点和晚上8点这两个高峰时段，用喝水或散步替代。 +
+
+
+ + +
+
今日任务清单
+
+
+
✅
+
+
早起喝一杯温水
+
+
+
+
⭕
+
+
下午散步15分钟
+
+
+
+
⭕
+
+
阅读戒烟激励文章
+
+
+
+
+
+
+ + +
+
+
+ +
+
统计分析
+
+ + +
+
+ + + +
+
+ + +
+
本周吸烟趋势
+
+
+
+
周一
+
+
+
+
周二
+
+
+
+
周三
+
+
+
+
周四
+
+
+
+
周五
+
+
+
+
周六
+
+
+
+
今天
+
+
+
+
+
日均吸烟
+
4.2 支
+
+
+
较上周
+
-32%
+
+
+
+ + +
+
健康收益
+
+
+
节省金额
+
¥680
+
本周 ¥120
+
+
+
肺功能恢复
+
28%
+
持续改善中
+
+
+
+ + +
+
我的成就
+
+
+
🔥
+
15
+
连续记录
+
+
+
💪
+
42
+
已拒绝
+
+
+
+
+
+ + +
+
+
+ +
+
早上好 👋
+
张三
+
+ + +
+
+
💡
+
+
+ 发现你在下午3-5点容易抽烟，建议这个时段多喝水或散步 +
+
+
×
+
+
+ + +
+
距上次抽烟
+
+ 02:34:18 +
+
+
下次建议时间
+
14:30
+
+
+ + +
+
今日数据
+
+
+
已抽烟
+
+ 3 + / 5 +
+
↓ 较昨日 -2
+
+
+
已忍住
+
+ 4 + 次 +
+
💪 做得好
+
+
+
+ + +
+ + +
+
+
+ + +
+
+ +
+ +
+
早上好 👋
+
张三
+
+ + +
+
已戒烟
+
15
+
天
+
+
+
+
360
+
小时
+
+
+
+
21,600
+
分钟
+
+
+
+
+ + +
+ +
+ + +
+
+
健康收益
+
持续恢复中 ↗
+
+
+
+
节省金额
+
¥225
+
+
+
未吸烟支数
+
300
+
+
+
+ + +
+
+ 💪 坚持得很棒！你的肺部功能正在逐步恢复，继续保持！ +
+
+
+
+ + +
+
+
🏠
+
首页
+
+
+
📊
+
统计
+
+
+
🤖
+
AI助手
+
+
+
📝
+
记录
+
+
+
👤
+
我的
+
+
+
+ + + + diff --git a/prototypes/ui-redesign.html b/prototypes/ui-redesign.html new file mode 100644 index 0000000..fcedbf2 --- /dev/null +++ b/prototypes/ui-redesign.html @@ -0,0 +1,727 @@ + + + + + + 戒烟助手 - UI 原型设计 + + + +
+ +
+
+
+
🚭
+

选择你的戒烟方式

+

根据你的习惯，选择最适合的模式

+
+ +
+ +
+
+
✅
+
+

戒烟打卡模式

+

+ 适合已经决定戒烟的你
+ 记录戒烟天数，每天打卡激励 +

+
+ 简单直接 + 每日激励 + 成就感强 +
+
+
+
+ + +
+
+
📊
+
+

记录减量模式

+

+ 适合想逐步减少吸烟的你
+ 记录每次抽烟，AI 帮你制定递减计划 +

+
+ 科学递减 + 数据分析 + AI 指导 +
+
+
+
+
+ +
+

💡 选择后可在个人中心随时切换

+
+
+
+ + +
+
+
+
早上好 👋
+
张三
+
+ + +
+
已戒烟
+
15
+
天
+
+
+
+
360
+
小时
+
+
+
21,600
+
分钟
+
+
+
+
+ + +
+ +
+ + +
+
+
健康收益
+
持续恢复中 ↗
+
+
+
+
节省金额
+
¥225
+
+
+
未吸烟支数
+
300
+
+
+
+ + +
+
+ 💪 坚持得很棒！你的肺部功能正在逐步恢复，继续保持！ +
+
+
+
+ + +
+
+
+
早上好 👋
+
张三
+
+ + +
+
+
💡
+
+
+ 发现你在下午3-5点容易抽烟，建议这个时段多喝水或散步 +
+
+
×
+
+
+ + +
+
距上次抽烟
+
+ 02:34:18 +
+
+
下次建议时间
+
14:30
+
+
+ + +
+
今日数据
+
+
+
已抽烟
+
+ 3 + / 5 支 +
+
↓ 较昨日 -2
+
+
+
已忍住
+
+ 4 + 次 +
+
💪 做得好
+
+
+
+ + +
+ + +
+
+
+ + +
+
+ +
+
+
+ 👤 +
+
+
张三
+
已坚持 15 天
+
+
+
+ + +
+
+
+
当前模式
+
戒烟打卡模式
+
+ +
+
+ + +
+
+
+
🎯
+
目标设定
+
+
›
+
+
+
+
🔔
+
提醒设置
+
+
›
+
+
+
+
📊
+
数据导出
+
+
›
+
+
+
+
⚙️
+
基础设置
+
+
›
+
+
+ + +
+
+
+
❓
+
使用帮助
+
+
›
+
+
+
+
ℹ️
+
关于我们
+
+
v1.0.0
+
›
+
+
+
+
+ + +
+
+
历史记录
+
+ +
+ +
+ + + +
+ + +
+
今天 3月24日
+
+ +
+
+
+
+
💪
+
想抽忍住了
+
+
14:30
+
距上次 2小时15分
+
+
+ + +
+
+
+ +
+
+
+
+
🚬
+
记录抽烟
+
+
12:15 · 3支 · 等级2
+
压力大
+
距上次 1小时30分
+
+
+ + +
+
+
+ + +
+
昨天 3月23日
+
+ +
+
+
+
+
🚬
+
记录抽烟
+
+
21:45 · 2支 · 等级1
+
饭后习惯
+
+
+ + +
+
+
+
+
+ + +
+
+
AI 戒烟助手
+
+ +
+ +
+
+
30天递减计划
+
第15天
+
+
阶段2 - 减量期
+
+
+
+
🎯 进度 50% · 继续加油！
+
+ + +
+
+
🤖
+
今日 AI 分析
+
+
+
+ 昨日表现：你昨天成功控制在5支以内，比目标少了1支，做得很棒！

+ 今日建议：今天目标4支。建议在下午3点和晚上8点这两个高峰时段，用喝水或散步替代。 +
+
+
+ + +
+
今日任务清单
+
+
+
✅
+
+
早起喝一杯温水
+
+
+
+
⭕
+
+
下午散步15分钟
+
+
+
+
⭕
+
+
阅读戒烟激励文章
+
+
+
+
+
+
+ + +
+
+
统计分析
+
+ +
+ +
+ + + +
+ + +
+
本周吸烟趋势
+
+
+
+
周一
+
+
+
+
周二
+
+
+
+
周三
+
+
+
+
周四
+
+
+
+
周五
+
+
+
+
周六
+
+
+
+
今天
+
+
+
+
+
日均吸烟
+
4.2 支
+
+
+
较上周
+
-32%
+
+
+
+ + +
+
健康收益
+
+
+
节省金额
+
¥680
+
本周 ¥120
+
+
+
肺功能恢复
+
28%
+
持续改善中
+
+
+
+ + +
+
我的成就
+
+
+
🔥
+
15
+
连续记录
+
+
+
💪
+
42
+
已拒绝
+
+
+
+
+
+ + +
+
+
🏠
+
首页
+
+
+
📊
+
统计
+
+
+
🤖
+
AI助手
+
+
+
📝
+
记录
+
+
+
👤
+
我的
+
+
+
+ + + +