检查记录 · 双眼数据结构性替代方案(市面调研版)

长官反馈 E/F/G 三版「变化不太大」——那三版只是同一张三列表格(标签|OD|OS)改 grid-template-columns 的描边/留白/底色微调,数据的组织结构从头到尾没变过。 本页不再动描边,改为调研市面上双眼/成对医疗数据的常见处理方式,并对照本项目已经上线过的真实写法, 给出 5 个结构真正不同的方案(H/I/J/K/L)。

卡片视觉(圆角22/白底/双层柔阴影/内边距20/字阶/颜色)与上一版方案完全一致、原样照抄 store-mobile-refractive-archive-mockup-clean.html,唯一自变量是数据排法。手机帧宽度 375px。

本页与上一版「E/F/G 描边微调」是两回事:这版改的是数据的组织结构,不是边框/底色/间距

一、调研结果来源见每条末尾

  1. 移动端表格溢出的标准处理是"横向滚动或改卡片布局",不是硬塞更多列。 方案I的"转置四列"在 375px 上是否可行必须实测,塞不下就要用卡片布局(方案J)替代, 不能靠缩字号硬撑。(来源:ui-ux-pro-max 技能 · ux 域 · Responsive/Table Handling: "Tables can overflow on mobile" → Do: "Use horizontal scroll or card layout")
  2. 患者档案/健康记录类产品的色板建议是"临床蓝 + 健康绿 + 警示红 + 可访问对比度", 与本项目现有 OD 绿(#2fa37c)/OS 蓝(#6d8fd0)配色方向一致, 本次不新增任何色值,全部复用现有令牌。(来源:ui-ux-pro-max 技能 · product 域 · "Patient Portal / Health Records":Color Palette Focus = "Clinical blue + health green + alert red + calm white + accessible contrast")
  3. 需要精确读数的成对数据不适合用雷达图/小倍数图形化表达,应该用可精确读数的表格/条形。 这条支持了本页 H/I/J/K/L 全部走"数字优先、图形只做辅助提示"的路线, 没有做成纯图形化对比。(来源:ui-ux-pro-max 技能 · chart 域 · Multi-Variable Comparison(Radar):"When NOT to Use: ... values need precise comparison (use grouped bar)")
  4. 只用颜色区分系列对色弱用户不友好,应叠加线型/文字/图案等第二通道。 这条是方案L"迷你条对比"目前唯一只靠绿/蓝区分 OD/OS 的已知缺口,代价里已如实标注。 (来源:ui-ux-pro-max 技能 · chart 域 · Trend Over Time:Accessibility Notes: "Differentiate series by line style ... not color alone")
  5. 本仓库平板端「时间线卡」(frame3-patient-profile.tsx)已经真实上线过"转置"写法—— 列头是指标名、行首是眼别,但那是在平板宽屏下用的,从未在 375px 手机窄屏验证过是否装得下。 本页方案I就是把这个真实写法搬到手机帧下做实测(见下方自检结果)。
  6. 本仓库检查单表单/档案详情/平板只读卡三处,全部是"标签|OD|OS"三列并排写法的变体 (列宽/对齐方式不同,但结构相同),说明"三列并排"是本项目事实上的默认写法而非本次讨论的对象, 本页刻意全部避开三列结构,5个方案没有一个是三列并排。

二、本仓库已上线过的双眼数据排法(同一业务的真实市面参考)

小结:本项目至今出现过的双眼排法只有「三列并排」「转置」「标准表格」「文本斜杠合并」四种, 从没出现过「一眼一卡」「主值+差值」「迷你条对比」——H/I/K/L/J 里,H 复刻的是本项目已有的文本合并习惯, I 复刻的是本项目已有的转置写法,J/K/L 三个才是本项目从未用过的全新结构。

方案H斜杠合并 · 像苹果健康的清单
只有两列(标签+值),对齐问题从结构上消失;OD绿/OS蓝,斜杠用浅灰;列头换成一句说明代替
2026-08-01 未读 第6次
左为右眼 OD,右为左眼 OS
裸眼视力4.3/4.4
球镜D-2.00/-1.75
眼轴mm23.57/23.52
眼压mmHg16/15
代价:把两个独立测量值压缩进一个视觉单元,弱视觉扫读时"斜杠"容易被忽略, 误读成一个数字;数值位数不同时(如 -2.00 / -1.75 都是5位还好,但如遇 -12.00 这种两位数) 两侧宽度不一致,斜杠位置会跳动,不是绝对定宽对齐。
方案I转置 · 两行四列(本仓库平板端真实写法搬到手机帧)
横向两行 OD/OS,竖向四列裸眼视力/球镜/眼轴/眼压;出处 frame3-patient-profile.tsx,本次在 375px 实测是否挤
2026-08-01 未读 第6次
裸眼
视力
球镜
D
眼轴
mm
眼压
mmHg
OD 4.3-2.0023.5716
OS 4.4-1.7523.5215
代价:375px 宽塞四列数值 + 一列眼别标签,字号被迫压到 12.5px(数值)/9.5px(表头两行), 比本项目其余方案的 13-17px 字阶都小,视力不好的家长/长辈用户可能看不清; 真实渲染结果见下方自检第4、5项——若溢出会在那里如实报告,不会靠肉眼"看着还行"下结论。
方案J一只眼一张卡 · 左右并列两个分区
同一条记录拆成「右眼 OD」「左眼 OS」两个并列小分区,各自竖着列四个指标
2026-08-01 未读 第6次
右眼 OD
裸眼视力4.3
球镜(D)-2.00
眼轴(mm)23.57
眼压(mmHg)16
左眼 OS
裸眼视力4.4
球镜(D)-1.75
眼轴(mm)23.52
眼压(mmHg)15
代价:同一指标(如眼轴)被拆到左右两个分区,横向对比"OD比OS高多少"要来回扫视, 不像三列并排/转置那样同一行就能看到对比;卡片变高(4行×2分区纵向排布,比三列写法占用更多垂直空间)。
方案K主值 + 差值
每行突出 OD 大数字,旁边小字标 OS 相对 OD 的差值
2026-08-01 未读 第6次
裸眼视力4.3
左眼 +0.1
球镜D-2.00
左眼 +0.25
眼轴mm23.57
左眼 -0.05
眼压mmHg16
左眼 -1
代价:⚠️ 这个改变了信息呈现方式——从"两个并列独立值"变成"一个主值+一个差值"。 医学上双眼是并列的两个独立测量,弱化其中一只眼(这里固定弱化 OS)可能不妥: 如果某次检查恰好是 OS 眼有问题(比如弱视/斜视随访最关心的正好是较弱的那只眼), 这种写法会让被弱化的眼别显得"不重要",需要长官/业务判断是否接受"固定以 OD 为主值"这个假设, 本方案不擅自判定,如实标注为待拍板项。
方案L迷你条对比
标签后跟一段细横条直观表示双眼差异,OD绿/OS蓝,条后跟数值
2026-08-01 未读 第6次
裸眼视力
4.3 / 4.4
球镜D
-2.00 / -1.75
眼轴mm
23.57 / 23.52
眼压mmHg
16 / 15
代价:映射关系:每行内以 |OD| 与 |OS| 两者较大的绝对值为 100% 基准,条长按各自绝对值占比线性映射 (组内相对占比,不能跨行/跨指标比较长度)。⚠️ 眼轴行 OD 23.57 / OS 23.52 只差 0.05mm(占比99.8%), 两条几乎等长,肉眼根本看不出差异——对这批数据里差异本来就很小的场景,这个方案信息量约等于零, 只有当双眼差异足够大(比如弱视随访常见的 1mm+ 眼轴差)时才有意义; 另外只靠绿/蓝颜色区分两条,色弱用户分不清哪条是哪只眼(见调研第4条)。

与 E/F/G 的本质区别

E/F/G 三版共用同一个 .ap-eye-head/.ap-eye-row 三列 grid, 三次只改了 grid-template-columns(88px 1fr 1fr)和分隔线/底色, 数据结构从头到尾是"标签|OD数值|OS数值"三列。本页 H/I/J/K/L 五个方案, 每一个的数据结构都不同:H 是两列(标签+合并值),I 是转置(行=眼别,列=指标), J 是两个独立子分区,K 是主值+差值,L 是数值+比例条。没有一个是"三列 grid 改列宽"。