69 lines
4.7 KiB
Markdown
69 lines
4.7 KiB
Markdown
# 登录页设计 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 1024` 和 `390 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
|