解决前端⼯程师与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插件
ps切图尺寸变小
css3ps （图层转化成CSS3代码）
CSS Hat （国外增强型的复制CSS）
PhotoshopCopyCSS （国内增强型的复制CSS）          Size-Marks-PS （PS元素标注）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。