前端工程师如何与设计师合作

大学毕业一年不到，期间算上实习也近一年半，没有正式地与设计师合作过。近来公司来了一个平面的设计师，第一次尝试网页设计，双方都没有相互合作的经验。网页选择了响应式的设计，对设计师而言比较新颖，不能一开始很好理解。也因为个人的一些想法会与设计师不一致，想问几个问题：
如果非专业的网页设计，如何可以尽快地让双方更有效的合作？
作为一个前端工程师，在实现设计师的设计稿时，如果有自己的一些想法怎么办？是直接什么也不说，直接照着设计稿做；还是提出一些建议交流？
如果是设计师全权负责设计的话，那前端工程师在github、codrops，Dibbble上看到先进优秀的效果，是不是就没有用武之地了？
豪情先就个人认识方面的经验，回答一下你的问题，仅供参考：

1. 如果非专业的网页设计，如何可以尽快地让双方更有效的合作？
要有一个共同的目标的前提下沟通，如果目标不一致，或没有目标，那就没办法沟通。比如我们有一个宣传活动，这个活动的最终目的就是吸引新用户注册，那我们交流沟通时，完全以这个为目标，与这个偏离太远的直接砍掉，否则加进来。
另外要有第三者中立方存在的情况下沟通，比如技术负责人，项目经理等。要不然责任划分不明确，场面容易失控，意思就是讨论是说的在多，最终得有个人拍板。
2. 作为一个前端工程师，在实现设计师的设计稿时，如果有自己的一些想法怎么办？是直接什么也不说，直接照着设计稿做；还是提出一些建议交流？有想法可以跟设计来交流，但我个人的经验，先做好前端本职的事情，一般的经验就是工作不饱和，自己份内的事情没做好就想这想那的。
3. 如果是设计师全权负责设计的话，那前端工程师在github、codrops，Dibbble上看到先进优秀的效果，是不是就没有用武之地了？技术永远是在找寻发现价值，只是一个工具，不能本末倒置。
然后是分享一点我们积累的知识，仅供参考：
来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动。文章版权属于群内发过言的任何一位同学，我只是做了简单的梳理或整理。一般设计师给前端的只有psd，没有其它多余的东西，连基础的文档都懒得给。前端期望中的设计能给予的除了psd之外，还有设计上游岗位传递下来的东西。比如：产品原型，需求文档，交互文档等等。

一般在真正的代码开发进行之前，前端期望中设计给的东西有：
1. 1份jpg文件: 里边有各个psd的动作分解图，包括页面逻辑，或交互分解。设计师放成这样的目的在于在做设计时方便的拷贝，但对开发人员来说，如果分级过于隐藏就会漏掉某个部分的开发。
2. 1份psd文件: 一份好的psd文件是分层清晰，设计规范的文件。
3. 1份需求文档: 需求文档是对当前开发功能的基础介绍或逻辑详细描述。
4. 1份原型文档: 原型设计文档一般是由产品经理对最初功能设想的一份粗稿，这份稿只是对布局或交互做简单的设计，需要经过设计进行艺术的加工之后，才成为一个可以呈现给用户的完整界面。当然这些所有的结果，需要经过层层开会审核，征得各个项目组leader的同意之后通过邮件的方式发送给各个成员，最粗笨的办法就是放在局域网的共享地址可以去拿psd文件。
恩，然后所有的中间需求变更、界面变更都要抄送相关人员，免得中间再次沟通，浪费时间。

因为前端要还原页面的时候频繁的去隐藏不同的图层来观察效果或切割图片，设计师是组合不同的图层到一块，而前端恰恰是一个相反的过程。所以一个好的图层结构会为下游岗位节省很多的时间。那这时候有个问题，做为前端，你为下游岗位提供了多少便利之处呢？
还有公司更详细流程是这样的：
1、需求提出，产品跟产品leader沟通需求
2、产品leader跟开发、测试、ui/ue要人，要排期
3、要来的人大家一起开发，挑战产品经理，跟批斗似的，产品拿着需求文档讲ppt
4、需求回归
5、继续批斗（4、5一直重复）
6、需求ok了，开始ui/ue设计
7、评审ui/ue
8、ui/ue回归
9、开发
10、提测
11、回归
12、上线
13、有问题回滚。
另外公司的设计是这样的：通常PSD要把交互效果的图层都做好，出JPG的时候，都会把默认状态，交互状态，管理员状态各自出一个，然后弹窗布局出一个，都做得很精细。这样导致的结果是想犯错都没有机会。有的公司设计部有自己的规范，首先他们出的图都是很合乎规范的，间距、色值、布局、字体不会很多，因为整个产品多个页面风格要统一一致，所以越花哨是越给自己找麻烦，他们也不会有特别多种不同规格混揉在一起。还有的是跟产品开需求会或项目立会的时候，会先就具体需求的功能点先做可行性方案的讨论，如果开发成本过高的话，通常都会说服需求方用一些替代方案。又或者是一些高级的功能模块，我们会把项目拆解，分成几期，首先先出核心功能模块，上线之后再做一些高级需求的模块，实现产品的迭代开发。关于标注规范，推荐：Super Marker 小胡子哥的切图神器。另外一个观点是从产品的高度来看，设计、前端、后端应该是一个整体，最终应该结果导向，产出的产品不好，作为开发团队其实都有责任。还有的情况是，每个项目都会有汇总目录，原型是由需求直接提供的，PSD和JPG在设计的汇总目录里，我们的制作稿又是一个汇总目录，所有环节的童鞋都可以非常直观方便的查看这些文件。

