高级QA视觉与交互审计提示

作为资深QA专家兼设计师，您的任务是找出此实现中的每一个视觉差异、交互错误和响应式问题。 ## 输入 - **线上URL或本地构建：** [URL / 本地运行方式] - **设计参考：** [Figma链接 / 设计系统 / CLAUDE.md / 截图] - **目标浏览器：** [例如：“Chrome、Safari、Firefox最新版 + Safari iOS + Chrome Android”] - **目标断点：** [例如：“375px、768px、1024px、1280px、1440px、1920px”] - **优先区域：** [可选 - “请特别检查结账流程和移动端导航”] ## 审核清单 ### 1. 视觉保真度检查 针对每个页面/区块，验证： - [ ] 间距与设计系统标记匹配（而非“差不多就行”） - [ ] 排版：每个断点处的字体、字重、字号、行高、颜色均正确 - [ ] 颜色与设计标记完全一致（使用取色器检查，而非肉眼判断） - [ ] 圆角半径值正确 - [ ] 阴影符合规范 - [ ] 图标尺寸和对齐 - [ ] 图片宽高比和裁剪 - [ ] 使用到的透明度值 ### 2. 响应式行为 在每个断点处检查： - [ ] 布局正确变化（无重叠，无孤立元素） - [ ] 文本保持可读（无截断导致含义丢失） - [ ] 移动端触摸目标 ≥ 44x44px - [ ] 未出现意外水平滚动 - [ ] 图片缩放得当（无拉伸或像素化） - [ ] 导航正确转换（汉堡菜单、抽屉菜单等） - [ ] 弹窗和遮罩层在所有视口尺寸下正常工作 - [ ] 表格有移动端策略（滚动、堆叠或隐藏列） ### 3. 交互质量 - [ ] 所有交互元素均存在悬停状态 - [ ] 悬停过渡流畅（非瞬间切换） - [ ] 所有交互元素均可见焦点状态（键盘导航） - [ ] 激活/按下状态提供反馈 - [ ] 禁用状态视觉上可区分且不可点击 - [ ] 异步操作期间显示加载状态 - [ ] 动画流畅（无卡顿，无布局偏移） - [ ] 滚动动画在正确位置触发 - [ ] 页面过渡（如有）流畅 ### 4. 内容边缘情况 - [ ] 标题、按钮、标签中的超长文本（是否换行或截断？） - [ ] 极短文本（布局是否塌陷？） - [ ] 无图片时的后备方案（图片损坏或数据缺失） - [ ] 所有列表/网格/表格的空状态 - [ ] 列表/网格中的单个项目（布局是否仍然合理？） - [ ] 100+ 个项目（是否分页或崩溃？） - [ ] 用户输入中的特殊字符（重音符号、表情符号、从右到左文本） ### 5. 无障碍快速检查 - [ ] 所有图片均包含替代文本 - [ ] 正文文本颜色对比度 ≥ 4.5:1，大文本 ≥ 3:1 - [ ] 表单输入有关联标签（而非仅占位符） - [ ] 错误消息会向屏幕阅读器播报 - [ ] Tab 键顺序符合逻辑（遵循视觉顺序） - [ ] 弹窗内焦点循环正常工作（无法 Tab 到弹窗后方） - [ ] 存在跳转到内容的链接 - [ ] 无仅通过颜色传达的信息 ### 6. 性能视觉影响 - [ ] 页面加载期间无布局偏移（CLS） - [ ] 图片渐进式加载（模糊加载或骨架屏，而非突然弹出） - [ ] 字体不导致 FOUT/FOIT（未样式化/不可见文本闪烁） - [ ] 首屏内容快速渲染 - [ ] 动画在中端设备上不导致掉帧 ## 输出格式 ### 问题报告 | # | 页面 | 问题 | 类别 | 严重程度 | 浏览器/设备 | 截图描述 | 修复建议 | |---|------|-------|----------|----------|---------------|----------------------|----------------| | 1 | ... | ... | 视觉/响应式/交互/无障碍/性能 | 严重/高/中/低 | ... | ... | ... | ### 摘要统计 - 问题总数：X - 严重：X | 高：X | 中：X | 低：X - 按类别：视觉：X | 响应式：X | 交互：X | 无障碍：X | 性能：X - 优先修复的前5个问题（影响最大） ### 严重程度定义 - **严重：** 功能损坏或布局问题导致无法使用 - **高：** 明显可见的问题，影响用户体验 - **中：** 仔细检查时才能注意到，不妨碍使用 - **低：** 次要的打磨问题，有则更好