ARTICLE · 1121174
家庭用药 App 的 UI 界面大升级,UI重构实战,并开放下载使
字数 2884，阅读大约需 15 分钟
之前我分享了家庭用药app的文章：
最近我又把它做了一次UI界面的大升级，让这个流程变得更直观：蓝青渐变大卡突出今日安排，成员切换放到页面上方，服用状态和对应动作放在同一张卡片里。但从设计稿走到手机，真正费力的是让每一次点击都连接到正确的数据变化。本文就从这次升级说起。
从全栈评测底座，到手机里的工具
项目最初是一个 Coding Agent 评测的被测产品：Go/Gin 提供 API，PostgreSQL 保存数据，Next.js 提供移动优先界面，外加任务契约、测试和执行轨迹记录。
它有比较完整的业务关系：一个家庭有多个成员，成员关联用药计划，计划关联药品和每天的服用时刻，打卡记录再进入健康时间线。后续开发沿着这些关系，把它逐渐做成了可以安装的 Android App。
现在代码保留两种主要形态。Web 开发与演示模式通过 Go API 工作，可以展示家庭管理员、成年子女和老人之间的权限边界。Android 默认单机离线，家人信息与记录存在设备本地，无需先部署服务器或注册账号。当前 APK 的家庭管理指在一台手机里管理多个成员；跨设备同步还没有完成。
先把设计语言变成组件
图 2：对比信息组织和视觉语言。左右运行环境与数据不同，不能用于像素还原评分。
这次 UI 升级采用了 calicat 设计稿。实际落地时，我按三种粒度读取设计信息：页面截图用于判断整体视觉，图层结构用于拆分区块，关键组件的样式数据用于确定颜色、圆角、字号和阴影。
例如首页大卡的渐变从 #3B82F6 经过 #2C6CE8 到 #1FB6C8，圆角为 26px。将这些值放进主题和公共样式后，首页、家庭页和表单可以沿用同一套视觉语言。图标则统一到内联 SVG，减少不同设备 emoji 渲染带来的视觉差异。
这里可复用的做法是：先提取少量高频组件的规格，再逐页实现。按钮、输入框、卡片和底部导航共用样式后，一处修改能覆盖多个页面；设计稿中的特殊组件则单独处理，避免为了复用把所有区块强行做成同一种卡片。
页面还需要表达业务状态。已服用、待服用、漏服和跳过分别有颜色与文字标签；“我吃了”“补记打卡”等动作直接放在相应条目旁。颜色帮助快速扫视，文字保证用户能理解具体含义。这样的改动是否足够适合老人，还需要更多实际使用反馈。
录入流程则收敛到通用 Sheet 和 PlanSheet：选成员、选药品、填剂量、设时刻，再确定截止日期与提醒选项。页面组件复用后，后续调整间距、按钮或键盘避让可以集中处理。
一个“新计划看不见”的问题，改到了后端
真机体验里最有代表性的问题发生在新建计划之后：计划保存成功，今日用药却没有出现对应条目。
原因在数据链路中。旧接口只创建了 plan，而今日列表由 schedule 派生。没有 schedule，就没有当天的服用时刻，后面的提醒也无法正常形成。
修复时，后端增加了 CreatePlanWithTimes，接收 HH:mm 格式的时刻，创建计划及日程，并生成未来七天的提醒。前端表单随之提供明确的频次与时刻输入。这让“保存计划”真正连接到了“今天可以打卡”。
图 3：业务关系示意。服务器端生成提醒记录，与设备端调度本地通知是两条不同的实现路径。
这里有三种需要区分的数据：计划描述一段时间内的安排，日程描述每天的时刻，记录描述某次实际服用的结果。把它们分开，才有办法停用未来计划而保留历史记录，也能让漏服补记回到正确的一次服用上。
打卡还会影响库存。服务层在记录转为已服用时扣减库存，重复提交已服用状态不会再次扣减。提醒生成也用唯一约束与冲突处理保证幂等。这些约束让界面上一个简单按钮背后的数据变化更可控。
状态也需要明确边界：待服用可以变为已服用或跳过；超过时刻且未打卡的条目在查询时落定为漏服；漏服之后允许补记或跳过。补记是录入已经发生的服用，界面动作应围绕记录表达，避免被理解为补服建议。
减少录入，比多一个页面更有用
药品名称、规格和厂家都比较长，因此添加药品提供了两种辅助：内置药品字典的模糊匹配，以及药盒拍照 OCR。
默认 OCR 使用 tesseract.js 的 WASM 引擎，中文与英文模型随包提供。识别结果经过文本解析和字典匹配，再用于预填药品信息。用户仍需要核对结果；反光、拍摄角度和包装排版都会影响识别。
另一个输入入口是健康档案。PDF 与 DOCX 在客户端解析，提取文字用于预填标题和摘要。目前这条流程不负责保存原始报告文件，也不做医疗诊断。
图 6：历史真机时间线。图中为用药事件，说明记录如何组织；不作为报告解析或 OCR 成功率的证据。
如果手动配置云端视觉接口，OCR 还有备用识别路径；使用该路径时，图片会发送到配置的服务商。这与默认本机识别的数据路径不同。
真机体验是另一层验收
已有开发记录包含 Go 测试、前端单测、Playwright 流程，以及真机 和 Android 模拟器的自测。不同层次检查不同问题：业务测试看状态和幂等，端到端测试看创建到打卡的链路，真机检查安全区、返回手势、表单操作和 WebView 表现。
针对这次升级，验收重点可以落在三个可观察的结果：创建计划后今日页面出现相应条目；重复打卡不重复扣库存；新建成员的详情页在静态 App 中可以打开。这样的验收把外观变化与业务结果连在一起，也更容易发现“接口成功，但用户看不到结果”的问题。
界面改版也会影响测试契约。例如按钮更换成 SVG 图标时，需要保留合理的可访问名称，否则自动化测试和辅助技术都可能找不到原来的操作入口。
本地通知已经通过 Capacitor 接入，按当日待服用条目调度，并在相关操作后重排。iOS 工程已生成，尚待 macOS 构建与真机调试。
写在最后
这次升级把今日概览、用药操作、录入表单和数据链路一起向前推进了一步。接下来优先完善备份、通知验证，以及更适合长辈的字号、对比度和操作尺寸。
如果你也需要把家人的用药安排和健康记录整理到一起，欢迎下载使用。
往期精彩文章：