platforms/frontend/site/design-qa.md

和气管理入口门户设计 QA

对照目标

• Source visual truth: /Users/david/.codex/generated_images/019fb64b-4fca-7e12-a4cd-c9b59661af31/call_ioQ3ZBsql0CDatVAv3EXSRmE.png
• Generated hero asset: /Users/david/Documents/work/platforms/frontend/site/public/assets/heqi-ecosystem-hero.jpg
• Desktop implementation: /tmp/heqi-site-qa-desktop-final.jpg
• Mobile implementation: /tmp/heqi-site-qa-mobile-revised.jpg
• Final side-by-side comparison: /tmp/heqi-site-source-vs-implementation-final.jpg

归一化条件

• Source pixels: 1536 x 1024.
• Source normalized pixels: 1440 x 1024（先缩放至 1440 x 960，再以页面底色补齐上下各 32px，不拉伸主视觉）。
• Desktop implementation pixels and CSS viewport: 1440 x 1024, density 1:1.
• Mobile implementation CSS viewport: 390 x 844; full-page screenshot包含自然纵向内容。
• State: 首页初始态，三个系统入口未悬停、未点击。

Full-view comparison evidence

最终并排对照显示实现保留了选定稿的核心构图：顶部品牌与可信说明、居中的主标语与说明、横向三段系统入口，以及下方由蓝、橙、青绿路线连接的半写实等距生态场景。桌面端在 1440 x 1024 内完整呈现，没有页面滚动或横向溢出。

实现使用单独生成的无文字生态插画作为真实图片资产，所有品牌文案、系统名称和入口按钮均为可访问的 HTML。插画主体与选定稿保持同一业务顺序和品牌语言，但建筑细节属于同风格的重新生成，不要求逐对象像素一致。

Focused region comparison evidence

• 标题区：Noto Sans SC Variable 的字重、行高和居中层级与选定稿接近，标题与说明均无截断。
• 入口区：三组编号、分隔线、标题、说明和色彩按钮保持同一解剖结构；按钮使用统一箭头图标，未使用字符或 CSS 绘图替代。
• 移动端：三个入口改为纵向可点击行，按钮收敛为 46px 圆形触点；品牌说明被主动分成两行，避免孤字。

Required fidelity surfaces

• Fonts and typography: 使用 Noto Sans SC Variable；标题、入口标题、说明与辅助文案建立清晰层级，桌面与移动端均无异常换行或截断。
• Spacing and layout rhythm: 桌面端保持一屏布局，入口与对应插画停靠点对齐；移动端使用 18px 安全边距和 12px 入口间距。
• Colors and visual tokens: 平台蓝 #1265e8、气站橙 #dc7100、配送青绿 #068f8b 与选定稿一致映射到编号、按钮和插画路线。
• Image quality and asset fidelity: 主视觉为独立 ImageGen 生成并压缩的 JPEG，Logo 复用仓库原始 SVG；没有占位图、CSS 插画或手绘 SVG。
• Copy and content: 品牌、标语、三套系统名称、定位文案及跳转地址均与确认内容一致。

Interaction and browser checks

• 三个入口均为语义化链接，分别指向 http://p.heqiapp.com、http://z.heqiapp.com、http://d.heqiapp.com。
• 三个入口均配置 target="_blank"、rel="noreferrer" 和明确的无障碍名称。
• 链接具有 hover 与 :focus-visible 状态，并在减少动态效果偏好下关闭位移动画。
• 浏览器在 1440 x 1024 与 390 x 844 完成渲染检查；移动端无横向溢出。
• 浏览器控制台未发现 warning 或 error。

Comparison history

1. 初次桌面对照发现主标语整体偏低，入口文字与插画建筑重叠，属于 P2 级层级偏差。
2. 将标题区上移，并把主视觉场景向下调整，重新捕获相同 1440 x 1024 视口；入口与插画停靠点分离。
3. 初次移动端检查发现说明文字末尾单字成行，属于 P2 级排版问题。
4. 将说明拆为语义连续的两行，重新捕获 390 x 844；标题、说明与三个入口均无孤字、截断或溢出。
5. 最终并排对照未发现剩余 P0、P1 或 P2 问题。

Findings

• 无 P0、P1 或 P2 问题。
• P3: 实现中的生态插画为针对响应式页面重新生成的同风格资产，具体建筑和车辆位置与视觉稿存在轻微差异，但信息顺序、路线颜色和整体构图一致。

Follow-up polish

• 若后续确定正式官网域名，可补充 canonical 与 Open Graph 元信息。

final result: passed