解决前端工程师与UI设计协同工作的问题

前端工程师与UI设计协同工作主要环节在于设计图与前端界面是否一致。（还原度）

不得不说，设计图与前端界面实现不一致的问题时有发生。（好吧，我经验有限）所以经常写完的前端页面都需要去修改。（特别是做移动端web）频繁的修改页面不仅我觉得很烦，UI设计也很烦。因此，我就好好反思一下我为什么不能好好的还原设计稿的尺寸。

之前待过的公司工作流程是这样的：

UI设计只负责设计UI界面，出PSD，AI与PSD效果图。不出标注图。

前端工程师拿到PSD文件去测量里面间距，去切图，实现前端页面。

结果前端工程师效率比较低，前端工作量大，设计稿里面每一个页面元素都去衡量，而且还要找到对应的某个图层去切片，切换之后还要实现前端页面。工作量可想而知。实现页面之后，与效果图有出入。

PS：UI设计真心TM的偷懒，除了目录命名之外，有些元素直接使用默认命名（如：“形状一”），让前端工程师一个一个的找图层，时间就是这样浪费过去了。

后来换了一间公司，工作流程是这样的：

UI设计负责设计UI界面，出PSD与PSD效果图。出标注图，切图。

前端工程师直接看效果图与标注图，实现前端页面。

看上去明显比之前好多了，前端工程师的工作量少，但是问题又来，标注图没有标准确，结果页面元素之间还是存在误差，实现页面依然与效果图有出入。

PS：UI设计真心TM的肤浅，同一个模块字体大小不一样，一些页面字体标13px，一些页面字标14px（这只是个例子，还有N多类似的地方）让前端工程师都醉了。

经历了以上的情况，我就在思考，如何协调与UI设计的工作流程，前端工程师能否精准还原设计稿的尺寸。曾经我也试过了很多方法，使用AlloyDesigner插件来还设计稿，不过还是觉得不靠谱。

后来与UI设计商量之后，改进了一下工作流程。

UI设计负责设计UI界面，出PSD与PSD效果图，切图资源一定要是偶数尺寸，如230*230,50*50。（制定设计规范图）

前端工程师拿到PSD文件使用Assistor PS测量里面间距，利用PS CC自带的“复制css”功能，获取对应的css属性，实现前端页面。

终于，前端工程师能够很好的还原设计稿，避免了不必要的修改的麻烦，UI设计满意了，前端工程师满意了，老板也满意了。

补充：PS插件

css3ps （图层转化成CSS3代码）

CSS Hat （国外增强型的复制CSS）

PhotoshopCopyCSS （国内增强型的复制CSS）

Size-Marks-PS （PS元素标注）

巴特西