设计稿和上线页面不一致,UI验收怎样区分还原问题与数据问题

先在相同终端、视口、内容和状态下比较,再判断差异来自样式、资源、交互还是数据。截图只能证明某个时刻的外观;点击行为和业务结果必须单独验证。

阅读目录5 个章节

先建立可重复的比较条件

记录设计版本、页面版本、浏览器、窗口尺寸、系统缩放、语言和使用账号。准备一组可复用的测试记录,明确应处于加载完成、空数据还是错误状态。设计稿只有短名称而页面用了长公司名,不能只凭换行就断定开发没有还原。

同样,也不能用“真实数据较长”解释所有错位。设计范围若明确包含长标题和窄屏,运行页面就需要按既定规则换行,而不是截掉内容。比较条件的作用是让双方找到问题,不是降低可读性要求。

把差异分到正确的处理队列

一处问题可能同时涉及几类。例如金额超长导致按钮被挤掉,要确认金额本身是否正确,再检查布局边界;不能只缩小数字把错误值藏住。记录应保留输入、操作、观察结果和预期依据。

字体与加载时机需要单独排查

同一段文字因字体替代而换行,不一定是容器宽度改错。开发可以检查字体请求是否失败、实际使用字体和加载前后布局。MDN字体加载API说明提供了观察字体加载状态的机制;等待字体处理完成有助于稳定截图,但不保证指定字体一定成功,也不能证明所有图片和业务数据已加载。

验收既要看稳定后的页面,也要看首次访问的过程。若字体或图片出现时导致操作位置明显变化,应按加载稳定性处理;不能只选择最终漂亮的截图。缓存存在与不存在的两次访问都值得核对。

用差异单代替“还差点感觉”

假设某条记录的英文标题遮住了操作按钮,差异单可写明页面、账号角色、语言、窗口尺寸、记录编号、操作步骤、截图与期望:标题完整换行,按钮保留且可点击。这样的说明能直接复现,远比“英文不好看”有效。说明性测试记录应去掉真实个人信息。

对于字体抗锯齿等平台差异,可先确认是否影响阅读与层次,再决定是否属于缺陷。不同系统不一定逐像素完全一致,但不能以此忽略丢字、遮挡、焦点不可见或关键按钮失效。

修正后如何复验

  1. 用原记录、原条件重现,确认问题已经消失,而不是测试数据换短了。
  2. 检查同类组件的另一个页面,避免局部补丁破坏共享样式。
  3. 换一个边界样本,例如空值、长值或无权限,检查修正仍成立。
  4. 实际完成点击、提交和返回,确认画面正常之外结果也正确。
  5. 记录修复版本和剩余事项,区分设计缺陷、待补资料与新增需求。

纯设计验收可确认稿件、状态和交接资料;实现验收才能判断页面是否运行正确。费用和修改轮次应按双方约定处理,不应从一张差异截图直接推定全部返工责任。

提交还原问题时,附上设计版本、实际记录和复现路径,便于沿原型交接约定判断缺失的是样式、状态还是功能。涉及旧软件还应核对需要保留的操作行为。UI设计服务的评审成果应落到可复验的问题记录,而非笼统的“看着不像”。