npx mcpbar@latest edit -c claude

物理模拟实验室小程序 - 高保真原型

这是一个基于 HTML、CSS 和 JavaScript 开发的物理模拟实验室小程序的高保真原型。通过模拟真实的物理实验场景，帮助用户通过互动和视觉化的方式学习物理知识。

项目概述

物理模拟实验室小程序旨在通过交互式 3D 模拟实验，帮助学生更直观地理解和学习物理概念。原型采用现代简约的设计风格，强调线条和几何形状，营造高端科技感，适合各年龄段的学习者。

设计规范

• 整体风格：现代简约的黑白灰配色，强调线条和几何形状
• 配色方案：
  • 主色调：天空蓝 (#4A90E2) 和白色 (#FFFFFF)
  • 辅助色：浅绿色 (#7ED321)
  • 点缀色：黄色 (#F8E71C)
  • 背景色：浅灰 (#F5F5F5)
  • 文本色：深灰 (#333333)
• 字体选择：思源黑体/Noto Sans SC
• 视觉元素：简洁线条图标，高质量特写产品图片，简单几何图形背景

如何运行原型

1. 克隆或下载本项目代码
2. 使用现代浏览器（如 Chrome、Firefox、Safari）打开 index.html 文件
3. 你将看到包含所有原型页面的预览页面，每个页面显示在 iPhone 15 Pro 的模拟框架中
4. 点击各个页面可以查看详细的交互原型

包含的页面

1. 启动页：展示应用名称、logo和开始按钮
2. 首页/实验库：展示分类实验、推荐实验和最近使用
3. 实验详情页：展示实验信息、介绍和相关知识点
4. 3D实验操作界面：自由落体实验模拟，可调整各种物理参数
5. 实验数据分析页面：展示实验数据的图表和表格分析
6. AI辅助学习对话界面：提供智能问答功能解释物理概念
7. 游戏化成就系统：展示用户学习进度、勋章和挑战任务
8. 个人中心（我的）：展示用户信息、学习统计、实验历史和功能入口

核心功能

• 实验库与分类管理：直观的卡片界面，方便用户查找实验
• 3D交互式实验模拟：参数可调整的自由落体实验模拟
• 实验教学与引导：详细的实验介绍、相关知识点和步骤引导
• 游戏化学习系统：成就系统和勋章展示激发学习动力
• 数据可视化与报告生成：图表和数据表格展示实验结果
• AI辅助学习：智能问答解决物理问题
• 社交与协作功能：排行榜和成就分享功能
• 个人中心管理：查看学习数据、实验历史和系统设置

技术栈

• HTML5
• CSS3（使用 TailwindCSS）
• JavaScript
• Font Awesome 图标库
• Chart.js 数据可视化库

后续开发建议

1. 使用 React 或 Vue 等前端框架重构界面，提升代码复用性和维护性
2. 集成 Three.js 和 Cannon.js 等物理引擎实现真实的 3D 模拟
3. 使用 ECharts 或 D3.js 增强数据可视化能力
4. 接入实际的 AI 接口实现智能问答功能
5. 使用 WebSocket 或 WebRTC 技术实现多人协作功能

预览

打开 index.html 查看完整的原型预览。

作者

本原型是基于物理模拟实验室小程序的低保真原型设计，升级为高保真原型的设计实现。