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

个人首页： VON
鸿蒙系列专栏：鸿蒙开发小型案例总结
综合案例：鸿蒙综合案例开发
鸿蒙6.0：从0开始的开源鸿蒙6.0.0
鸿蒙5.0：鸿蒙5.0零基础入门到项目实战
Electron适配开源鸿蒙专栏：Electron for OpenHarmony
Flutter 适配开源鸿蒙专栏：Flutter for OpenHarmony
本文所属专栏：鸿蒙综合案例开发
本文atomgit地址：小V健身

小V健身助手开发手记

基于界面设计的深度复盘
- 一、首页：极简即高效
- 二、成就页：激励驱动行为
- 三、个人中心：信任与控制
- - 页面概览
  - 功能布局
  - [UX 设计亮点](#UX 设计亮点)
  - 技术实现
- 四、日期选择器：细节决定体验
- 五、整体架构总结：从界面到系统的闭环
- 六、开发反思与优化方向
- - [1. **性能优化建议**](#1. 性能优化建议)
  - [2. **无障碍支持**](#2. 无障碍支持)
  - [3. **国际化准备**](#3. 国际化准备)
- 七、结语：做一款真正"有用"的App

基于界面设计的深度复盘

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

希望大家可以给个Star

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

一、首页：极简即高效

页面概览

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

设计理念

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

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

技术实现

ts 复制代码

// HomeContent.ets
@State private date: string = DateUtil.today();
@State private records: RecordVO[] = [];

onLoad() {
  this.loadRecords(this.date);
}

onClickDate() {
  this.$emit('openDateDialog');
}

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

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

页面概览

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

核心元素

运动消耗环形图
- 外圈红色表示目标值（5280千卡）；
- 内圈灰色表示已完成部分；
- 文字清晰标注："距离目标 0千卡"，增强满足感。
成就徽章矩阵
- 六个蓝色勋章整齐排列，每个下方标注"已经3天达成目标"；
- 图标统一风格，保持品牌一致性；
- 支持动态加载不同成就类型（未来扩展）。

设计哲学

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

技术实现

ts 复制代码

// AchievementContent.ets
@State private achievements: AchievementInfo[] = [];
@State private totalCalorie: number = 0;

onLoad() {
  this.calculateTotalCalorie();
  this.loadAchievements();
}

calculateTotalCalorie() {
  // 从数据库获取当日所有记录，求和 calorie 字段
  KeepService.getTodayCalorie().then(cal => {
    this.totalCalorie = cal;
  });
}

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

ts 复制代码

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

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

页面概览

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

功能布局

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

UX 设计亮点

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

技术实现

ts 复制代码

// PersonContent.ets
@State private dailyGoal: number = 2000;
@State private version: string = 'v1.0.0';

onLoad() {
  this.dailyGoal = PreferencesUtil.getNumber('daily_goal') || 2000;
}

onEditGoal() {
  this.$emit('navigateTo', '/pages/EditGoalPage');
}

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

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

页面概览

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

交互逻辑

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

设计考量

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

技术实现

ts 复制代码

// DateDialog.ets
@State private year: number = new Date().getFullYear();
@State private month: number = new Date().getMonth() + 1;
@State private day: number = new Date().getDate();

onConfirm() {
  const dateStr = `${this.year}-${this.month}-${this.day}`;
  this.$emit('confirm', dateStr);
  this.close();
}

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

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

模块	职责	关键技术
UI 层	页面渲染与交互	ArkUI、@Component、router
状态层	全局共享状态	@StorageProp、@StorageLink
业务层	逻辑处理	KeepService、RecordModel
数据层	存储与查询	relationalStore、RecordPO
工具层	辅助功能	DateUtil、PreferencesUtil

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

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

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

六、开发反思与优化方向

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

1. 性能优化建议

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

2. 无障碍支持

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

3. 国际化准备

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

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

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

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

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

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

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

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

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

------ VON，于 2025 年冬