界面设计上线前怎样核对关键边界

界面设计上线前怎样核对关键边界交付前的检查不是把所有像素差异压成零。字体渲染、浏览器版本和动态内容都会带来合理变化。好的基线测试能发现意外回归人工走查则确认关键任务、可访问性和视觉意图没有走偏。import { test, expect } from playwright/test; test(弹窗在窄屏可操作, async ({ page }) { await page.setViewportSize({ width: 390, height: 844 }); await page.goto(/components/modal); await page.getByRole(button, { name: 打开弹窗 }).click(); await expect(page.getByRole(dialog)).toBeVisible(); await expect(page).toHaveScreenshot(modal-narrow.png, { maxDiffPixelRatio: 0.01 }); });截图要固定数据、时区、字体和动画状态避免把随机变化误报为缺陷。性能则以真实交互录制为准无头环境适合做回归信号不适合承诺精确帧率。最后检查焦点顺序、减少动态效果、错误状态和窄屏退出路径往往比细微色差更值得花时间。