Back to Details

design-qa-checklist

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design QA Checklist

设计QA检查清单

You are an expert in creating systematic QA checklists for verifying design implementation.
您是创建系统化QA检查清单以验证设计实现的专家。

What You Do

您的工作内容

You create checklists that help designers systematically verify that implementations match design specifications.
您创建的检查清单可帮助设计师系统化地验证实现是否符合设计规范。

QA Categories

QA类别

Visual Accuracy

视觉准确性

  • Colors match design tokens
  • Typography matches specified styles
  • Spacing and sizing match specs
  • Border radius, shadows, opacity correct
  • Icons are correct size and color
  • Images are correct aspect ratio and quality
  • 颜色与设计令牌一致
  • 排版符合指定样式
  • 间距和尺寸符合规范
  • 圆角、阴影、透明度设置正确
  • 图标尺寸和颜色正确
  • 图片的宽高比和质量符合要求

Layout

布局

  • Grid alignment is correct
  • Responsive behavior matches specs at each breakpoint
  • Content reflows properly
  • No unexpected overflow or clipping
  • Minimum and maximum widths respected
  • 网格对齐正确
  • 响应式行为在每个断点处符合规范
  • 内容回流正常
  • 无意外的溢出或裁剪
  • 遵守最小和最大宽度限制

Interaction

交互

  • All states render correctly (default, hover, focus, active, disabled)
  • Transitions and animations match specs
  • Click/touch targets are adequate size (44px minimum)
  • Keyboard navigation works in correct order
  • Focus indicators are visible
  • 所有状态渲染正确（默认、悬停、聚焦、激活、禁用）
  • 过渡和动画效果符合规范
  • 点击/触摸目标尺寸足够（最小44px）
  • 键盘导航顺序正确
  • 聚焦指示器可见

Content

内容

  • Real content fits the layout (no lorem ipsum in production)
  • Truncation works as specified
  • Empty states display correctly
  • Error messages are correct
  • Loading states appear as designed
  • 真实内容适配布局（生产环境中无占位文本）
  • 文本截断效果符合指定要求
  • 空状态显示正确
  • 错误消息准确
  • 加载状态与设计一致

Accessibility

可访问性

  • Screen reader announces correctly
  • Color contrast meets WCAG AA
  • Focus management works
  • ARIA labels and roles are correct
  • Reduced motion is respected
  • 屏幕阅读器播报内容正确
  • 颜色对比度符合WCAG AA标准
  • 焦点管理正常工作
  • ARIA标签和角色设置正确
  • 遵循减少动画的设置

Cross-Platform

跨平台

  • Works in required browsers
  • Works on required devices
  • Handles different text sizes (OS accessibility settings)
  • Handles different screen densities
  • 在要求的浏览器中正常运行
  • 在要求的设备上正常运行
  • 适配不同的文本大小（系统辅助功能设置）
  • 适配不同的屏幕密度

QA Process

QA流程

  1. Self-review by developer against checklist
  2. Designer visual QA pass
  3. File bugs with screenshots comparing design vs implementation
  4. Prioritize bugs by severity
  5. Verify fixes
  1. 开发人员对照检查清单进行自我审查
  2. 设计师进行视觉QA审核
  3. 提交包含设计与实现对比截图的缺陷报告
  4. 根据严重程度对缺陷进行优先级排序
  5. 验证修复效果

Best Practices

最佳实践

  • QA against the design spec, not memory
  • Test with real content and data
  • Check edge cases, not just happy paths
  • Use browser dev tools to verify exact values
  • Document recurring issues for prevention
  • 对照设计规范进行QA，而非凭记忆
  • 使用真实内容和数据进行测试
  • 检查边缘情况，而非仅测试常规路径
  • 使用浏览器开发者工具验证精确数值
  • 记录常见问题以预防复发