解决前端⼯程师与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元素标注)