【OpenHarmony/HarmonyOs 】成就系统设计实践：让学习 App 更有持续使用动力
学习类 App 很容易遇到一个问题：用户第一次打开觉得内容很多，但过几天就忘了继续用。为了解决这个问题，我在「化学视界」中加入了成就系统，用访问天数、学习行为、收藏、答题等数据给用户持续反馈。🏆
一、为什么学习 App 需要成就系统？
成就系统不是游戏专属。对于学习工具来说，它可以发挥三个作用：
- 给用户正反馈，让学习过程更有成就感。
- 记录长期行为，比如连续学习天数。
- 引导用户探索更多功能，比如查看元素、阅读知识、完成挑战。
在我的项目中，成就不是为了制造焦虑，而是让用户看到自己一点点进步。
二、成就系统的整体结构
项目中成就相关文件主要有：
AchievementData.ts：成就配置数据。Achievement.ts：成就模型。AchievementManager.ts：成就管理器。Achievement.ets：成就展示页面。Statistics.ets：学习统计页面。
我开发时把“成就配置”和“成就进度”分开：
- 配置：成就名称、描述、图标、目标值。
- 进度：当前完成度、是否解锁、解锁时间。
这样以后新增成就时，只需要补充配置，管理逻辑可以复用。
三、用户统计数据设计
成就系统依赖学习行为统计：
function getDefaultStatistics():UserStatistics{return{totalEquationsViewed:0,totalElementsViewed:0,totalKnowledgeRead:0,dailyQuizCorrect:0,dailyQuizStreak:0,totalFavorites:0,totalSearches:0,visitDates:[],currentStreak:0,unlockedAchievements:[]};}这些数据覆盖了 App 的主要学习行为：
- 看过多少方程式。
- 看过多少元素。
- 读过多少知识点。
- 答对多少题。
- 收藏多少内容。
- 连续学习多少天。
我没有把统计写在页面里，而是统一放到管理器中，避免每个页面各算各的。
四、成就管理器：单例统一管理
成就管理器使用单例：
static getInstance(): AchievementManager {if(AchievementManager.instance===null) {AchievementManager.instance =newAchievementManager(); } returnAchievementManager.instance; }这样整个 App 中都能使用同一个成就状态。比如：
- 主入口记录访问。
- 元素详情记录查看。
- 知识详情记录阅读。
- 挑战页记录答题。
- 收藏动作记录收藏数量。
统一管理的好处是数据不会分散，成就判断也不会重复写。
五、记录访问和连续学习
用户每次打开 App 时，会记录当天访问：
recordVisit(): void {constnow = new Date();consttoday =this.formatDate(now);constyesterday =this.formatDate(new Date(now.getTime() -86400000));if(this.statistics.lastVisitDate === today) {return; }if(!this.statistics.visitDates.includes(today)) {this.statistics.visitDates.push(today); }if(this.statistics.lastVisitDate === yesterday) {this.statistics.currentStreak +=1; }else{this.statistics.currentStreak =1; }this.statistics.lastVisitDate = today;this.scheduleSave(); }这段逻辑是成就系统里最基础的一环。连续学习天数可以鼓励用户保持习惯，但同一天重复打开不应该重复计数。
六、行为记录：把学习动作转成成就进度
例如查看方程式：
recordEquationViewed(type?: string): void {this.checkAndUnlock('first_equation',1);this.statistics.totalEquationsViewed +=1;this.checkAndUnlock('equation_5',this.statistics.totalEquationsViewed);this.checkAndUnlock('equation_15',this.statistics.totalEquationsViewed);this.checkAndUnlock('equation_30',this.statistics.totalEquationsViewed);this.scheduleSave(); }这里的思路是：页面只告诉管理器“用户看了一个方程式”，至于是否解锁成就，由管理器判断。
这样页面层非常干净，不需要知道具体成就规则。
七、成就解锁后的弹窗反馈
成就页面订阅解锁事件：
privateonUnlockBound:(achievement: Achievement) =>void=(achievement: Achievement) =>{this.showUnlockAnimation(achievement);this.refreshAchievements();this.unlockedCount=this.manager.getUnlockedCount(); };解锁时展示弹窗动效：
showUnlockAnimation(achievement: Achievement) {this.popupAchievement = achievement;this.showUnlockPopup =true;this.popupScale =0.3;this.popupOpacity =0; animateTo({ duration:400, curve: Curve.EaseOut }, () => {this.popupScale =1;this.popupOpacity =1; }); }这个弹窗是成就系统的情绪反馈。用户完成某个动作后，看到成就解锁，会更愿意继续探索。
八、成就页面展示设计
成就页包含：
- 当前称号。
- 已解锁数量。
- 总进度条。
- 全部/已解锁/未解锁切换。
- 成就卡片列表。
- 解锁弹窗。
顶部进度区域代码片段：
Text(`${this.unlockedCount}`).fontSize(20).fontWeight(FontWeight.Bold).fontColor($r('app.color.secondary_color'))Text(`/${TOTAL_ACHIEVEMENTS}`).fontSize(13).fontColor($r('app.color.text_tertiary'))我希望用户进入页面后第一眼就能知道：我现在处于什么阶段，还差多少成就。
九、称号系统：让成就有长期目标
项目中根据已解锁成就数量计算用户称号：
getTitle(): {level: number;name: string } { const t = getUserTitle(this.statistics.unlockedAchievements.length);return { level: t.level, name: t.name}; }称号比单纯数字更有情绪价值。比如“化学学徒”“化学达人”这种命名，会让学习过程更像成长路线。
十、开发成就系统的思考
我做成就系统时遵循了几个原则：
- 成就来自真实学习行为，不做无意义打卡。
- 页面只记录行为，不判断复杂规则。
- 解锁反馈要及时，但不能打扰学习。
- 成就数据本地保存，保证离线可用。
- 称号系统提供长期目标。
十一、总结
成就系统的价值不在于“炫”，而在于让用户看见自己的学习轨迹。
在「化学视界」里，成就系统把元素查看、方程式阅读、知识学习、答题挑战、收藏行为串了起来：
- 🧪 学得越多，成就越丰富。
- 🔥 坚持越久，连续天数越高。
- ⭐ 收藏越多，复习路径越清晰。
- 🏆 解锁越多，用户称号越高。
如果你也在开发学习类 App，可以考虑把成就系统作为“长期留存”的一部分，而不是最后随便加一个展示页。