编辑导语：在B端产品设计中，为确保产品的视觉效果、交互效果可以更好、用户体验可以更优，做好设计走查便成为十分重要的一个环节。本篇文章里，作者结合其工作经验分享总结了他对产品视觉校验的看法与方法，一起来看一下。

来时如露，去时如电，留不住的始终是刹那芳华。

这是一篇关于B端产品视觉校验的文章，全文10407字，阅读时长约20分钟。

今天这篇文章，传授我在工作中关于校验的心得～

一、为什么要做设计校验 1. 在工作中遇到的状况

不管是在大公司工作、还是小公司工作，设计师常常会遇到这样的问题，在新产品发布之前，都会做一遍线上的UI视觉校验。

在这个过程中，前端开发工程师所写的界面总会发生图片变形、文字字号不对、元素与元素之间不对齐的事情发生。

设计师给前端开发工程师标记了已经实现页面中错误的地方，但是多数前端开发工程师一听那么多头都大了，在紧张的上线日期限制下更有甚者不予理睬直接上线，用户吐槽设计不严谨，导致设计背锅。

为什么老板会觉得不好呢？其实是产品在用户体验上的本能层次出现不好的体验。

2. 好产品具备的特征

全球的认知心理学家（美）诺曼在《情感化设计》这本书中讲产品本能水平的设计——本能层；行为水平的设计——行为层；反思水平的设计——反思层。

如果把产品做得作为产品一个目标的话，我们可以利用产品五要素把产品划分5个层次，再用诺曼教授提出的感情感化设计的3个层次联系起来，并把这些情感分为5个纬度进行考察就可以得到下面这张知识网络图。

从上面这张图我们可以看出用户评判一个产品好坏的标准还是来自于产品的表现层、框架层、结构层中的直观体验，也就是本能层次和行为层次的感受。如果产品的吸引度、完成度、满意度、忠诚度、推荐度的数据很高也就证明产品很好，如果数据表现不好那可以判断产品还是有需要提升的地方。

回到第一张图片，老板觉得有问题的原因就在于产品在本能层次的不合格，那重点来了，有什么设计方法可以避免本能层次出现问题的情况吗？我的答案是可以使用设计走查这个方法。

3. 设计走查的意义

一名专业的B端设计师，并不是说你把设计稿做得很完美、把标注和切图完整地交给开发小哥哥之后就完事了。其实在这个阶段设计师只是完成设计工作中产出效果图的工作，并没有进行最后验收的环节。如果开发还原出来的产品跟设计稿差距较大的话，设计其实也是要负很大责任的。

就好比工厂的流水线中一台电脑的生产，把电脑从工厂搬到运输车上也算是电脑生产完毕，但是必须要送到客户手里，客户签字确认，工厂才能算是电脑卖出去了。由此可见设计走查是保证用户有高质量体验的不可缺少的一个环节。

我理解设计走查的意义在于3点：

确保产品设计细节的还原度合格，从而保证产品的视觉效果和交互体验能满足用户需求。

是设计师衡量设计师是否合格设计师的一项重要指标；

通过细致入微的专业设计素质赢得公司团队内部设计话语权的提升。

既然设计走查这么重要为什么大家还会忽视呢？

其实大家对设计走查的看法有一个误区，如果你想成为一名专业的B端设计师，一定要改变以上的错误观念，摆正一个正确的设计观念。

设计师在公司代表着视觉上的最高水准，设计稿则是设计师专业能力的体现。

如果一个设计师的能力是100分，设计稿的分值90分，开发实现后的产品分值为50分，在没有进行设计校验的情况下，这时候将产品发布出去，用户或者老板只知道该公司的产品设计只有50分，而不会知道背后设计师最高的水准是100分。

慢慢地，设计师在开发团队中做设计就会变得很被动，越被动就会越没有话语权。所以对一名专业的B端设计师来说，除了拥有很强大的效果图设计能力之外，还需要有保证效果图落地的能力。

二、设计走查和校验区别 1. 设计走查的种类

设计走查是一种设计层面找寻问题的方法，多数应用在找寻产品问题或者是对项目开发过程中的测试环节。具体的方式我归类为3种：

体验设计走查：是指人机交互之间的细节体验、比如非力度测试、满意度测试。可用性测试的调查这些方法都是体验性走差的一部分。

交互设计走查：是指针对产品场景与场景之间的动态交互效果进行走查。

视觉设计走查：是指前端开发出来的静态页跟设计师出的效果进行视觉细节的校对和检查，确保开发出来的视觉和设计图保持一致。

2. 制作走查表的三种方法

很多人会纳闷了，我们公司是没有这种走差表的，那怎么进行这三种设计走查呢？这里告诉大家我的一个工作办法，总共分为3个阶段“寻找·借鉴”——“思考·定制”——“优化·完善”。

1）寻找·借鉴

