设计师与前端工程师在办公室上演华山论剑，原因竟然是这样…
设计师与前端工程师的爱恨情仇~
小到一个活动页,大到一个项目，经常会发现设计师与前端工程师（以下简称前端）为了一个问题，争论得面红耳赤。而设计师和前端都是促使产品完成的重要部分。那么设计师与前端工程师该如何更好的配合，提高工作效率呢？
在双方各司其职的同时，二者的配合至关重要。
设计师应该了解一些前端的基础知识，一个完整的视觉稿，前端需要一个什么样的流程，才可以最终发布上线。
背景
首屏背景若不规则，则不宜过大，会影响首屏加载速度，影响用户体验。
首屏以下背景若内容区需要扩展或收缩，而背景必须为规则或者纯色背景。
内容区
所谓内容区也就是页面中的的主要内容显示区域，现在的设备分辨率越来越大，一般的视觉稿都为1920px（偶数）的宽，一般内容区都为1000px左右(偶数），产品需要投放在不同的电子设备上，最常见的是ipad，目前我们的日常活动页面都是必须兼容ipad，那么在ipad上内容区以外的部分将无法显示，所以在设计时，重要的信息和展示素材若兼容ipad，这些都必须保证设计在内容区以内。
做一些特殊梳理
比如图片或者文字投影，背景渐变，边框圆角等，这些效果在设计师的手下一挥，让界面变得更立体，更灵动，但前端却不能够完全实现。css3的出现给前端解决了很多麻烦，也让代码变得精简，但考虑到兼容问题，若客户需要兼容到ie6、7、8，并且图片文字都后期可替换，那么实现起来就比较困难了，这时候要么ie忽略，要么调整设计，或者前端hack(此方法并不确定可以解决问题），最终使用哪种方式还需要三方沟通利弊再做选择。
文件整理
视觉需要提供给前端完整规范的PSD分层文件，图层应合理命名，并规范分层分组，一个不命名图层、图层混乱不分组的文件会大大影响前端的效率，也有可能影响最终成品的还原度。
会使用一些简单工具
我们很多的设计师都是做pc端业务比较多，其他设备较少，现在投放在各种电子设备的需求量越来越大，如何设计一款适配在各终端的视觉稿，并不是很清楚，网络上不有少小工具，利用这种工具可以测试不同设备下的浏览效果。
响应式小工具：http://www.kuapingce.com/
若不了解适配规则，且也没有使用适配工具很有可能设计出来的稿子并不合理。常见的手机端（640px）里的14号字，看起来也不小，但放在手机上看，是几乎看不清字的。
建议设计师使用前端开发人员常用的浏览器（chorme)，会审查元素，这样能快速的查看元素的详细信息。
既省时，又方便的设计
若一个不规则的导航，有默认效果与hover效果，设计师只需要分2个组。一个组为默认效果，一组为hover效果，清楚明了，也最方便前端切图。
(图层效果)
同样的模版只需要做一个即可（聚划算日常活动内容模块）
设计师应该提供详细的，规范的设计说明文档，标注文档。
（psd原文件，标注图片，说明文档）
标注图示例：
可以给设计师提一些要求：
如果想要95%以上的还原设计稿，需要提供给设计师一些注意事项，若设计师有一些前端功底，设计过程中也会考虑到更多的协作性，和实现度，如一些特效，是否能够达到预期效果，元素布局能不能代码实现，好不好实现。不能太过于主观而不考虑前端，到头来设计师和前端都得改，费功负，伤感情。
实例分析
设计师明确产品效果后，最好能找出一些现成的类似案例，或者demo提供给前端，前端和设计师一起分析，让设计师分析拆分后应该如何设计，工作量有多少，是否可以用图形直观的表现？图形的设计细节需要在此告诉设计师，例如动画部分哪些图形需要合并或者分开等。
项目碰头
能当面聊就不电联，能电话不网络消息。根据项目的大小可制定碰头时间段，1天还是2天，及时跟进，发现问题可以及时调整，避免事倍功半。
别随便说“No”
当设计师兴冲冲的和前端谈着自己的一个idea时，或许设计师话音还未落就听到“No”，这可能会让设计师无比沮丧。很多前端会经常否决设计师的好想法或者新点子，很多时候是因为在前端那里觉得那看起来并重要，但却需要很多的工作量。但设计师更注重细节,在意那一像素、那一个圆点。
当设计师有一些自己的创意想法时，前端不防听他描述清楚，我们也可以站在视觉，或者用户的角度来思考并一起讨论分析，是否有另一种较为省时，周折不大并能达到设计师想要的同等效果的处理形式。
多交流，抽空约
前端和设计所处领域不同，专业也不同，考虑问题所处在角度也不同。设计师始终会把界面效果放在第一位。而前端会考虑代码简洁和性能体验，在意请求数量，在意加载速度。
设计师在意细节，相差一像素他可能会觉得没有对齐，而前端会认为这个标记只有这一个类目有还要单独为他写几行样式，为什么不保持统一。
写到这里我脑子里仿佛看到了设计师和前端就类似问题争论的画面，好多时候没有谁对与错，但目的一样，都想以最好的效果完成它，在此过程需要双方的理解，并能站在对方的角度多方位的考虑，为取得满意的结果，设计师和前端是需要多多的交流，工作上可以更大的提高效率，也能促进感情。
发布前一同检测
不管前端在整个开发过程中是否有接到过修改意见，或者说开发中曾多次修改，在最终完成后，发布前都应该交由设计师并一起再次审查一遍。
不管是设计师还是前端工程师都应该站在对方的角度思考问题，在提高工作效率的同事，更能增加同事感情~
