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

解决前端工程师与UI设计协同工作的问题的更多相关文章

  1. 开发辅助 | 前端开发工程师对 UI设计、交互设计的认知

    1.UI 用户界面 UI:User Interfase 用户界面 UID:User Interfase Designer 用户界面设计师,多指移动 app 的界面设计: 2.一个合格的 UI 设计师, ...

  2. 零基础入门学习UI设计指南

    第一步:认识设计启蒙必备知识 学习一项技能,尤其是已经有一定沉淀并在各行各业有广泛应用的技能,就一定要对它先有充分的认知.在开始正式学习前,你需要花足够的经历去了解和查阅它的起源.发展.应用.未来. ...

  3. UI 设计的整个工作流程是怎样的?

    作为一个专业UI设计师,不仅仅要了解整个产品在UI界面设计,交互设计中的工作流程,更需要了解整个产品从需求提出到产品上线的整个工作流程. 以下是互联网产品个部门的工作分配及流程: 从图中可以看到,一个 ...

  4. 厨娘ui设计文档

    厨娘ui设计文档 一.概述 中国的饮食文化从古到今源远流长.在生活日益丰富的今天,人们对饮食的要求不仅仅是温饱,更讲究健康和美味.近年来,饮食甚至成为娱乐的一部分,关于吃的流行用语层出不穷,可见在当今 ...

  5. 如何减少UI设计师产品与前端工程师的沟通成本

    在日常工作中,UI设计师/产品与前端工程师难免会有一些冲突,这是我的一些小建议. 1.如何减少时间成本 先制作UI组件,再拼接页面 如果UI给前端的是一堆页面,前端需要花一些时间去整理提取UI组件.另 ...

  6. 从UI设计转向前端的艰辛过程,从背单词开始。。。

    很纠结到底是继续做UI设计还是转行前端呢?从刚开始的害怕代码到接触代码又喜欢代码的过程,我在想我是不是太飘了,我感觉我做事就是三分钟热度.我感觉学前端对我最大的阻碍就是英语单词了,10个单词里面最起码 ...

  7. Web前端工程师成长之路——知识汇总

    一.何为Web前端工程师?          前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript ...

  8. 淘宝前端工程师:国内WEB前端开发十日谈

    一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...

  9. Web前端工程师成长之路

    一.何为Web前端工程师?        前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/D ...

随机推荐

  1. IO(转换流、缓冲流)

    第1章 转换流 在学习字符流(FileReader.FileWriter)的时候,其中说如果需要指定编码和缓冲区大小时,可以在字节流的基础上,构造一个InputStreamReader或者Output ...

  2. echarts使用中的那些事儿( 三)

    饼图上的那些字与下面说明性的文字有些重合,该怎么缩小圆形的大小呢,还有它的位置,怎么让它向上一些或者向下一些: 有以下两个属性可以解决问题: radius : '55%', ------------这 ...

  3. JavaWeb_03_JavaScript学习小结1

    1.javascript的简介 是基于对象和事件驱动的语言,应用于客户端. 基于对象: 提供好了很多对象,可以直接拿过来使用 事件驱动: html做网站静态效果,javascript动态效果 客户端: ...

  4. ArcServer10.1系列产品之ArcGIS Web Adaptor (IIS)

    1.关于 ArcGIS Web Adaptor 通过 ArcGIS Web Adaptor,可以将 ArcGIS for Server 与您现有的 Web 服务器进行集成.ArcGIS Web Ada ...

  5. ADO.Net——防止SQL注入攻击

    规避SQL注入 如果不规避,在黑窗口里面输入内容时利用拼接语句可以对数据进行攻击 如:输入Code值 p001' union select * from Info where '1'='1 //这样可 ...

  6. js创建弹框(提示框,待确认框)

    ;;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color ...

  7. uva 1601 poj 3523 Morning after holloween 万圣节后的早晨 (经典搜索,双向bfs+预处理优化+状态压缩位运算)

    这题数据大容易TLE 优化:预处理, 可以先枚举出5^3的状态然后判断合不合法,但是由于题目说了有很多墙壁,实际上没有那么多要转移的状态那么可以把底图抽出来,然后3个ghost在上面跑到时候就不必判断 ...

  8. IO流_File类

        流(stream):流是一连串流动的数据(字节.字符),以先进先出的方式发送的信息的通道中.    输入流   数据从源数据源流入程序的过程称为输入流.可以理解为从源数据源读取数据到程序的过程 ...

  9. [tensorflow] tf2.0 简单例子

    tf2.0笔记 感觉,都统一了,pytorch tensorflow mxnet,大家都差不多了 gan例子笔记 import tensorflow as tf from tensorflow.ker ...

  10. [C++讨论课] 课堂记录(一)

    今天第一次参加c++讨论课,记录下了各组同学的展示的问题或者解决方法,也有一些知识点上的内容,供以后复习参考. 1.常量指针和指针常量问题 常量指针:指向常量的指针,例如const int *p =  ...