Visual Bugs / 视觉 Bug
Definition / 定义
Visual bugs are issues related to the graphical user interface where elements are displayed incorrectly but the functionality still works.
视觉 Bug 指界面元素显示异常而功能正常的图形用户界面问题。Severity Guidelines / 严重等级判定
| Severity 等级 | Criteria 标准 | Examples 示例 |
|---|---|---|
| Critical 致命 | Blocks usage entirely 完全无法使用 | Content completely unreadable 内容完全不可读 |
| Major 严重 | Key UI elements broken 关键 UI 元素损坏 | Navigation menu overlapping content 导航菜单与内容重叠 |
| Medium 中等 | Noticeable but usable 明显但可用 | Button slightly misaligned 按钮轻微错位 |
| Minor 轻微 | Minor cosmetic issue 轻微外观问题 | 1px off, slightly wrong shade 偏差 1px，颜色略有偏差 |
Common Visual Bug Types / 常见视觉 Bug 类型
- Cross-Browser Issues / 跨浏览器问题 — Works in Chrome but broken in Firefox
- Responsive Breakage / 响应式断裂 — Layout breaks on mobile/tablet
- Text Overflow / 文字溢出 — Text spills outside container
- Image Missing / 图片缺失 — Broken image icons, missing icons
- CSS Inconsistency / CSS 不一致 — Different styling on similar elements
Best Practices for Reporting / 报告最佳实践
Always include:
- Screenshot showing the visual defect / 展示缺陷的截图
- Expected appearance (mockup or description) / 预期外观（设计稿或描述）
- Browser/device info / 浏览器/设备信息
- Viewport size if responsive issue / 响应式问题需提供视口大小