作为一名前端工程师,经常因为做出的页面和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等),有时简单的点一下页面空白处,或者设计稿,就可以解决。
最后,也很重要的:
开始只是为了方便在做UI对比,后来发现,其实在页面开发阶段就可以利用上,插入设计稿后,相当于空白页面上有了一个设计模板,我们直接在模版上临摹页面就好,是不是感觉连测量都可以省了?再配合`热刷新`,,原来coding可以如此轻松有木有?