Главная Обзор Помощь
Регистрация Вход
data_center_platform
/
PR_Min_APP_V2
10
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Ветка: develop
Ветки Метки
PR_Min_APP_V2
/
design-qa.md

design-qa.md 7.6 KB
Постоянная ссылка История Исходник

Design QA：PRI-MP-HOME-001 首页正式基线高还原验证

比较基线

  • Source visual truth：03-项目输入_project-inputs/07-临时设计稿_drafts/pri-home-html-prototype/qa/implementation-device.png
  • Implementation screenshot：/Users/anubis/.codex/visualizations/2026/07/29/019faca7-819d-7a93-b65a-9e7144433106/home-ui-experiment-qa/faithful-final-392x852.jpg
  • Full-view comparison：/Users/anubis/.codex/visualizations/2026/07/29/019faca7-819d-7a93-b65a-9e7144433106/home-ui-experiment-qa/reference-vs-faithful-final.png
  • Cross-tab target screenshot：/var/folders/2t/tmcq4gwd35s1jnh5wd3y1w3w0000gn/T/codex-clipboard-dcfdc11a-8725-4374-92f6-17d88f7db408.png
  • Cross-tab pre-fix screenshot：/var/folders/2t/tmcq4gwd35s1jnh5wd3y1w3w0000gn/T/codex-clipboard-c460854e-b3d8-4916-95eb-5ab20d34b378.png
  • Cross-tab focused comparison：/Users/anubis/.codex/visualizations/2026/07/29/019faca7-819d-7a93-b65a-9e7144433106/tabbar-home-vs-mine-before.png
  • Common-services pre-fix screenshot：/var/folders/2t/tmcq4gwd35s1jnh5wd3y1w3w0000gn/T/codex-clipboard-e49939de-b35f-47b4-807a-59c0b876b18e.png
  • Common-services focused comparison：/Users/anubis/.codex/visualizations/2026/07/29/019faca7-819d-7a93-b65a-9e7144433106/common-services-reference-vs-native-before.png
  • Source pixels：392 × 852
  • Implementation pixels：392 × 852
  • CSS viewport：392 × 852
  • Density normalization：两侧均为 1× 像素截图；实现截图从 1280 × 852 浏览器全页截图中居中裁出 392 × 852 内容区。
  • Cross-tab pixels：目标截图 407 × 876；整改前“我的”截图 416 × 867；局部对照分别截取底部 150px，并将第二侧归一为 407 × 150 后横向拼接。
  • Cross-tab post-fix implementation：项目负责人于 2026-08-03 确认五个一级页面原生视觉与共享 TabBar 一致性验证通过；本仓库仍保留此前截图和源码门禁作为追溯证据。
  • Common-services pixels：原型 392 × 852；整改前实机截图 427 × 867；局部对照分别截取 130px 高区域，并将实机侧归一为 392 × 130 后横向拼接。
  • Common-services post-fix implementation：项目负责人于 2026-08-03 确认原生页面整改结果通过；源码与离线布局门禁用于持续防止旧版宽度规则回归。
  • State：第一张近视防控 Banner、已选择医院与患者、有待办、4 个首要服务、2 位推荐医生、首页选中 Tab；补充对照覆盖“我的”页面选中 Tab。
  • Focused comparison：首页整体对照中各区域可清晰阅读；跨页面导航另以 814 × 150 局部并排图对照首页目标态和“我的”整改前状态。

Findings

[Closed] 微信原生小程序渲染确认

  • Location：pages/tabBar/index/index、custom-tab-bar。
  • Evidence：项目负责人于 2026-08-03 明确确认原生视觉验证已通过，覆盖首页及五个一级页面共享 TabBar；本次确认作为人工终验裁定记录。当前 Codex 环境仍未安装微信开发者工具，因此不补造本地截图路径。
  • Result：原 P1 阻断关闭；后续如更换 Banner、TabBar 素材或顶部结构，仍需重新执行原生视觉回归。

