小V健身助手开发手记（基于界面设计的深度复盘）

• 个人首页： VON

• 鸿蒙系列专栏： 鸿蒙开发小型案例总结

• 综合案例 ：鸿蒙综合案例开发

• 鸿蒙6.0：从0开始的开源鸿蒙6.0.0

• 鸿蒙5.0：鸿蒙5.0零基础入门到项目实战

• Electron适配开源鸿蒙专栏：Electron for OpenHarmony

• Flutter 适配开源鸿蒙专栏：Flutter for OpenHarmony

• 本文所属专栏：鸿蒙综合案例开发

• 本文atomgit地址：小V健身

基于界面设计的深度复盘

作者：VON
平台：HarmonyOS 6.0.0 (API 20)
语言：ArkTS
最后更新：2025年12月17日
AtomGit地址：小V健身

希望大家可以给个Star

在完成“小V健身”应用的开发后，我决定从用户界面视角出发，结合实际页面截图，全面回顾这款应用的设计逻辑、交互体验与技术实现。本文将围绕五个核心页面展开分析，揭示每一个按钮背后的设计意图和技术支撑，为 HarmonyOS 应用开发者提供一份可落地的 UI/UX 实践指南。

一、首页：极简即高效

页面概览

这是用户打开应用后的第一印象。顶部是日期选择器，中间是任务列表，底部是添加按钮和 Tab 导航栏。

设计理念

我们坚持“信息密度低、操作路径短”的原则：

• 背景图：采用动感健身场景图，营造运动氛围，但不干扰文字阅读；
• 状态栏：保留系统时间、电量等信息，提升沉浸感；
• 日期选择：居中显示当前日期，点击弹出DateDialog，支持快速切换查看历史数据；
• 任务卡片：简洁展示运动名称和卡路里消耗，图标化表达运动类型（如跳绳）；
• 添加按钮：右下角蓝色圆形 + 号，符合安卓/鸿蒙通用交互习惯，点击进入AddTaskPage。

技术实现

// HomeContent.ets@Stateprivatedate:string=DateUtil.today();@Stateprivaterecords:RecordVO[]=[];onLoad(){this.loadRecords(this.date);}onClickDate(){this.$emit('openDateDialog');}

当用户点击日期时，触发openDateDialog事件，弹出DateDialog.ets对话框。该对话框使用Picker组件构建年月日选择器，并通过@StorageLink('date')实现全局同步。

二、成就页：激励驱动行为

页面概览

此页聚焦于“成就感”，以视觉化方式呈现用户的进步。

核心元素

1. 运动消耗环形图

   • 外圈红色表示目标值（5280千卡）；
   • 内圈灰色表示已完成部分；
   • 文字清晰标注：“距离目标 0千卡”，增强满足感。

2. 成就徽章矩阵

   • 六个蓝色勋章整齐排列，每个下方标注“已经3天达成目标”；
   • 图标统一风格，保持品牌一致性；
   • 支持动态加载不同成就类型（未来扩展）。

设计哲学

• 可视化反馈：环形图比纯数字更直观，让用户一眼看到“快完成了”；
• 正向强化：即使重复内容（如“已达成3天”），也能持续给予心理奖励；
• 留白处理：避免信息过载，给用户呼吸空间。

技术实现

// AchievementContent.ets@Stateprivateachievements:AchievementInfo[]=[];@StateprivatetotalCalorie:number=0;onLoad(){this.calculateTotalCalorie();this.loadAchievements();}calculateTotalCalorie(){// 从数据库获取当日所有记录，求和 calorie 字段KeepService.getTodayCalorie().then(cal=>{this.totalCalorie=cal;});}

成就判断逻辑封装在AchievementMapInfo.ets中，例如：

constachievementRules=[{id:'连续打卡7天',condition:()=>userDays>=7},{id:'累计消耗10000千卡',condition:()=>totalCalorie>=10000}];

