CSS学习笔记(十四) 咱们前端是怎么跟设计师沟通的

1.交付

通常设计师给前端的只有psd，没有其它多余的东西，连基本的文档都懒得给。前端指望中的设计能给予的除了psd以外， 还有设计上游岗位传递下来的东西。 好比： 产品原型， 需求文档， 交互文档等等。

通常在真正的代码开发进行以前，前端指望中设计给的东西有：

• 1份jpg文件
  里边有各个psd的动做分解图，包括页面逻辑，或交互分解。设计师方程这样的目的在于在作设计时方便的拷贝，但对开发人员来讲，若是分级过于隐藏就会漏掉某个部分的开发。

• 1份psd文件
  一份好的psd文件是分层清晰， 设计规范的文件。

• 1份需求文档
  需求文档是对当前开发功能的基础介绍或逻辑详细描述。

• 1份原型文档
  原型设计文档通常是由产品经理对最初功能设想的一份粗稿， 这份稿只是对布局或交互作简单的设计， 须要通过设计进行艺术的加工以后， 才成为一个能够呈现给用户的完整界面。

固然这些全部的结果， 须要通过层层开会审核， 征得各个项目 组leader的赞成以后经过邮件的方式发送给各个成员， 最粗笨的办法就是放在局域网的共享地址能够去拿psd文件。而后，全部的中间需求变动、 界面变动都要抄送相关人员， 省得中间再次沟通， 浪费时间。

2.psd文件

通常的psd或许是这样的：

前端人员期待的确实这样的：

由于前端要还原页面的时候频繁的去隐藏不一样的图层来观察效果或切割图片，设计师是组合不一样的图层到一块，而前端偏偏是一个相反的过程。因此一个好的图层结构会为下游岗位节省不少的时间。那么，问题来了，做为前端，你为下游岗位提供了多少便利之处呢？

3.流程

有的公司是这样的：

1. 需求提出，产品跟产品leader沟通需求
2. 产品leader跟开发、测试、ui/ue要人，要排期
3. 要来的人你们一块儿开发，挑战PM，跟批斗似的，PM拿着需求文档讲PPT
4. 需求回归
5. 继续批斗（四、5一直重复）
6. 需求ok了，开始ui/ue设计
7. 评审ui/ue
8. ui/ue回归
9. 开发
10. 提测
11. 回归
12. 上线
13. 有问题回滚

而有的公司的设计倒是这样：一般PSD要把交互效果的图层都作好，出jpg的时候都会把默认状态，交互状态，管理员状态各处一个，而后弹窗布局出一个，都作得很精细。这样致使的结果是想犯错都没有机会。

还有的公司设计部有本身的规范，首先他们出的图都是很合乎规范的，间距、色值、布局、字体不会不少，由于 整个产品多个页面风格要统一一致，越花俏越给本身找麻烦，他们也不会有特别多种不一样规格混揉在一块儿。

还有的是跟产品开需求会或项目立会的时候，会先就具体需求的功能点先作可行性方案的讨论，若是开发成本太高的话，一般都会说服需求方用一些替代方案。又或者是一些高级的功能模块，咱们会把项目拆解，分红几期，首先先出核心功能模块，上线以后再作一些高级需求的模块，实现产品的迭代开发。

另一个观点是从产品的高度来看，设计、前端、后端应该是一个总体，最终应该结果导向，产出的产品很差，做为开发团队其实都有责任。

还有的状况是，每一个项目都会有汇总目录，原型是由需求直接提供的，psd和jpg在设计的汇总目录里，咱们的制做稿又是一个汇总目录，全部环节的童鞋均可以很是直观方便的查看这些文件。

4.吐槽

跟设计师交流的时候的坑有如下几种状况：

• 有些界面出于时间或员工自己经验素质的问题就是不肯意出psd图，而后口头上通知前端，这样来就能够那样该就能够了，这就是一个坑。

1. 全部的东西都必须出效果图， 而且全部团队成员达成一致， 有可执行性。
2. 全部的字体， 间距， 颜色， 必须约定统一而且彻底标识清楚。
3. 杜绝直接这么说那么干的作法。要否则最后作出的产品，产品说的是一套， 测试测的一套， 开发的一套， 老板看到的又是一套，返工的可能性很大。
4. 比起这个返工的可能，前面多化点把设计稿作好是无可厚非的，并且从整个项目 开发周期来看， 是节省开发周期的。

• 有些页面设计师没有考虑到。
  有些页面在没有数据的时候设计师没考虑到，或者经验不丰富就没作。这时候必需要求设计师， 给出首页或列表页、 内容详细页、 用户中心等等没有数据时的效果图，以示团队全部成员知晓， 并达到一致。 要否则等上线以后， 测试数据删除以后真实数据尚未上来以前，老板心情好要看一下的时候， 页面就总体失控。还有一种状况就是前端本身整的数据没有的提示，从交互形式， 文案上都没有规范， 致使最后一步测试的时候在返回来从新修改， 浪费时间。

• 数据过多的状况。
  另一种常见的问题是数据过多或者文字内容过长撑开容器，这两种问题再实际作的时候经常会被漏掉，而后等到测试的时候才发现问题提过来。

5.沟通

• 有些前端在看到设计稿的时候， 不免看的不舒服， 这时候就从非专业的角度开始提建议， 但提的时候又不流行技巧， 容易发生冲突。

  建议：除非你干过设计或者了解设计的创做过程， 不然从设计的角度最好不要提不一样的意见。
  能够从交互或功能或体验上给建设性的意见，另外讲的时候是须要技巧的， 能够先正面确定一下他的劳动成果或努力的结果，而后说， 我这儿看到几点问题， 跟你交流一下， 而后布啦布啦，而不是直接上去就说， 我感受这儿怎么怎么的， 很主观的， 说这样根本没有一个评判的标准或依据。最后必定要说， 根据你的行业经验或自我设计标准， 你确定不会容许这样的现象出现吧， 而后你看要不要在从新考虑一下。 我就是想到了给你提一下。强调这个非正式的提法， 给自 己或对方都留有余地， 都有能够退让的空间， 皆大欢喜。

• 要是效果图是客户提供的怎么破？在沟通有什么经验？

  建议：设计的质量若是自己就有问题， 比方说就没考虑添加数据之后的状况，或者是其它页面在流程上风格上不统一怎么怎么的，客户又不是很懂， 初期非要你按照他的想法来。这时候就须要站在一个更高的高度来有技巧的处理这个问题。好比说， 你这个页面等上线后， 在用户看来2个页面看到的按钮不同，感受很外行， 从而致使的结果就是下次不在访问， 这样用户就会丢失。你看有没有必要从新考虑一下。

6.阅读

• 2013年，克军在广州的 webrebuild 分享了他那个 还原活的设计 的主题，很是受用。地址以下：http://kejun.github.io/share2013_11/

---

原文连接：咱们前端是怎么跟设计师沟通的 - 豪情 - 博客园