解决前端工程师与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元素标注)
解决前端工程师与UI设计协同工作的问题的更多相关文章
- 开发辅助 | 前端开发工程师对 UI设计、交互设计的认知
1.UI 用户界面 UI:User Interfase 用户界面 UID:User Interfase Designer 用户界面设计师,多指移动 app 的界面设计: 2.一个合格的 UI 设计师, ...
- 零基础入门学习UI设计指南
第一步:认识设计启蒙必备知识 学习一项技能,尤其是已经有一定沉淀并在各行各业有广泛应用的技能,就一定要对它先有充分的认知.在开始正式学习前,你需要花足够的经历去了解和查阅它的起源.发展.应用.未来. ...
- UI 设计的整个工作流程是怎样的?
作为一个专业UI设计师,不仅仅要了解整个产品在UI界面设计,交互设计中的工作流程,更需要了解整个产品从需求提出到产品上线的整个工作流程. 以下是互联网产品个部门的工作分配及流程: 从图中可以看到,一个 ...
- 厨娘ui设计文档
厨娘ui设计文档 一.概述 中国的饮食文化从古到今源远流长.在生活日益丰富的今天,人们对饮食的要求不仅仅是温饱,更讲究健康和美味.近年来,饮食甚至成为娱乐的一部分,关于吃的流行用语层出不穷,可见在当今 ...
- 如何减少UI设计师产品与前端工程师的沟通成本
在日常工作中,UI设计师/产品与前端工程师难免会有一些冲突,这是我的一些小建议. 1.如何减少时间成本 先制作UI组件,再拼接页面 如果UI给前端的是一堆页面,前端需要花一些时间去整理提取UI组件.另 ...
- 从UI设计转向前端的艰辛过程,从背单词开始。。。
很纠结到底是继续做UI设计还是转行前端呢?从刚开始的害怕代码到接触代码又喜欢代码的过程,我在想我是不是太飘了,我感觉我做事就是三分钟热度.我感觉学前端对我最大的阻碍就是英语单词了,10个单词里面最起码 ...
- Web前端工程师成长之路——知识汇总
一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript ...
- 淘宝前端工程师:国内WEB前端开发十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
- Web前端工程师成长之路
一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/D ...
随机推荐
- IO(转换流、缓冲流)
第1章 转换流 在学习字符流(FileReader.FileWriter)的时候,其中说如果需要指定编码和缓冲区大小时,可以在字节流的基础上,构造一个InputStreamReader或者Output ...
- echarts使用中的那些事儿( 三)
饼图上的那些字与下面说明性的文字有些重合,该怎么缩小圆形的大小呢,还有它的位置,怎么让它向上一些或者向下一些: 有以下两个属性可以解决问题: radius : '55%', ------------这 ...
- JavaWeb_03_JavaScript学习小结1
1.javascript的简介 是基于对象和事件驱动的语言,应用于客户端. 基于对象: 提供好了很多对象,可以直接拿过来使用 事件驱动: html做网站静态效果,javascript动态效果 客户端: ...
- ArcServer10.1系列产品之ArcGIS Web Adaptor (IIS)
1.关于 ArcGIS Web Adaptor 通过 ArcGIS Web Adaptor,可以将 ArcGIS for Server 与您现有的 Web 服务器进行集成.ArcGIS Web Ada ...
- ADO.Net——防止SQL注入攻击
规避SQL注入 如果不规避,在黑窗口里面输入内容时利用拼接语句可以对数据进行攻击 如:输入Code值 p001' union select * from Info where '1'='1 //这样可 ...
- js创建弹框(提示框,待确认框)
;;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color ...
- uva 1601 poj 3523 Morning after holloween 万圣节后的早晨 (经典搜索,双向bfs+预处理优化+状态压缩位运算)
这题数据大容易TLE 优化:预处理, 可以先枚举出5^3的状态然后判断合不合法,但是由于题目说了有很多墙壁,实际上没有那么多要转移的状态那么可以把底图抽出来,然后3个ghost在上面跑到时候就不必判断 ...
- IO流_File类
流(stream):流是一连串流动的数据(字节.字符),以先进先出的方式发送的信息的通道中. 输入流 数据从源数据源流入程序的过程称为输入流.可以理解为从源数据源读取数据到程序的过程 ...
- [tensorflow] tf2.0 简单例子
tf2.0笔记 感觉,都统一了,pytorch tensorflow mxnet,大家都差不多了 gan例子笔记 import tensorflow as tf from tensorflow.ker ...
- [C++讨论课] 课堂记录(一)
今天第一次参加c++讨论课,记录下了各组同学的展示的问题或者解决方法,也有一些知识点上的内容,供以后复习参考. 1.常量指针和指针常量问题 常量指针:指向常量的指针,例如const int *p = ...