65 lines
4.2 KiB
Markdown
65 lines
4.2 KiB
Markdown
|
# 和气管理入口门户设计 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
|