前端UI设计稿对比工具 - chrome+webpack插件

本文介绍了一款前端开发者使用的Chrome扩展插件uipx-chrome-plugin,该插件结合肉眼测距与精确测量的优点,提供测距、反相、透明度调节等功能,便于快速准确地对比设计稿与实际页面。此外,还介绍了将其改造为webpack插件uipx-webpack-plugin的过程,以适应移动端开发。这两个工具的实现旨在提高设计稿还原度,简化开发者的工作流程。
摘要由CSDN通过智能技术生成

(切图仔)前端开发者一大重要的职责就是将 UI画稿转化为实际可用的页面,效果图的还原度在相当大的程度上决定了 UIPM的满意度

一般情况下,拿到设计稿后,懒散点的可能直接看图软件打开,肉眼测距就开搞了,负责点的会打开 PS或者更正规的 Photoshop,力图精确到 px,这两种方法各有利弊,前者的还原度大概率堪忧,后者耗时耗力,能把眼睛看瞎,最后都不一定能过得了设计师的像素眼

鄙人不才,恰好热衷并擅长于肉眼测距,只要不是苛刻到死盯像素级的差异,那么完全足够交差,然而天有不测风云,公司的设计部近来加大了对设计稿还原度的较真劲头,导致我与设计师之间摆头的频率直线拉升,一来二去之后筋疲力尽,细细想来,不是长久之计,于是决定着手从根源上解决这个问题

uipx-chrome-plugin

肉眼测距与 PS测量各有利弊,最好能摒弃糟粕并把这两个的优点结合到一起,肉眼测距的优点是短平快,缺点是不够精确,PS测距的优点是够精确,缺点是太慢了,碰上赶进度的需求根本来不及,所以需要做到既快又准

那么,如果把还原稿从 PS中移到正在开发的页面上,再加上一些必要的辅助能力,比如测距,这不就能解决上面的问题了吗?

一般情况下,无论开发 PC端的页面

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值