Files
suixinkan_uikit/design-qa.md
T

3.2 KiB
Raw Blame History

注销账号页 Design QA

对比目标

  • source visual truth path: /Users/hxindemacmini/.codex/generated_images/01a01eb7-eda7-7f73-ae64-60c5195c974a/exec-1ece6a7c-2a8f-4d8e-a33f-aa5a4fc11c80.png
  • implementation screenshot path: /Users/hxindemacmini/.codex/visualizations/2026/08/20/01a01eb7-eda7-7f73-ae64-60c5195c974a/account-deletion-implementation-v2.png
  • full-view comparison path: /Users/hxindemacmini/.codex/visualizations/2026/08/20/01a01eb7-eda7-7f73-ae64-60c5195c974a/account-deletion-comparison-v2.png
  • viewport: iPhone 17 Pro 模拟器,402 × 874 pt,竖屏,浅色模式
  • source pixels: 852 × 1846,按 @2x 归一化为约 426 × 923 pt
  • implementation pixels: 1206 × 2622,@3x,对应 402 × 874 pt
  • density normalization: 对比图将实现截图归一化到 852 × 1846,与设计图等像素并排比较
  • state: 资产核验加载完成、确认框未勾选、主按钮可点击

Full-view comparison evidence

信息层级、红色风险提示、四项资产卡片、资产明细入口、注销后果卡片、确认框和蓝色主按钮均与设计方向一致。实现保留 iOS 原生状态栏和安全区;设计图没有状态栏且画布更高,因此较小设备首屏只展示注销后果卡片的前两项,剩余内容通过原生滚动区域查看,底部确认和主按钮始终可操作。

Focused region comparison evidence

无需额外局部裁图。等尺寸并排图中,标题、资产数字、分割线、风险色、图标、确认框和主按钮均清晰可读,已经足以核对字体、间距、颜色、图标和文案。

Findings

  • 无可执行的 P0、P1 或 P2 差异。
  • 字体与排版:使用系统中文字体;标题、资产名、资产值和说明文本的层级、字重与设计一致,无截断。
  • 间距与布局:16pt 页面边距、12pt 圆角、资产行节奏和卡片间距一致;原生状态栏及较短屏幕导致后果列表需要滚动,属于平台和视口差异。
  • 颜色与视觉令牌:使用项目现有的页面背景、主色、危险色和边框令牌,语义与设计一致。
  • 图片与图标:页面没有照片类素材;风险和后果图标使用 SF Symbols,清晰且风格统一。
  • 文案与内容:资产名称、数值、注销后果和7天恢复提示与确认稿一致;没有“可放弃”标签。

Comparison history

  1. 第一轮证据:account-deletion-comparison-v1.png。发现 [P2] 设计图在未勾选状态仍显示蓝色主按钮,而实现显示灰色禁用按钮。
  2. 修正:将主按钮的视觉可点击状态与业务确认校验分离。资产加载完成后按钮保持蓝色;未勾选时点击会提示先确认,不能进入验证页。
  3. 第二轮证据:account-deletion-comparison-v2.png。按钮状态已与设计一致,勾选保护由单元测试验证,无新增 P0/P1/P2 差异。

Implementation checklist

  • 保持资产数据中性展示,不出现“可放弃”标签
  • 保持未勾选时蓝色主按钮视觉
  • 未勾选时阻止进入验证流程并提示用户
  • 小屏幕使用滚动区域,底部确认与主操作常驻安全区
  • 保留原生 iOS 状态栏、导航栏和动态岛安全区

final result: passed