设计师如何做好还原度走查.pdf

设计师如何做好还原度⾛查

作为设计师，你⼀定遇到过这样的情况，⾃⼰做的设计稿，被开发出来后却完全换了⼀个模样。不仅

视觉上有问题，交互上也有错误。⽽要想避免这样的情况，我们就⼀定要重视还原度⾛查这个阶段。

它是我们产品上线前的必要保障。虽然测试同学会帮助我们验证⼀些流程上的问题，但更多的还原度

细节问题，⽐如交互和字号间距等，则更多依靠我们设计师的来检查。⽽在还原度⾛查的过程中，个

⼈认为主要分为以下⼏个部分：

⼀、还原度何时开始

经过对⽐验证，发现还原度在测试进⾏第⼀轮测试后进⾏，效率和时间能够最⼤化。

原因如下：

•第⼀轮没结束前，很多功能性bug会存在，如果介⼊过早，很难跑完全部流程，加⼤还原度介⼊难

度。

•⼀些明显的交互和视觉问题，测试团队在第⼀轮是能够发现的，也能减少⼀部分⼯作量；

•如果等bug解决得差不多，可能都⼆轮后了，这时候才开始⾛查的话，那么留给设计师的时间就会

⾮常少，因为结测的时间已经固定，这可能导致开发可能没有⾜够的时间修正问题。

⼆、还原度检查内容

当我们拿到开发提测的版本后，应该针对于哪些内容进⾏检测呢。本⼈认为可以整体检查可以分为以

下3个部分：

2.1
整体流程

当我们拿到产品后，第⼀时间可以看下我们的整体的流程是否有遗漏，整体流程是否能够跑通。

⾸先需要确保我们的产品没有⼤的流程问题后，这个时候就可以开始细节的部分。避免某些⼤的流程

被忽略，这往往需要更多的开发量，越早提出来开发就越早介⼊修改。

虽然这个过程基本都会被测试团队在第⼀轮的时候查验出来，但为了避免有遗漏，我们最好还是先把

全流程跑⼀遍以避免发⽣问题。

2.2
交互内容

当流程跑完，这个时候我们就可以进⼊到交互细节的检查。⼀般来说我们在检查时主要注意以下⼏个

⽅⾯：

A.
结合交互说明进⾏逐条验证

⼀般我们的交互说明已经⾮常详尽，包含各类异常状态和细节交互。因此我的建议是在验证的时候可

以结合我们之前的交互说明进⾏对照验证，避免某些部分被遗漏或者忽略。

出现问题有可能是我们的交互阐述的不够清晰或者说研发没有了解设计的逻辑，这些情况都是有可能

发⽣的，因此我们在还原度验证时更需要细⼼验证和沟通。

B.
交互说明未提及的异常状态

这其实是很多设计师经常遇到的问题。我们在写交互说明的时候不可避免会忽略某些细节点。这个时

候如果出现交互说明漏掉的异常状态，就需要和开发团队进⾏沟通。

如果是重要且影响体验的问题，可能就需要拉着开发团队进⾏沟通，评估下时间进⾏修改；

如果是不重要且不影响的体验的问题，就可以等下个迭代或者后续再进⾏对应修改；同时对问题做好

记录，避免下次再出现类似问题。

这同时也反向要求我们在交互说明中尽可能考虑得更加全⾯，才能避免多次返⼯。关于这块有个⼩建

议，可以将平时遗漏的交互记录下来，形成关于⾃⼰薄弱交互环节的⾃查表。通过建⽴专属的交互⾃

查表来强化⾃⼰对于各类状态的认知，从⽽将说明写得更加详尽和完善。

2.3
视觉内容

视觉的还原度检查可以说是占据了整体检查的⼤部分内容。毕竟功能或者交互还有测试团队帮忙验

证，但视觉细节只能靠设计师本⼈来进⾏⾛查了。在这⾥我将其分为以下⼏块内容：

1.「像素眼」观察法

由于习惯问题，设计师对于字体的⼤⼩，元素的对⻬有⼀种天⽣的敏感，因此对于某些⽐较明显的还

原度问题，设计师是能够通过直接观察发现的，⽐如某些元素没有左对⻬。

但这种只适合很多明显偏差的元素，在⼤部分时候，设计师还是需要借助辅助⼯具来协助进⾏还原度

⾛查。

2.
检查元素（F12）协助⾛查

在很多时候，我们发现某些元素存在问题，但不确定的时候，我们就需要借助检查元素辅助还原度⾛

查。检查元素如何操作呢，可以通过右键-检查或者直接按F12来调出，通过⿏标选择元素，即可查看

该元素的所有属性，包括字号、颜⾊、宽度等等都可以直观的看到。

利⽤这种⽅法我们可以检查得⾮常细致，⽐如某些细微的间距是否准确，都可以检查出来。

那么在这⾥我们可以简单介绍下前端的盒⼦模型，也就是你在检查元素中可以看到类似盒⼦的元素。

盒⼦模型是CSS中的概念。所有的HTML元素都可以看作⼀个盒⼦，是⽤来设计和布局时使⽤。它包括

我们常⻅的边距、边框、填充和实际内容。通过了解盒模型有助于我们理解前端是如何进⾏⻚⾯布局

的，同时也帮助我们在⾛查时更直观地看到其中的间距和宽度等。

其实检查元素还能辅助交互状态⾛查，这可能是很多设计师忽略的⼀个点。⽐如我们设定了hover按钮

时有灰⾊底块，此时我们如何验证灰⾊块的⾊值和⼤⼩是否准确呢。

其实辅助元素也可以帮忙，如下图所⽰，我们通