然后跟设计交流的时候的坑有以下几种情况：
1. 有些界面出于时间或员工本身经验素质的问题就是不愿意出psd图，然后口头上通知前端，这样来就可以那样改就可以了，这就是一个坑。
按我们的经验对这种情况做出的建议是：
所有的东西都必须出效果图，并且所有团队成员达成一致，有可执行性。所有的字体，间距，颜色，必须约定统一并且完全标识清楚。杜绝直接这么说那么干的做法。要不然最后做出的产品，产品说的是一套，测试测的一套，开发的一套，老板看到的又是一套，返工的可能性很大。我感觉比起这个返工的可能呢，前面多化点把设计稿做好是无可厚非的，而且从整个项目开发周期来看，是节省开发周期的。

2. 有些页面设计师没有考虑到，比如：有些页面在没有数据的时候设计师没考虑到，或者经验不丰富就没做。这时候必须要求设计师，给出首页或列表页、内容详细页、用户中心等等没有数据时的效果图，以示团队所有成员知晓，并达到一致。要不然等上线之后，测试数据删除之后真实数据还没有上来之前，老板心情好要看一下的时候，页面就整体失控。还有一种情况就是前端自己整的数据没有的提示，从交互形式，文案上都没有规范，导致最后一步测试的时候在返回来重新修改，浪费时间。

3. 数据过多的情况：
另外一种常见的问题是数据过多或者文字内容过长撑开容器，这两种问题再实际做的时候常常会被漏掉，然后等到测试的时候才发现问题提过来。还有两种情况会遇到：
A. 有些前端在看到设计稿的时候，难免看的不舒服，这时候就从非专业的角度开始提建议，但提的时候又不流行技巧，容易发生冲突。
这时候给出的建议是：
提意见是这样的，除非你干过设计或者了解设计的创作过程，否则从设计的角度最好不要提不同的意见。可以从交互或功能或体验上给建设性的意见，另外讲的时候是需要技巧的，可以先正面肯定一下他的劳动成果或努力的结果，然后说，我这儿看到几点问题，跟你交流一下，然后布啦布啦，而不是直接上去就说，我感觉这儿怎么怎么的，很主观的，说这样根本没有一个评判的标准或依据。最后一定要说，根据你的行业经验或自我设计标准，你肯定不会允许这样的现象出现吧，然后你看要不要在重新考虑一下。我就是想到了给你提一下。强调这个非正式的提法，给自己或对方都留有余地，都有可以退让的空间，皆大欢喜。

B. 要是效果图是客户提供的怎么破？在沟通是有什么经验？
设计的质量如果本身就有问题，比方说就没考虑添加数据以后的情况，或者是其它页面在流程上风格上不统一怎么怎么的，客户又不是很懂，初期非要你按照他的想法来。这时候就需要站在一个更高的高度来有技巧的处理这个问题。比如说，你这个页面等上线后，在用户看来2个页面看到的按钮不一样，感觉很外行，从而导致的结果就是下次不在访问，这样用户就会丢失。你看有没有必要重新考虑一下，最后设计和开发，去年克军在广州的webrebuild 分享了他那个“还原活的设计”的主题，我觉得挺受用的，跟大家分享一下。每个团队的合作方法不尽相同，我接触过的比较好的合作方式，我就直白口水话方便易懂，仅供参考：如果你是前端，你可以给设计师提以下一些要求：
1.如果想要95%以上还原设计稿，你必须提供给设计师设计时的注意事项，当然如果设计师有前端功底，他的设计会考虑到更多的协作性，通俗点说：比如设计的PSD稿件的图层切图的形状不要太另类，不同的分辨率，元素布局上你能不能敲代码实现，容不容易做出来，不要太自我主义不考虑前端，到时候做出来的东西又返回头改死人，甚至前端出来后一塌糊涂，两败俱伤。
2.你看过的或者项目交互上想要的效果，让设计师分析这种效果拆分后该设计些什么东西？设计量有多少？能不能用图形的方式直观的设计出来？等等
3.自己用铅笔在纸上画的草图，设计中的部分重要细节和你自己的想法要亲自提醒设计师。
4.项目碰头的时间段，如何碰头，使用远程工具？使用QQ？还是直接离开办公椅面对面？还是茶水间？是1天碰头一次？还是设计完某部分碰头一次？发现问题就可以及时修改，避免事倍功半。
5.让设计师准备好详细的设计说明文档，文档可以是直接套用html模板，可以是word，可以是图片或者思维导图，总之要让前端设计师一目了然知道为什么这么设计，这样设计让前端怎么用，怎么配合。
6.如果设计师有前端功底，你还需要让他提供一些他设计时考虑到的插件或者代码（比如设计banner时他想要视差，3D，还是滑动等效果，要用到什么插件，用了什么框架等），这样能提高前端的质量和效率。

