健康指标追踪器：面向中老年人的健康记录与趋势追踪 PWA
项目简介
在日常生活中，很多中老年用户都有记录血压、血糖、心率、体重的习惯，但传统记录方式通常存在几个问题：
-
数据分散，容易遗漏
-
只能记数字，难以看出变化趋势
-
去医院复诊时，不方便快速整理历史记录
-
很多健康类应用功能太复杂，不适合中老年用户长期使用
基于这个真实场景，我设计并整理了一个 面向中老年人的健康指标追踪器。它是一个轻量化的 PWA 工具，聚焦“记录—追踪—预警—导出报告”这一条完整链路，帮助用户更轻松地管理自己的日常健康数据。
项目定位
健康指标追踪器 是一个面向中老年人的手动健康记录工具，支持记录以下 4 类核心指标：
-
血压
-
血糖
-
心率
-
体重
它不仅能完成基础录入，还支持：
-
趋势图查看
-
异常值标记
-
报告预览与导出
-
数据本地持久化
-
PWA 安装使用
整体设计追求的是：功能聚焦、交互直接、视觉清晰、适合长期坚持使用。
设计目标
这个项目不是为了做一个“面面俱到的大而全健康平台”，而是为了优先解决中老年用户最常见的几个问题：
-
今天的健康数据如何快速记录？
-
最近几天或几周的数据变化是否正常？
-
哪些指标已经超出正常范围？
-
去医院时，能否快速生成一份清晰可读的健康报告？
围绕这些问题，项目在页面结构、信息层级和功能设计上都尽量保持简洁直接。
页面展示
1. 仪表盘：首页聚焦高频记录场景
仪表盘是整个产品的核心入口，首页直接展示 4 个健康指标卡片，分别对应血压、血糖、心率和体重。用户点击卡片后即可弹出录入窗口，快速填写数值并保存。
这类设计减少了页面跳转层级，让高频操作尽量在第一屏完成，更符合中老年用户的使用习惯。
该页面还包含：
-
当前日期展示与切换
-
今日记录摘要
-
最近记录列表
-
底部导航切换
通过这些信息，用户一打开应用就可以迅速了解当天记录情况。
2. 趋势图页：从“记数据”升级为“看变化”
健康记录的价值并不只在于保存数字，更重要的是帮助用户观察变化趋势。因此项目提供了独立的趋势图页面。
用户可以：
-
在血压、血糖、心率、体重之间切换查看
-
在 7 天 / 30 天 / 90 天三个时间范围内切换
-
查看平均值、最高值、最低值、异常次数等统计信息
图表部分的重点设计包括：
-
使用折线图展示连续变化趋势
-
通过绿色半透明区域标注正常范围
-
对异常数值使用红点进行突出提醒
这样的可视化方式，相比单纯的数字列表，更容易帮助用户建立对自身健康状态的直观理解。
3. 报告页：解决“就医时如何整理数据”的问题
很多用户平时会记录数据，但在复诊或体检时，往往很难把这些记录清晰整理给医生查看。为此，项目设计了专门的报告页面。
用户可以选择一个起止日期区间，系统会生成一份健康报告预览，其中包含：
-
个人信息
-
报告周期
-
各指标趋势缩略图
-
异常值汇总
-
自动生成的总结语
最终用户可以选择：
-
导出图片
-
打印报告
这一部分让产品从“记录工具”进一步延伸为“就医辅助工具”，提升了实际使用价值。
4. 设置页：保留必要配置能力
为了兼顾灵活性与易用性，项目在设置页中提供了一些必要但不过度复杂的配置项，包括：
-
姓名编辑
-
各指标正常范围自定义
-
数据导出 / 导入（JSON）
-
清除所有数据（二次确认）
其中“正常范围自定义”非常重要，因为不同用户的关注重点可能不同，允许用户按需调整参数，能让工具更贴合个人使用场景。
核心功能亮点
1. 快速录入
-
首页直接展示核心指标
-
点击卡片即可录入
-
降低操作成本，减少学习门槛
2. 异常值自动识别
-
血压按收缩压 / 舒张压分别判断
-
血糖区分空腹与餐后 2 小时两种类型
-
异常数据在卡片与图表中高亮显示
3. 趋势分析
-
支持 7 / 30 / 90 天查看范围
-
支持同类指标长期趋势观察
-
同时提供平均值、最高值、最低值与异常次数统计
4. 报告导出
-
可选起止日期生成健康报告
-
支持图片导出
-
支持打印，方便就医时直接出示
5. 本地持久化
-
使用 localStorage 保存数据
-
刷新页面后不丢失记录
-
适合轻量化日常使用
适老化设计思路
虽然这是一个轻量工具型项目，但在交互和视觉上，我始终围绕“中老年用户是否容易使用”来做判断。
1. 信息层级尽量直接
高频功能优先放在首页，避免深层跳转。
2. 用词直观易懂
直接使用“血压、血糖、心率、体重”等高识别度词汇，避免抽象术语。
3. 用颜色强化状态反馈
-
蓝白主色营造医疗健康感
-
绿色表示正常
-
红色表示异常
4. 报告内容强调可读性
除了原始数据外，还加入趋势、异常汇总和自动总结语，让报告更适合非专业用户阅读。
技术实现
项目采用轻量纯前端方案，核心技术栈如下：
-
HTML + CSS + Vanilla JS
-
Chart.js：用于绘制趋势图
-
localStorage：用于本地数据存储
-
html2canvas：用于报告截图导出
-
manifest.json：用于支持 PWA 安装
这样的技术选型有几个优势：
-
部署简单
-
启动速度快
-
依赖少
-
适合小型工具型产品快速落地
同时，这也说明即便不依赖大型框架，也可以完成一个从数据录入到图表分析、再到报告导出的完整前端闭环。
数据与逻辑设计
项目中围绕健康记录建立了较清晰的数据模型：
记录数据 records
每条记录包含：
-
唯一 ID
-
日期
-
指标类型
-
子类型（如空腹 / 餐后血糖）
-
数值内容
-
备注
-
创建时间
设置数据 settings
包含：
-
用户姓名
-
各项指标正常范围配置
核心逻辑
主要包括：
-
异常判定：根据不同指标规则判断是否越界
-
图表聚合：按日期过滤并聚合同一天多条数据
-
报告生成：汇总时间范围内数据并导出图片
这些逻辑保证了项目不是简单的静态展示，而是具备基本可用性的交互产品。
项目价值
我认为这个项目的价值主要体现在三个层面：
1. 真实问题导向
它聚焦的是中老年用户真实存在的高频健康记录需求，而不是泛化的功能堆叠。
2. 形成完整使用闭环
从录入、查看、预警到导出报告，整个链路是完整的。
写在最后
我希望这个项目传达的并不是“功能做得多”，而是：
围绕一个明确人群，把一个真实需求场景打磨得更顺手、更清楚、更能长期使用。
对于中老年用户来说，健康管理不一定需要复杂系统，很多时候，一个能快速记录、清晰展示趋势、还能导出就医报告的小工具，就已经足够有价值。
如果把这个项目用于比赛投稿，我认为它的亮点主要在于：
-
明确的目标用户定位
-
清晰的使用场景闭环
-
兼顾功能实用性与视觉表达
-
具备适老化思考与实际落地可行性
附：项目关键信息速览
项目名称： 健康指标追踪器
目标用户： 中老年人
产品形态： PWA 健康记录工具
核心能力： 记录 / 趋势分析 / 异常提醒 / 报告导出
技术栈： HTML + CSS + Vanilla JS + Chart.js + localStorage + html2canvas