Required fidelity surfaces

  • Fonts and typography：品牌中英文、区块标题、服务主副标题、医生信息的字号、字重和层级已对齐原型；真实医院名和医生字段保留截断。浏览器预览无 P1/P2 字体偏差。
  • Spacing and layout rhythm：顶部、Banner、就诊条、快捷就医、常用服务、医生列表和 TabBar 的纵向位置与原型基本重合；1+3 快捷卡比例及圆角已恢复。
  • Colors and visual tokens：恢复原型深蓝、亮蓝、青绿、暖橙和珍珠白；Banner、AI 导诊、可预约状态的语义色一致。
  • Image quality and asset fidelity：使用临时稿原始 Banner 和吉祥物；Banner 转 JPEG quality 82 后文字与主体清晰。图标来自同源 Phosphor 图标库，不再使用文字图标或 CSS 人像占位。
  • Copy and content：固定标题与原型一致；患者、待办、医院、动态菜单和医生内容仍来自真实状态，没有复制临时稿姓名、医生、时间或临床信息到业务数据。
  • Accessibility and responsiveness：主要服务卡与常用服务具备足够触控区域；长医院名、动态服务和额外入口仍有截断/更多服务布局。自定义顶部与真机字体缩放待原生终检。

Comparison history

Round 1

  • Earlier P1/P2 findings：缺少顶部 Banner；医院卡和患者卡占据首屏；快捷服务、常用服务、推荐医生和 TabBar 与原型比例差异明显；文字图标与素材语言不一致。
  • Fixes：增加自定义顶部；接入三张活动 Banner 轮播和真实患者就诊条；改为 1+3 动态快捷服务；恢复原型常用服务与两行医生；增加首页条件 TabBar；接入临时稿图片和 Phosphor SVG。
  • Post-fix evidence：reference-vs-faithful-final.png 显示主要内容分区、首屏密度、Banner、快捷服务、常用服务、医生列表和导航位置已基本重合。

Round 2

  • Earlier P2 finding：浏览器几何预览中的吉祥物未按设备容器定位，常用服务图标偏小。
  • Fixes：吉祥物调整到原型约 452px 高度；常用服务图标从 58rpx 调整至 66rpx。
  • Post-fix evidence：最终对照图中吉祥物位置与常用服务视觉重量已接近原型。

Round 3

  • Earlier P2 finding：项目负责人提供的实机截图显示，离开首页后共享 TabBar 回退为旧版文字字形、较高导航尺寸和普通缴费项；与首页的真实线性图标、紧凑字号和中央蓝色缴费按钮不一致。
  • Fixes：移除首页路由条件，五个一级页面始终渲染同一套 Phosphor 图标、140rpx 导航高度、20rpx 文案和蓝色缴费强调按钮；保留当前路由选中态、动态就诊指引显隐和消息角标逻辑；增加 tabbar-visual-consistency.offline.test.js 回归门禁。
  • Post-fix evidence：WXML/WXSS 仅保留一套跨页面导航结构，离线门禁验证所有一级 Tab 的图标来源、选中态和缴费强调不再依赖首页路由；2026-08-03 项目负责人进一步确认原生验证通过。

Round 4

  • Earlier P2 finding：项目负责人实机截图显示，“常用服务”四个入口整体贴向各自栅格轨道左侧，第一项尤其接近屏幕边缘；局部对照可见目标图标中心约位于 12.5% / 37.5% / 62.5% / 87.5%，实机实现则整体左移。
  • Root cause：基础样式 .home-convenience__cell { width: 25%; } 原用于 flex 四列；高还原样式把父容器切换为四列 grid，却没有覆盖子项宽度，导致每个 grid item 只占自身轨道的 25%，内部居中实际发生在这个被压缩的小盒子中。
  • Fixes：在高还原作用域内明确设置单元 width: 100% 和 justify-self: stretch，使每个单元占满完整轨道；保留图标、文案和真实点击路由。新增 home-convenience-layout.offline.test.js 防止旧宽度再次覆盖。
  • Post-fix evidence：静态布局门禁确认四列等宽 grid、单元 100% 轨道宽度、轨道拉伸及内部居中同时成立；2026-08-03 项目负责人进一步确认原生验证通过。

Implementation checklist

  • 顶部品牌、院区、搜索、通知
  • 三张活动 Banner 轮播
  • 真实患者/待办就诊条
  • 动态服务 1+3 及额外入口
  • AI 导诊与真实下游路由
  • 常用服务真实入口
  • 真实推荐医生前两项与全部医生入口
  • 五个一级页面统一 TabBar
  • 常用服务四列轨道居中
  • 素材来源与 MIT 许可
  • 微信开发者工具与真机同状态验证（2026-08-03 项目负责人确认）

final result: passed_by_project_owner