zoukankan      html  css  js  c++  java
  • 解决前端工程师与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元素标注)

  • 相关阅读:
    HDU 5744
    HDU 5815
    POJ 1269
    HDU 5742
    HDU 4609
    fzu 1150 Farmer Bill's Problem
    fzu 1002 HangOver
    fzu 1001 Duplicate Pair
    fzu 1150 Farmer Bill's Problem
    fzu 1182 Argus 优先队列
  • 原文地址:https://www.cnblogs.com/Sroot/p/7190196.html
Copyright © 2011-2022 走看看