3.6 KiB
3.6 KiB
G01 次要文字可读性优化设计
状态
- 日期：2026-07-16
- 来源：用户在 412×915 实际 H5 页面中指出申请说明与状态文字可能看不清。
- 用户决定：采用“字号、颜色和中等字重同时增强”的 B 方案；首轮
26rpx / 25rpx实际生效但肉眼变化不够明显，第二轮确定为说明28rpx / 500、状态27rpx / 600。 - 当前阶段：第二轮 B 方案已在正式样式中形成 H5 内部候选并完成五档截图检查；Android 仍未验收，G01 整页也尚未正式验收。
初始证据与首轮结果
初始实际渲染结果：
.application-record__copy：23rpx，在 412px 宽视口约为12.63px，颜色为$ink-muted（#776b5c）。.application-record__status：23rpx，约为12.63px；“审核中”为#9a641f，“被拒绝”为#a7160c，“已退出”为$ink-muted。- muted 文字在纯宣纸
#f6f0e5上的估算对比度约为4.58:1，叠到较深的背景承接色#e7ded1时约为3.90:1。 - “审核中”在上述两种底色上的估算对比度约为
4.39:1和3.74:1。 - “被拒绝”约为
6.70:1和5.71:1，无需更换颜色。
首轮实施后，说明约为 14.28px、状态约为 13.73px，颜色和对比度已改善，但用户查看实际页面后认为字号变化仍不明显，因此目标继续提高一档。
这些数值只用于定位 H5 风险，不等于 Android 真机无障碍合规结论。
方案比较
- A 克制：说明
400、状态500；层级最轻，但变化主要来自字号。 - B 中等加粗：说明
500、状态600；用户选择该方案，在清晰度和次要层级之间取平衡。 - C 明显加粗：说明与状态均为
700；最醒目，但会让次要信息过度接近谱名和分组标题，不采用。
实施范围
仅修改 pages/genealogy/g01-my-genealogies.vue 中“加入申请”卡片的次要说明和状态样式：
.application-record__copy.application-record__status.application-record__status--rejected.application-record__status--muted
不修改共享 GenealogyCard.vue，因为用户箭头所指的是 G01 申请卡片；“更新于”虽然同样偏小，但本轮不擅自扩大范围，后续可单独审核。
确定样式
- 申请说明：
font-size: 28rpx、font-weight: 500、color: #62584c、line-height: 1.4。 - 通用状态：
font-size: 27rpx、font-weight: 600、默认“审核中”颜色为#7f4f16。 - “被拒绝”：保留
#a7160c，继承新的字号与字重。 - “已退出”：使用
#62584c，继承新的字号与字重。 - 卡片高度、内边距、12rpx 连续间距、箭头、文案和点击行为保持不变。
- 首轮
26rpx / 25rpx只作为比较历史，不再是当前目标值，也不得保留兼容分支。
响应式与验证
- 覆盖 320×568、360×640、360×800、412×915，并保留 412×1000 压力档。
- 检查长说明不与状态或箭头重叠；320×568 允许自然纵向滚动。
- G01 运行 smoke 继续验证固定区、独立滚动、弹层位置保持、切换家谱回顶和底部入口可达。
- 生成修改前后 412×915 同状态截图进行视觉比较。
- H5 只作为内部候选；Android/HBuilderX 真机或模拟器仍需检查系统字体缩放、屏幕亮度和不同面板下的实际可读性。
非目标
- 不继续调整 28% 公共背景透明度。
- 不修改谱名、分组标题、当前家谱元信息或共享卡片更新时间。
- 不修改其他 G 页面，不对接接口。
- 不把本轮优化写成 G01 整页已验收或 Android 已通过。