同时，你需要让设计师给你提供：
1.完整的，规范的PSD分层文件，最好是要切图的部分就是一个图层或者文件夹，使用photoshop的快速切图插件，单独导出图片，快速准确，不建议使用PS默认的切图工具。
2.详细的，规范的设计说明文档，标注文档。
3.对于有前端基础的设计师，需要提供他设计时考虑到的前端效果插件或代码，是否使用前端框架等。
4.适合你们的沟通协作方式。
5.如果是比较有经验的设计师，能给你提供一个demo（可以是视频，或者gif，甚至是用纸和笔画出的交互效果），能大大提高前端的质量和效率。
最后的最后，前端攻城师和设计师互相提供这些需求和资源的同时：
不要忘记了产品经理或者老板或者你们部门的项目初衷，也要做好和上层的对接。
在过程中试错，在试错中体验，在体验中修改优化，在修改优化中培育协作能力和感情，在协作和感情中喝杯咖啡聊聊天泡泡妹子！不要怕沟通起来，或者随时跟着进度沟通协作麻烦，其实互相交心，多沟通，大家都能开心的做好前端和设计，可以大幅度减少返修，减少加班，同时还有空一起去喝杯咖啡缓缓神！你闷着头做前端不去学习或者多了解一下他的设计和他的想法，或者他闷着头做完设计从来不关心代码是啥东西，做完就丟给你，只会两败俱伤，伤感情！

本文来自知乎问答，作者：豪情

前端工程师如何与设计师合作相关推荐

前端工程师：交互设计师应具备的基本知识架构
如果你也是一枚刚入门的交互设计师,是不是常有这样一种感觉:不知从何下手,闷头读了一大堆书.学了一大堆软件.画了一大堆图之后还是感觉心里不踏实,总害怕自己还缺点什么,恨不得要有本<交互设计学习大纲 ...
想转行做web前端工程师，必学这6大技能！你都知道吗？
web前端工程师是近几年才发展出来的新兴职业,也是目前火爆且高薪的职业. 大需求的市场环境下,出现了越来越多的人群转行做web前端工程师,如设计师.后台程序员.网虫.大学其他专业.策划.编辑等等. 要 ...
感悟：web前端工程师该如何定位
给前端工程师的工作下个一句话定义:运用前端技术,实现体验的良好传达.如果在前面加上 Web,那么是针对 Web 这个领域的,主要是互联网,也可以将移动通信网络和其他传媒网络(比如IPTV)包含在内,因 ...
谈谈Web前端工程师的定位
原文地址:http://www.360doc.com/content/10/0708/17/1277406_37692580.shtml 2010-07-08 锋子chans 阅 1116 转 ...
web设计师和前端设计师的互动—前端工程师应该具备的三种思维
如果你是一个天才工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需 ...
前端工程师和设计师必读文章推荐【系列三十三】
<Web 前端开发精华文章推荐>自2011年6月20号发布第一期以来,历经三年半,总共发布了30多期.今天这篇是2015年第2期(总第33期),希望你能在这里发现有用的资料. 梦想天空专注 ...
前端工程师和设计师必读文章推荐【系列三十六】
<Web 前端开发精华文章推荐>自2011年6月20号发布第一期以来,历经五年半,总共发布了30多期.今天这篇是2017年第2期(总第36期),希望你能在这里发现有用的资料. 梦想天空专注 ...
Web前端开发工程师与UI设计师的区别是什么？
一般来说在提起Web前端开发工程师的时候,人们会联想到UI设计师,并且这两个都是热门的岗位之一,接下来小编带你了解以下,Web前端开发工程师与UI设计师的区别: Web前端开发工程师与UI设计师的区别 ...
前端工程师如何和UI设计师做好有效的沟通
大多数人认为,前端的工作只是简单的实现UI设计师的界面效果,然而却忽略了,前端担负的不单单有技术的积累沉淀,还有产品UI的设计思维,为什么这么说呢?可以对于刚入行的技术来说,他们的责任或者义务都是根据 ...
《Web前端工程师修炼之道（原书第4版）》——Web设计师是做什么的
本节书摘来自华章社区<Web前端工程师修炼之道(原书第4版)>一书中的Web设计师是做什么的,作者Jennifer Niederst Robbins,更多章节内容可以访问云栖社区" ...

前端工程师如何与设计师合作

前端工程师如何与设计师合作相关推荐

最新文章

热门文章