为真实用户构建 Shamba-MedCare AI 应用

Source: Dev.to

我真正为之构建的用户

关于我的目标用户，有一个令人不舒服的真相：

这不是边缘案例的可访问性。这 就是 使用场景：一位55岁的农妇，找不到她的阅读眼镜，指甲上沾满泥土，站在强光下只有一格信号。她是最需要这个应用的人。

所以我围绕她，而不是围绕审查我代码的开发者，构建了可访问性系统。

改变一切的语音按钮

我构建的最具冲击力的功能，尴尬地简单：一个朗读诊断/结果的按钮。

我使用了 Web Speech API，它内置于所有现代浏览器。实现大约花了一个小时，但影响巨大。语音不仅帮助不能阅读的用户，也帮助所有人。

我妈妈阅读能力完全没问题，她说听到“你的番茄出现早疫。这是一种真菌病。严重程度为中等”比直接阅读文字更让她觉得可信——就像是从人而不是屏幕得到建议。

语音脚本也很重要。我并不是把 JSON 响应直接喂给语音合成，而是把它写成对话式的：

“你的番茄叶健康得分为 45（满分 100）。我检测到早疫，这是一种真菌病。严重程度为中等。治疗方法是使用印楝油喷雾，将两汤匙印楝油与一升水混合，每七天喷一次。”

段落之间有停顿，给出具体剂量，不使用行话。AI 能生成这些，是因为我在提示中要求它：“提供农民可以遵循的实用、可操作的治疗步骤。”

不破坏整体的字体缩放

可访问性设置面板让用户可以选择字体大小：普通、大、或特大。听起来微不足道，但实现过程让我学到了很多 CSS 架构的知识。

我在 文档根元素 上修改了字体大小。所有使用 rem 单位的组件会自动缩放——无需属性传递，也不需要 context provider。只要一行 JavaScript，整个应用就能响应。

关键是从一开始就用 rem 构建组件。如果你在各处硬编码了像素值，后期想加入可访问性就要重写。我很幸运：Tailwind 的默认类使用 rem，所以大多数 UI 在不做改动的情况下就能正确缩放。

设置会保存在 localStorage 中，这样需要大字体的农民每次打开都不必重新启用。

为粗糙的手指设计的触控目标

Apple 推荐触控目标最小为 44 px，我把它做得更大。

为什么？我看到我叔叔使用银行应用时，他的手指因为多年农活变得又厚又笨拙，老是点错按钮——不是因为他不灵活，而是因为该应用是由手指细长、在 MacBook 上敲代码的开发者设计的。

我的按钮尺寸：

• 标准按钮：最小高度 48 px
• 主要操作（例如 “分析”）：最小高度 56 px
• 底部导航：最小高度 64 px

底部导航的位置也很重要。拇指自然落在手机底部。把主导航放在那里可以实现真正的单手操作，尽管网页常规往往把导航放在顶部。

无需阅读的颜色表达

健康得分使用五色严重程度系统：

用户只需一眼看到颜色就能判断需要多担心——无需阅读。红绿灯的隐喻是全球通用的：绿灯表示继续，红灯表示停止。

我选择这些特定颜色的原因有三：

• 色盲安全的渐变 —— 从绿到红的亮度逐渐降低，即使没有颜色感知也能辨别严重程度。
• 阳光下的可视性 —— 高饱和度颜色在强光下仍然可辨别，柔和的粉色会被冲淡。
• 文化熟悉度 —— 红绿灯在世界各地都存在，使得隐喻瞬间可理解。

渐进式展示

Claude 给出的完整诊断包含 25+ 个字段：疾病名称、学名、置信度、症状、成因、传播风险、紧急程度、含成分及配制步骤的治疗方案、预防建议、地区可用性备注等。

一次性展示全部信息会让任何人——尤其是对文字密集界面感到吃力的用户——感到不知所措。