当大家有一个新的概念、如果想更深入了解这个概念，就需要在网上找一些关于这个概念的信息，这个过程就是寻找。

如果大家没有做过类似这种设计走查的经验，那第一时间也是去寻找，寻找设计走查的概念、甚至是做好了的走查表。那有人会有疑问那不是抄袭吗？我的回答“是的”，但是大家要想清楚一个问题，在工作中用最高效简单的办法完成工作内容是最重要的。

可能还会有人问，别的公司和我们公司做的行业不同，那别人公司的走查表我们公司能用吗？我的回答是可以复用70%左右的，那剩下的30%就需要进入下一个步骤“思考·定制”阶段了。

2）思考·定制

当我们完成第一步之后，就需要就自己所处的行业或者产品有一个认知，思考我们的用户类型是什么、他们的使用场景是什么、他们最需要解决的需求是什么等等问题。然后再根据这些问题定制一系列体验、交互、设计的问题，那就成为了自己产品定制的一份设计走查表了。

3）优化·完善

任何工作都需要持续迭代，为了变得更好地适合当前的工作。

比如在第二阶段定制的问题，有些微交互动效果的问题，前年是用户比较在意的，现在很多产品都有了微交互动效果，现在还问意义就没有那么大了。我们的设计走查表也要根据互联网的大环境不断地进行优化和完善。

3. 产品表现层——视觉校验

设计走查和设计校验并没有大的区分，但是我理解设计走查是一个比较新型的词，设计走查的范围要比设计校验的范围大一些。

有些公司会把设计走查应用与改版之前当作找寻产品问题的一种方法，也有一些公司会把设计走查应用于项目做完开发、在测试环节做测试的一种方法。比如在启动产品改版前可以通过“视觉设计基础自查表”来收集产品目前的视觉体验问题。

当项目处于即将上线在测试阶段时候可以使用“视觉设计基础自查表”来审查产品视觉实现层面是否合格，现在很多公司都用更简单的“设计校验问题记录”表格来把视觉问题记录。

4. 视觉校验需要审查哪些纬度

设计校验验收表，可以简单地理解为是用于审查产品表现层的“形状、色彩、字体、构成、质感、动效”这六点问题的记录的表格。其实这六点也是诺曼教授提出的感情感化设计中本能层次和行为层次审查的六点。

三、视觉校验的标准是什么

在讲如何做之前，大家还是要先了解一下验收流程中的步骤。

1. 视觉校验做什么

这里描述的两点一个是开发阶段、测试阶段的流程。

在公司的项目开发阶段：是设计师设计完效果图，进行标注（现在大家都是使用第三方标注软件比如蓝湖、摹刻、Sketch Measure 等），再交付开发。

在项目测试阶段：一般都是产品经理发起一个项目进入测试阶段的通知，把设计师、开发、测试、和产品经理都设置为参与者，之后由测试人员进行产品功能逻辑的测试、设计师进行视觉验收。验收完成后产品经理验收测试结果，如有问题找开发商进行修改。修改完毕再找测试、设计、产品经理进行确认，没问题就封版了，产品经理确认发版日期，如果还有问题就再修改。

2. 视觉校验的验收标准

很多刚入行的设计新手，在校验阶段不知道那些纬度的视觉差别，以至于很多视觉元素都需要查看。对于C端来说，界面的场景因为交互比较简单还能应付，但是对于模块功能复杂、交互场景众多的B端UI设计来说，每个场景都要查看，很耗费精力，工作效率也不高。

所以我总结以下几个高频出现问题的点供大家参考，大家可以按照以下几个纬度进行视觉走查，提高自己在工作中的效率。

1）检查设计稿的可行性

人无完人，再专业的设计师，也不可能100%保证自己的设计方案就是最好的设计方案。在交付设计稿前期，设计师应该自我检查自己的设计稿是否能清晰地传递信息、对于一些重要的模块是否能凸显出来、对于一些比较复杂的交互场景开发是否能够实现、市场上众多的屏幕尺寸这样的布局方式是否是最为合理的，等等这些纬度进行思考做设计，保证设计方案的可行性。

这里我举一个真实的案例。

起初我接到的需求就是设计一个模块里面的信息排版，如果我直接采用第一个方案那肯定是不行，因为信息层级区分不够明显，所以第二个方案把数字标签用颜色进行了区分。

但是我又想，如果出现文案比较多的场景，对齐方式都是左对齐，那“指标值”的细心就不可能保持左对齐，所以我又出了第四个方案。目前来看第四种方案可适应多种场景，算是最佳方案。

假设当时我就交付前端开发第一种方案，上线后出现问题，还需要调整到第四种方案，慢慢的前端开发就会质疑设计的专业能力，后续合作也会难以推进了。

2）组件调用是否正确

