你çnepiedg
cf62ed1a3f
- Improved onboarding flow by adding user guidance for mode selection - Updated homepage behavior to better reflect user preferences - Refined UI elements for a more intuitive navigation experience
戒烟助手 UI 原型设计
📱 原型文件
- ui-redesign.html - 完整的移动端UI原型
🎨 设计特点
双模式设计
-
戒烟打卡模式
- 适合已决定戒烟的用户
- 简单直接的天数计时
- 每日打卡激励
- 强调成就感
-
记录减量模式
- 适合逐步减少吸烟的用户
- 详细记录每次抽烟
- 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
📱 交互说明
页面切换
- 点击底部导航切换主要页面
- 首页根据当前模式自动显示对应内容
- 模式选择页隐藏底部导航
按钮交互
- 所有按钮有点击缩放效果
- 主要操作使用主色调
- 危险操作使用红色
动画效果
- 卡片淡入动画
- 按钮点击反馈
- 页面切换平滑过渡
🚀 使用方法
- 在浏览器中打开
ui-redesign.html - 首次进入显示模式选择页
- 选择戒烟模式后进入对应首页
- 使用底部导航切换不同页面
- 在个人中心可以切换模式
💡 设计亮点
- 双模式灵活切换 - 满足不同用户需求
- 清晰的视觉层级 - 重要信息突出显示
- 友好的配色 - 绿色主调传递健康积极的感觉
- 简洁的交互 - 减少操作步骤，提升效率
- 数据可视化 - 图表直观展示趋势
- AI 智能辅助 - 个性化建议和任务
📝 后续开发建议
- 使用 uni-app 框架实现跨平台
- 集成真实的图表库（如 uCharts）
- 实现记录弹框组件
- 对接后端 API
- 添加更多动画效果
- 实现数据持久化
- 添加分享功能
- 完善通知提醒