推荐一款页面开发神器,视觉还原可以如此简单

2,385 阅读2分钟

作为一名前端工程师,经常因为做出的页面和UI设计稿之间存在一些偏差,导致和UI同学反复沟(si)通(bi),这个过程很让人沮丧是不是??其实要避免这种情况很简单,一款chrome插件就可以很方便帮助工程师和设计师做UI走查。它的原理是在当前页面上叠加了一层设计稿,可以自由拖拽拉伸,调整透明度等等,页面和设计稿之间的差异一目了然有木有?在方便自己的同时也希望可以方便到更多人,推荐给大家一起使用。

废话不多说, 插件传送门,谷歌商店,,国内可能需要翻墙访问

使用方法

安装好插件后,插件栏会有这个图标(如果图标是灰色的,请刷新页面,注意谷歌商店页面上不生效,应该是谷歌自己禁用了)

点击图标插入设计稿,插入后的设计稿可以随意拖动和拉伸,在拖到合适的位置后,可以点击冻结(或者按下快捷键:d),冻结的设计稿不再响应拖拽和拉伸操作,但是可以改变透明度。这里主要是为了避免设计稿影响到页面原有的交互功能。

如果希望在页面刷新后保留设计稿的状态,可以勾上实时

然后对于某些设计细节想对比的更明显一些,适当切换混合模式有时候会很有帮助。

快捷键:

插件还支持如下快捷键操。

  • h 键: 显示和隐藏图片
  • f 键: 显示和隐藏底部工具栏
  • d 键: 冻结和解冻图片
  • 数字键(0-9):快速设置图片透明度。如:1秒内快速按下两次5,将设置图片55%的透明度。如果1秒内只按下了一次数字键,如5,一秒后将自动补0,即设置图片透明度为50%。
  • 方向键:移动图片,一次移动1px。如果同时按下Shift键,将一次移动10px。
  • 快速匹配
    • alt + 0 : 重置
    • alt + 1 : 原图大小
    • alt + 2 : 原图两倍
    • alt + 3 : 原图一半
    • alt + 4 : 窗口宽度

如果发现快捷键无效,可以检查当前页面焦点是否在某个浏览器控件上(如input,textarea等),有时简单的点一下页面空白处,或者设计稿,就可以解决。

tip:

开始只是为了方便在做UI对比,后来发现,其实在页面开发阶段就可以利用上,插入设计稿后,相当于空白页面上有了一个设计模板,我们直接在模版上临摹页面就好,是不是感觉连测量都可以省了?再配合热刷新,,coding可以如此轻松有木有?