Files
platforms/design-qa.md

4.7 KiB
Raw Blame History

登录页设计 QA

对照目标

  • Source visual truth: /Users/david/.codex/generated_images/019fb64b-4fca-7e12-a4cd-c9b59661af31/call_06YYBym4qGkCMq6raecZit9J.png
  • Platform implementation: /tmp/heqi-login-design-qa/platform_admin/platform-login-desktop-revised.png
  • Gas implementation: /tmp/heqi-login-design-qa/gas_admin/gas-login-desktop-revised.png
  • Delivery implementation: /tmp/heqi-login-design-qa/delivery_admin/delivery-login-desktop-revised.png
  • Desktop family evidence: /tmp/heqi-login-design-qa/platform_admin/login-family-desktop-revised.jpg
  • Mobile layout evidence: browser DOM geometry and overflow checks at 390 x 844
  • Source/implementation comparison: /tmp/heqi-login-design-qa/platform_admin/platform-source-vs-implementation.png

归一化条件

  • Source pixels: 1487 x 1058.
  • Source normalized pixels: 1440 x 1024.
  • Desktop implementation pixels and CSS viewport: 1440 x 1024.
  • Mobile implementation pixels and CSS viewport: 390 x 844.
  • Density normalization: screenshots and CSS viewports are 1:1; the source was resized to the desktop comparison viewport.
  • State: 初始登录态,用户名已记忆,密码为空,复选框选中。

Full-view comparison evidence

平台端保留深蓝色等距业务场景、居中的高不透明度磨砂卡片、蓝色主按钮、紧凑表单节奏和下方智能阀门焦点。按用户最新要求,三套页面均移除左上角 Logo 与标题。气站端改为暖米色日间气站场景,配送点端改为浅蓝薄荷色日间配送场景;两者与平台深色背景明显区分,同时沿用同一卡片骨架维持品牌家族感。

三套桌面页面保持一致的卡片宽度、字号层级、输入高度、圆角和阴影;三套移动页面均为 358 x 501 卡片、左右各 16px 安全边距,无横向或纵向溢出。

Focused region comparison evidence

未额外裁切局部图。最新三联对照由三张完整 1440 x 1024 页面截图等比缩放后横向拼接,能够直接检查背景差异、卡片位置、输入控件、按钮和小字。

Required fidelity surfaces

  • Fonts and typography: 使用系统中文无衬线字体,标题、系统名、定位文案、表单和页脚层级与视觉稿一致;没有换行或截断。
  • Spacing and layout rhythm: 卡片宽度 420px,输入和按钮高度 48px,桌面卡片位于视觉中心上方,移动端保持 16px 安全边距。
  • Colors and visual tokens: 平台深蓝、气站暖米色、配送浅蓝薄荷色分别映射到背景资产;按钮与焦点态继续使用平台蓝、气站橙、配送青绿,卡片对比度稳定。
  • Image quality and asset fidelity: 三张背景均为独立生成并压缩的 JPEG 资产,未使用 CSS 绘图、占位图或伪造图形Logo 继续使用仓库原始 SVG。
  • Copy and content: 三套系统统一为“和气”,标题合并为单行“登录 + 完整系统名称”,并保留已确认的三组业务定位文案。

Interaction and browser checks

  • 用户名、密码、记住用户名和登录按钮均可通过可访问名称唯一定位。
  • 输入字段可编辑;记住用户名可切换。
  • 空表单提交会显示“请输入用户名”和“请输入密码”两个客户端校验提示。
  • 三套页面在 1440 x 1024390 x 844 视口完成浏览器渲染检查。
  • 最新移动端 DOM 检查结果均为 390 x 844,页面滚动尺寸同为 390 x 844,卡片尺寸同为 358 x 501,左边距 16px,且 .brand-lockup 均不存在。
  • 浏览器控制台未发现 warning 或 error。

Comparison history

  1. 初次桌面对照发现卡片中心比视觉稿低约 95px,属于 P2 级主构图偏差。
  2. 将桌面卡片上移 56px、移动卡片上移 24px,重新构建并在相同视口截图。
  3. 复查后卡片与视觉稿的垂直中心差异降至约 40px;保留这部分差异是为了更符合用户明确提出的“中间登录框”,归为可接受的 P3。
  4. 用户要求去掉左上角 Logo 与标题,并让气站、配送点背景区别于平台且使用浅色背景。
  5. 移除三套页面品牌锁定区,重新生成气站暖米色日间场景和配送点浅蓝薄荷色日间场景;平台背景保持不变。
  6. 重新完成三套桌面端并排视觉复核与 390 x 844 移动端几何、溢出检查。
  7. 将原主标题与系统副标题合并为单行完整登录标题;三套页面在 390px 宽度下均为一行,且没有残留 .login-form-system 节点。

Findings

  • 无 P0、P1 或 P2 问题。
  • P3: 实现的卡片比生成稿略靠近视口正中,属于响应用户“中间登录框”要求的有意调整。

Follow-up polish

  • 若后续提供正式版权主体和年份,可替换当前统一页脚文案。

final result: passed