睡眠助手 App 原型

这是一个基于 HTML 和 Tailwind CSS 构建的睡眠助手应用原型，旨在帮助用户追踪、分析和改善睡眠质量。

项目概述

睡眠助手是一款专注于睡眠健康的移动应用，通过科学的睡眠监测、分析和建议，帮助用户建立健康的睡眠习惯，提高睡眠质量。

用户需求分析

• 睡眠监测：用户需要记录和追踪自己的睡眠时间、质量和模式
• 数据分析：用户希望了解自己的睡眠状况并获得改善建议
• 睡眠辅助：用户需要放松音乐、白噪音等帮助入睡的工具
• 睡眠习惯培养：用户希望建立规律的睡眠时间表和健康的睡眠习惯
• 个性化建议：基于用户的睡眠数据提供个性化的改善建议

核心功能

1. 睡眠记录与追踪：记录睡眠时间、质量、深浅睡眠周期等数据
2. 睡眠分析：提供睡眠质量评分、趋势分析和改善建议
3. 睡眠辅助工具：提供白噪音、冥想音乐、睡前故事等帮助入睡
4. 智能闹钟：根据睡眠周期智能唤醒，避免深度睡眠时被打断
5. 睡眠习惯培养：睡眠计划制定、睡前提醒、睡眠环境建议等
6. 社区与分享：与朋友分享睡眠成就，参与睡眠挑战

界面结构

本原型包含以下主要界面：

1. 欢迎页 (welcome.html)：应用的欢迎和引导页面
2. 主页/仪表盘 (dashboard.html)：展示睡眠概况、快速功能入口和睡眠建议
3. 睡眠记录 (sleep-records.html)：记录和查看睡眠数据
4. 睡眠详情 (sleep-detail.html)：详细的睡眠数据分析和趋势图表
5. 睡眠音频 (audio-content.html)：提供助眠的音频内容
6. 音频播放 (audio-player.html)：音频播放界面
7. 智能闹钟 (smart-alarm.html)：智能闹钟功能
8. 设置闹钟 (set-alarm.html)：设置和管理闹钟
9. 睡眠习惯 (sleep-habits.html)：睡眠习惯培养和建议
10. 个人中心 (profile.html)：用户信息和应用设置

技术栈

• HTML5：页面结构
• Tailwind CSS：样式和响应式设计
• Font Awesome：图标库
• 原生 JavaScript：交互功能

设计规范

• 颜色方案：

  • 主色调：#4F46E5（靛蓝色）- 代表平静、放松和睡眠
  • 辅助色：#6366F1（浅紫色）- 用于渐变和强调
  • 背景色：#f5f5f7（浅灰色）- 模拟iOS界面风格
  • 文本色：#333333（深灰色）- 主要文本
  • 强调色：#e53935（红色）- 用于警告和重要操作

• 字体：

  • 系统字体：-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
  • 大小层级：遵循iOS设计规范

• 圆角和阴影：

  • 卡片圆角：12px
  • 按钮圆角：8px
  • 轻微阴影效果增强层次感

如何使用

1. 克隆或下载本仓库
2. 打开 index.html 文件查看所有界面的总览
3. 点击各个界面可以查看详细设计

开发指南

本原型设计可直接用于实际开发：

1. 前端开发：

   • 可以直接使用HTML/CSS作为前端开发的参考或起点
   • 结构和样式已经完善，可以直接添加JavaScript交互逻辑

2. 移动应用开发：

   • 可以将设计转换为React Native、Flutter或原生iOS/Android应用
   • 界面设计和交互逻辑可以直接参考原型

3. 设计资源：

   • 所有图标使用Font Awesome，可以直接在开发中使用
   • 图片来源于Pexels等免费图库，可以在实际开发中替换

预览

在浏览器中打开index.html可以查看所有界面的预览。每个界面都模拟了iPhone 15 Pro的尺寸，并包含iOS风格的状态栏和导航栏。

贡献

欢迎提交问题和改进建议！

许可

MIT License