三、个人中心：信任与控制

页面概览

这是用户管理自身设置的核心区域，强调隐私可控与信息透明。

功能布局

1. 用户头像与昵称：默认头像 + “小V用户”标识，支持后续绑定真实身份；
2. 今日目标：设定每日卡路里目标（如2000千卡），点击进入编辑；
3. 历史记录：查看过去运动详情；
4. 我的成就：跳转至成就页；
5. 隐私与数据：查看权限使用情况，导出或删除数据；
6. 关于小V：版本号、版权信息；
7. 退出应用：红色文字突出警示，防止误触。

UX 设计亮点

• 层级清晰：每个条目独立卡片，带箭头提示可跳转；
• 关键操作显性化：退出按钮使用红色，区别于其他灰色文本；
• 无冗余字段：未要求填写身高体重等敏感信息，降低门槛。

技术实现

// PersonContent.ets@StateprivatedailyGoal:number=2000;@Stateprivateversion:string='v1.0.0';onLoad(){this.dailyGoal=PreferencesUtil.getNumber('daily_goal')||2000;}onEditGoal(){this.$emit('navigateTo','/pages/EditGoalPage');}

所有设置均存储在PreferencesUtil中，确保跨会话持久化。

四、日期选择器：细节决定体验

页面概览

这是一个模态弹窗，用于切换查看不同日期的数据。

交互逻辑

• 点击首页日期按钮 → 弹出DateDialog；
• 用户可通过上下滑动选择年、月、日；
• 确认后关闭弹窗并刷新主页面数据；
• 可取消操作，返回原状态。

设计考量

• 分步选择：年、月、日分别独立滚动，避免混淆；
• 高亮当前项：蓝色字体突出选中状态；
• 底部按钮对齐：取消/确定按钮宽度一致，视觉平衡；
• 适配深色主题：背景半透明，不影响底层内容辨识度。

技术实现

// DateDialog.ets@Stateprivateyear:number=newDate().getFullYear();@Stateprivatemonth:number=newDate().getMonth()+1;@Stateprivateday:number=newDate().getDate();onConfirm(){constdateStr=`${this.year}-${this.month}-${this.day}`;this.$emit('confirm',dateStr);this.close();}

该组件被首页和成就页共用，体现了代码复用原则。

五、整体架构总结：从界面到系统的闭环

整个系统形成了一个完整的闭环：

用户点击 → 触发事件 → 调用 Service → 更新数据库 → 刷新 UI → 显示结果

这一流程在所有页面中保持一致，保证了用户体验的一致性和稳定性。

六、开发反思与优化方向

尽管 v1.0.0 已具备完整可用性，但在实际测试中仍发现一些可优化点：

1.性能优化建议

• 当前首页列表未启用虚拟滚动，大数据量下可能卡顿；
• 建议引入List的itemSize和scrollToIndex优化滚动性能。

2.无障碍支持

• 部分图标缺乏accessibilityLabel，不利于视障用户使用；
• 后续应为所有可交互元素添加语义化描述。

3.国际化准备

• 所有字符串均使用$r('app.string.xxx')引用；
• 已预留多语言资源目录，便于未来扩展英文版。

七、结语：做一款真正“有用”的App

“小V健身”不是一款炫技的作品，而是一次对“实用主义设计”的实践。它没有复杂的动画，也没有花哨的功能，但它做到了：

• 让用户3秒内完成一次记录；
• 让用户每天都能看到自己的进步；
• 让用户愿意打开它，而不是卸载它。

正如一位测试用户所说：“这是我用过最简单的健身App，但我居然坚持了一个月。”

这正是我们追求的目标——用技术解决真实问题，让科技回归生活本身。

如果你正在开发一款面向普通用户的 HarmonyOS 应用，请记住：

少即是多，简单才是终极复杂。

愿你在鸿蒙生态中，也找到属于你的“小V时刻”。

—— VON，于 2025 年冬