习惯养成打卡应用原型

这是一个习惯养成打卡应用的高保真HTML原型，旨在展示习惯追踪和统计功能的UI/UX设计。

项目概述

习惯养成打卡应用是一个帮助用户建立和维持良好习惯的工具。通过视觉反馈、进度跟踪和成就系统，鼓励用户保持日常习惯的连续性。

主要功能

• 习惯分组管理：按类别整理不同习惯
• 习惯状态追踪：待开始、进行中、已完成、失败等状态
• 习惯详情页：展示单个习惯的详细信息和历史记录
• 数据统计：图表化展示习惯完成趋势和分布
• 个人中心：用户信息和成就系统
• 交互动画：流畅的状态转换和完成动画效果

技术栈

• HTML5
• CSS3 (包含动画和过渡效果)
• JavaScript (原生ES6+)
• Tailwind CSS - 用于快速构建UI
• Font Awesome - 提供图标
• Chart.js - 用于数据可视化

界面结构

1. 主框架 (index.html)：模拟手机设备的框架，包含状态栏和导航栏
2. 习惯分组页 (habit-groups.html)：展示所有习惯分组和状态
3. 习惯详情页 (habit-detail.html)：单个习惯的详细信息和历史记录
4. 数据统计页 (stats.html)：数据图表和完成情况统计
5. 个人中心页 (profile.html)：用户信息和成就展示

使用指南

查看原型

1. 在浏览器中打开 index.html 文件
2. 页面将模拟iPhone 15 Pro的尺寸和界面
3. 通过底部导航栏切换不同功能页面

交互操作

• 点击习惯按钮：循环切换状态（待开始→进行中→已完成→待开始）
• 双击习惯按钮：查看习惯详情
• 点击导航栏：切换页面
• 在详情页中点击"完成打卡"：将习惯标记为已完成
• 在详情页中点击"今日跳过"：将习惯标记为已跳过

设计亮点

1. 动画效果：

   • 页面切换的平滑过渡
   • 习惯完成时的粒子动画
   • 按钮点击的波纹效果
   • 卡片的滑入动画

2. 色彩系统：

   • 主色调：蓝色 (#4263eb)
   • 辅助色：绿色 (#38d9a9)
   • 强调色：紫色 (#9775fa)
   • 状态颜色：灰色（待开始）、蓝色（进行中）、绿色（已完成）、红色（失败）

3. 用户体验设计：

   • 清晰的视觉层次结构
   • 直观的状态反馈
   • 简洁的数据可视化
   • 成就系统提供成就感

未来改进方向

• 添加本地存储功能，保存用户习惯数据
• 实现习惯添加和编辑功能
• 增加更多数据分析图表
• 添加通知和提醒功能
• 实现主题切换功能
• 优化移动设备适配

作者信息

这个原型由[您的名字]设计和开发。

许可证

本项目采用MIT许可证。