设计小姐姐都说好的视觉还原对比利器

用户1097444

发布于 2022-06-29 15:08:22

2K0

发布于 2022-06-29 15:08:22

文章被收录于专栏：腾讯IMWeb前端团队

1. 导语

设计走查已经是很多需求开发中不可缺少的一环，但是目前走查大部分都停留在人工肉眼对开发还原页面截图和设计稿进行对比找不同，效率比较低。这里整理了一些协助对比，提高开发还原度的工具。

页面对比工具，可以分为三种不同展现形式：

chrome 插件：直接在开发页面上进行对比，设计稿覆盖到页面上，对比查看页面不同点
在线网站 / 客户端对比：通过上传实现截图和设计稿进行对比，增加一些参考线、取色器、度量尺寸等辅助工具。
npm 包工具：适合开发人员使用，引入对应代码包，通过编码操作传入对比页面，输出最终的对比结果，更进一步可以集成到代码构建 CI 中，实时进行对比，输出还原度打分

下面详细介绍不同工具使用体验。

2. chrome 插件

2.1 perfectpixel

chrome 下载地址：perfectpixel

将设计稿上传到网页上，跟网页进行重叠对比，通过移动设计稿以及改变设计稿透明度，查看与底层页面的不同点。

支持上传多个设计稿并进行切换对比，还支持对图片进行反色对比。

总结：功能不多，设计简单，能够满足最基本的设计对比查看。

2.2 copixel

官网：copixel

使用教程：使用教程

和上面插件的功能类似，将开发稿和设计稿进行重叠对比。

上传设计稿后，降低设计稿的透明度，可以动态改变尺寸、位置、大小。完美重合以后，开始对比。

总结：可以看成上面 perfectpixel 的加强版本，支持图片比例调整、开发面板自定义、快捷键支持等功能

2.3 CSS Peeper

官网：csspeeper

一款轻松查看网页上所有元素的 CSS 属性的插件，效果跟打开开发者调试工具进行审查元素类似。

更加直观，不需要专业技术，直接在开发页面上选中不同区域，实时展示区域内布局、文字背景颜色、间距、对齐方式、行高等相关样式属性。

另一个功能点是，可以直接选中网页的 icon，点击下载。

总结：跟前面两个插件对比，就能发现这个插件重点不在设计稿对比上，可以说没啥关系，但是对于辅助设计查看页面结构，配合对比工具一起使用，可以更加专业地发现页面颜色、布局等细微差距。

2.4 Design-Compare

企业微信前端开发的一套工具，分为两部分：

在线图片对比
视觉插件对比

插件目前仅支持 Figma，同样通过叠加设计稿，设置透明度进行对比。

不同的是，在 Figma 页面下，可以选择两种方式上传设计稿：

网页模拟器，直接输入网址，加载目标页面，然后设置透明度，拖动页面到开发稿截图上面对比。
图片模拟器，上传本地设计稿，对比。

官网截图：

另外一部分功能是在线图片对比，在网站上传入图片后，生成了差异结果图片和相识匹配度：

总结：design-Compare 工具是这里列出来几个工具里面最强大的，虽然插件只支持 Figma，用在线对比网站查看，不用人工去找页面差距，而且能计算出匹配还原度，非常方便

3. 客户端

3.1 像素眼 PixelEye

公司内部开源产品，基于 Electron 框架进行开发，可以支持 Windows 和 MacOS 系统。

主要功能有对间距测量、尺寸测量、颜色获取、增加参考线图片对比，也可以将 4 个功能点一起使用。充分利用客户端优势，鼠标或快捷键操作很方便，尺寸和间距测量也很流畅，

看下官网截图：

总结：客户端工具使用非常流畅，特别是元素尺寸测量时，增加的边界检测自动吸附功能，在设计稿和还原稿细节查看时用起来很自然，增加参考线功能更在 PS 里面使用感觉类似。

4. npm 包工具

4.1 pixelmatch

github 地址：pixelmatch

demo：pixelmatch-demo

一个轻量级的 JavaScript 像素级图片对比库，用来比较测试产生的截图。

代码实现只有 150 行，没有任何依赖。

（1）直接在命令行使用：

pixelmatch image1.png image2.png output.png 0.1

output.png：画出了两张图片的不同点。
0.1：表示匹配阈值，值越小，比较越敏感。

（2）在代码中调用 api 进行对比：

pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});

返回不匹配像素点个数，可以通过图片的尺寸，计算出不匹配百分比，作为衡量设计稿还原指标。

再看下给出的 demo：

threshold 系数为 0.06 时，计算出来 35240 个有差异的像素点，占比有 19.528%。

总结：轻量级代码库，作者参考了两篇论文，加上了抗锯齿像素检测，传入参数 threshold 控制匹配阈值

2. look-same

github 地址：https://github.com/gemini-testing/looks-same

比较图片差异的 JavaScript 库，默认情况下只会比较一些非常明显的差异。

var looksSame = require('looks-same');

looksSame('image1.png', 'image2.png', function(error, {equal}) {
    // equal will be true, if images looks the same
});

考虑到人眼对于颜色的感知，提供了一些实际截图对比过程中，可以忽略的一些细节选项：

ignoreCaret：忽略截图里面的光标。
ignoreAntialiasing：忽略图片锯齿。
shouldCluster：返回差异区域的位置坐标。

// 如果想生成差异图片，用 looksSame.createDiff() api

looksSame.createDiff({
    reference: '/path/to/reference/image.png',
    current: '/path/to/current/image.png',
    diff: '/path/to/save/diff/to.png',
    highlightColor: '#ff00ff', // color to highlight the differences
    strict: false, // strict comparsion
    tolerance: 2.5,
    antialiasingTolerance: 0,
    ignoreAntialiasing: true, // ignore antialising by default
    ignoreCaret: true// ignore caret by default
}, function(error) {
    ...
});

总结：这个包原本为 gemini 网页视觉回归测试工具创建，图片对比考虑到人类视觉感知，会忽略输入框闪烁光标、抗锯齿等细节。