摘要
利用 AI 工具 Windsurf 开发的 “儿童时钟学习” 小程序上线且有用户使用。为学习实践并提升用户体验，决定改版并分享经历。结合AI生成UI设计和需求的管理用 issues 管理，阐述遇到的问题和难点，以及后续的计划。
一、引言
前段时间，作为一个普通人，借助AI编程工具Windsurf，我已经上线了一款帮助幼儿认识时间，学会看钟表的小程序 “儿童时钟学习” ，这款小程序自上线以来，已经有不少用户在使用。为了更好地学习和实践，我决定对这款小程序进行一次改版。在此，与大家分享这次改版的过程和心得。
二、改版内容概述
这次改版涉及的范围挺广。
- 在界面这块，我打算全面更新 UI，力求让整个页面变得更加简洁大方，色彩也更加活泼明艳，更贴合小朋友们的喜好。
- 底部导航栏也会重新设计，操作逻辑会变得更简单直观，方便小朋友们上手操作。
- 另外，我还计划新增一个启动页，融入一些趣味性十足的元素，让小朋友们一打开小程序就被牢牢吸引。
- 另一方面，练习模式和测试模式也会迎来优化升级。
- 最重要的是，计划新增的故事模式和 AI 实验室。
- 在故事模式里，我打算编写一系列妙趣横生的故事，把时钟知识巧妙地融入其中，让小朋友们在故事中与小程序进行互动，自然而然地学到知识。
- AI 实验室则是想探索更多智能化互动玩法，比如时间手抄报生成、时光照相机等等，先把框架搭建起来
三、设计与规划过程
（一）UI 设计之路
- 之前介绍过一些AI生成原型的工具（AI生成产品原型与设计稿：我的工具使用心得与推荐），这次还是通过AI帮我生成相应的UI，修改几个版本之后，最终得到相对满意的版本，如下图：
（二）需求管理之道
- 因为这次改版内容挺多，为了更好地管理需求，我参考了网上大神分享的方法，采用 issues 来管理。
- 我先把改版的大致需求喂给 AI 讲了一遍，让AI帮我做出分析和拆分。它建议我把本次改版内容拆解为 9 个 issues，然后按照标准的 issues 模板，帮我创建好了每一个 issues 文件。
- 之后，我又让 AI 帮我梳理了各个任务的优先级和依赖关系，然后就按照它规划好的阶段，对照着 issues 按部就班地进行开发，每次完成一个小任务，都会及时把开发进度更新到对应的 README 文档和 issues 文档里，方便自己随时回顾和后续调整。issues的记录样式如下，以全局UI框架改版为例
## 背景
为提升用户体验，需要对整个小程序进行UI升级，使界面更加美观、统一和易用。## 当前问题
1. 缺少启动页面
2. 视觉风格需要更新
3. 全局样式不够统一## 改进目标
1. 提供更好的首次使用体验
2. 建立统一的设计系统
3. 提升整体视觉效果## 所有资源：
### UI设计稿### 背景底图### 底部导航图标### 页面级别资源
- 小程序启动页：- 练习模式：- play，random，tip图标
- 测试模式：- 简单、中等、困难图标，-
- 故事模式：- 主线剧情、支线系统配图
- 成就中心：- 占位图
- AI实验室：- 相关配图## 开发进度
- 优先级：P0（第一阶段）
- 状态：进行中 ✅
- 完成时间：2025-02-03## 已完成内容
1. 全局导航栏- 实现自定义 tabBar 组件- 集成云存储中的导航图标- 添加页面切换动画效果- 统一分享功能实现- 创建基础页面框架2. 页面基础框架- 练习模式：已完成基础功能- 测试模式：已完成基础功能- 故事模式：创建基础框架- 成就中心：创建基础框架- AI实验室：创建基础框架## 遗留问题
- [ ] 故事模式内容开发
- [ ] 成就中心系统实现
- [ ] AI实验室功能开发## 注意事项
- 严格遵循UI设计稿
- 确保与其他功能模块的视觉一致性
- 优先保证移动端适配，其次考虑平板适配四、开发过程中的困难与解决
- 开发初期，一切进行得还算顺利。我很快就完成了初步的启动页设计，大致的 UI 框架也搭建好了，但是调整 UI 细节的时候，单纯用语言描述，细节上还是不太容易达到跟设计稿一样的效果
- 通过多轮的耐心调整，总算让界面有了个像样的样子，如下图，可以看下之前的界面、调整好的界面以及原型设计稿的比对（左图之前的版本，中间改版后的开发版本、右侧原型设计搞）
五、当前问题与后续计划
- 虽说取得了一些进展，但目前还是存在不少问题。悬浮按钮的功能还没实现，git 提交的时候也出了岔子，有些代码丢失，一度处于崩溃的边缘。
- 接下来我打算先缓一缓，调整下心态。来先去进行故事情节设计和 AI 实验室功能规划和实验，等心情平复了，再回过头来解决这些问题，继续推进改版工作。