B端产品的业务复杂，模块交叉设计数量多，所以在设计B端产品初级都是用原子化的思维搭建一个组件库。前端是开发阶段在样式库中写一个标准的控件样式，然后在不同的页面场景中调用公共样式，原理类似于我们在 Sketch 中建 Symbol。我们要从两个方面看组件是否调用正确。

① 公共组件是否正确

公共组件调用正确，好处就是公产品的整体视觉风格是一致的，比如页面的侧边导航、搜索场景、详情页场景布局是否一致，在断网或者报错的场景中出现提醒条样式是否一致，可进行交互的按钮样式出现的交互状态的按钮是否一致等等。

② 业务组件是否正确

在真实开发场景中，有一些前端开发在虽然调用一个样式，但是在设计规范中一个样式可能会有多个尺寸。比如这个按钮，在开发阶段避免不了出现样式虽然是对的、但是尺寸调用错误的情况出现，所以要查看一下组件的样式和尺寸前端开发是否调用正确。

按照这个思路去设计，最为重要的就是要检查开发人员调用的组件库的规格是否是我们设计稿的规格，以此类推去整体的布局、按钮样式，报错样式。

这里需要描述的内容相对较多，以后有机会我可以再补充一份关于《如何搭B端建组件库》的文章，咱们详细聊一聊。

3）空间关系是否一致

空间关系可以简单地理解为模块与模块之间的“间距”关系和组件与组件之间“间距”的关系。

① 模块与模块之间——间距

所有模块（卡片）之间的间距，这里具体指的页面布局包括横向间距和纵向间距，大家可以采用4px（或者8px）的倍数进行栅格布局，把栅格布局的基础规范梳理出来，以这个规范当作标注来审查横向间距和纵向间距。

② 组件与组件之间——间距

另外一点就是我们在搭建组件阶段，组件与组件之间的间距关系是否一致，不要出现不对齐的情况出现。

③ 为什么要用统一间距

大家了解空间关系都看那些纬度后，我们再来解答一下大家的心中的疑惑。总说间距要保持一致，但是为什么要保持一致呢？主要原因有以下三点：

对于如何使用间距，我建议大家可以看一看《写给大家看的设计书》里面关于版式设计四大原则的讲解和有关格式塔原理的文章。

4）文案的显示是否清晰

在UI设计中，我们总避免不了与字体打交道，字体也经常是我们在设计中容易忽视的部分，影响字体的清晰度无非是字体、字号，字重、段间距这几个参数的设计。

① 字体

字体的实现其实是电脑渲染的一个过程，mac电脑默认字体是苹方，windows电脑默认字体是微软雅黑。

在字体的选择里面行业里是有标准的规范的，比如ont-family：serif、sans-serif、monospace、cursive和fantasy这五种字体。

前端在编写代码时候会把这种多个字体名称保存为“字体的回退机制”来定义，意思就是如果展示的设备（浏览器）检索没有第一款字体，就依次顺延使用下一款字体。这个大家只需要了解就好，在字体选择中使用频次最多的还是对数字字体的选择。

对于数字的字体设计要提前查看是否字体有版权。这里分享一个可以免费查询字体的网站：https://fonts.safe.360.cn/?from=bd

不同的网站对字体排序的方式可能不一样，有兴趣的小伙伴可以用下面这个的方法进行查看。

② 字号/行高

对字体的字号也要进行走查，因为在开发阶段在不同的浏览器显示的字号会有变形的情况出现。

另外考虑各个浏览器的兼容问题，pc端建议使用最好的字号是12pt，因为12pt可以保证在现在市面上的浏览器种是可以清晰显示的。如果有特殊场景需要用到12pt以下的字号，需要和开发说明并且标注出来。

③ 字重

设计区分文案层级的场景使用频率最高、视觉效果最好的设计方法就是给字体加粗的字体样式了。

这里要注意的是初级设计师的眼力可能还没有达到很高的水平，尤其是最小的字体显示加粗或者不加粗的效果，在电脑那么大的屏幕上感官并不是很明显，所以最好可以通过从代码的层面进行核对，具体方式可以看图：

5）颜色的选择是否科学

产品是给用户呈现面积最大的一个元素，对用户来说感官层也是表现最为明显的一个元素，所以在校验中“颜色”是最容易造成落地页面与设计稿视觉差异的一个因素。

① 色差

因为大家屏幕的技术一般是LG屏幕（屏幕的使用时间越长色彩的还原度越低）。

虽然有的时候在查看代码时候色值是正确的，但是也要根据具体的场景进行分析，这里建议大家不要使用具有不透明度的色值（虽然在C端中经常会使用，有不透明度会使颜色比较透亮，但是在B端产品中定位是工具，工具就要以效率在第一位、美观在第二位，所以这个场景的颜色使用尽量以清晰展示为第一准则）。

② 颜色种类

B端产品中，柱状图、折线图的样式比较多，在设计这类图标时候尽量避免多种颜色的出现，还是因为B端产品定位的原因，太多的颜色设计势必会干扰用户进行判断。