总所周知，开发小哥哥和设计小姐姐之间的关系一直都很微妙……时而讨论得热火朝天，时而吵得不可开交，时而大打出手……啊不，是一直相亲相爱的（微笑脸）

其实有时候还真别怪人前端小哥哥怼咱们，很多时候是设计交付的东西没到位，导致前端那边开发过程中遇到各种阻力，每次遇到一个问题就来问咱们，效率低下不说，咱们不烦，人家也烦了……

换位思考，如果我们拿到的产品原型不全面，做一个地方要去问一下产品经理才能进行下一步，我们也烦透了，甚至想打产品经理一顿（表装，我知道你想打）。

经历了几个项目后好歹没让前端追着砍了，最近我又见到了久违的让前端犯心脏病的设计交付，不说是谁设计的，总之~这样的设计交付让我也想追着砍……

1、距离测量困难

自从蓝湖等众多自动标注软件出现后，设计师们就解放了双手，提前下班省的时间都够多吃好几个茶叶蛋了。

蓝湖好用还免费，你说气不气。正因为大家伙儿都用上了蓝湖，于是对于标注这一块就没那么上心了，基本上就是项目一做，图一切，蓝湖一上传，就成甩手掌柜了，任前端小哥哥随便捣鼓，这样一来，虽然时间是省了，但是更大的问题出现了，蓝湖或者是其它标注软件在测量的时候是以图层来测的，这就造成前端在测距离的时候如果没有一个参考，就会很难测量。

举个栗子

设计交付中包含一个表格

前端小哥哥开发的时候需要测量表格每个纵列的宽度，每行的高度，咱们看看下面的表格在蓝湖里会如何测量。

看下面的图，红色背景是开发需要知道的高度，因为这样才好把文字居中垂直放置。这时候你也许会说，这不是没问题嘛，合作相当愉快呀！

好嘞，如果没有分割线呢？？

没有分割线的时候，开发小哥哥只能测量两个图层之间的距离，如下图所示，这时候根本没办法判断文字大小是多少，俗称：追着砍系列~

正确做法

给元素增加容器，表格宽度可能不一样，一定要给每个元素增加一个容器，可以让开发直接看容器的大小，So easy~

2、切图问题

2.1 切图不全

对于切图不全这个问题没有完美的解决办法，唯一的办法就是细心再细心一点，做完一个版块后检查一遍。现在的切图工具很多，只要你用得顺手能提升效率就行。

2.2 格式不对

关于格式这一点一定要先和前端沟通，沟通很重要，提前沟通至少可以避免一半的问题，一点都不夸张。如果拿不准图标格式，一定不要先自己闷着做，要问前端他习惯用哪种实现方式，他要png就切图，他要iconfont就做iconfont。

先说下切图比较重要的一点，最好用正方形，这样方便前端测量尺寸，对页面还原度也有很大的帮助。

我个人的习惯是：

1）先画一个正方形

2）在正方形上画图标

调整间距的时候以正方形为参考调整，而不是以图标的大小为参考。

举个例子，看下面图片中的点赞图标，点赞图标是不规则的，图标的实际大小是36*40，我在设计的时候就在图标下面放了一个正方形，只要把图标框完就行，比图标实际大小大也是没问题的。

是不是觉得还没啥，不就是不规则嘛，也不影响呀！

一个图标还没啥，可是……图标多了之后，尤其是相同板块的图标如果大小不一样的话……就会出现下面这种情况：

当我们把图标都放到一个规则的矩形里面的时候，就不会有这样的问题了。

3、插画该怎么交付？

如果我们的设计里面包含了插画，该怎么交付呢？直接把插画切图？

一般在实现的时候插画使用的都是png的图片格式，只要切图基本没什么大毛病，只是如何切图才能保证实现效果最好，适配的时候不会产生形变等，这才是比较重要的问题。

因为插画的使用场景太多了，举一个启动页的例子，触类旁通，基本原则是一致的，那就是让前端更好地落地。

启动页的插画比较大的问题是适配的问题，手机屏幕尺寸太多，很难做到一稿适配所有，所以启动页在切图的时候有两种情况，第一种是整屏，如果是整屏的话，比如下面这种，基本只能尽量一稿适配，特殊机型另外调整一稿出来。

但是如果是下面这种的话，如果没有一个好的适配规则，那么就可能出现不同手机相差太大的情况。

有几种适配方法：

1）

适配方法：插画到顶部的距离一定

问题：部分手机可能出现大量空白

2）

适配方法：把插画和文字一起整屏切图，宽度适配，高度自适应

问题：部分手机可能看不到文字

以上两种都不是最佳方案，比较推荐的方法是按比例适配。

我们可以将屏幕分为两部分：插画区域A，文字区域B

适配方法：

• 保持为 A : B 比例在任何屏幕下都一致
• 插画适配：宽度跟随屏幕，高度自适应
• 插画距离A上下比例 b : c 不变
• 文字适配则保持与区域B上下垂直居中即可

4、不要忘记梳理多状态

记得我最开始做设计的时候也经常忘记梳理多状态，导致前端做到中途老是跑来问我或者是实现出来发现有很多问题。这样的情况多了会给别人一种不专业的印象，于自己于项目都不利。所以后面在设计中我尽量把所有的情况都考虑到，一来是想把自己接手的事情做到滴水不漏，二来也让别人觉得你是一个专业的设计师，只有赢得别人的尊重才能与别人平等交流。

我们都知道一个产品不管是移动端还是web端，所包含的状态都不可能一成不变，比如文字有长有短，图片有一张也有多张或者没有图片，输入框有默认状态也有输入状态等等，这些所有状态不管是样式还是交互都需要我们定义好，前端小哥哥才能依据我们的设计实现出来，如果我们不知道怎么定义或者忘了定义，就会出现两种情况，第一种是前端根据自己的想法随意实现，第二种是前端不断地来问我们这里那里该怎么做，如果这两种情况出现了，不是前端的锅，是我们没有把工作做到位，我们该检讨。

我个人的习惯是做完了之后进行交互/UI自查，这样能够检查出自己有没有遗漏哪些东西。

下面就几种我们在设计过程中比较容易忽略的几个地方来讲解。

4.1 输入框

输入框可以说是最常用的组件之一了，几乎所有产品都会使用到输入框，所以输入框的定义一定不能忽略。

4.2 文字长度

文字部分也是比较容易忽略的地方，我们在设计的时候往往都是按照比较好看的段落来做的，但是上线后效果却不如预期，为什么呢，因为如果是用户上传或者运营的内容，我们很难控制字数，虽说可以强制控制，比如截断，可是有些地方的文字对用户比较重要，就不能截断，遇到这些地方的时候就要思考该如何适配，以及把所有的情况都罗列出来，方便前端查看。

举一个例子，我接手的一个项目中有这样一个版块，按照时间顺序展示用户的检修信息，包含检修人、单位，以及上传的文件，文件可以点击查看。因为用户明确表示这里的检修文件名称很重要，而且手机上打开文件的体验并不佳，所以需要用文件名来辅助用户判断这是一份什么文件，所以这里文件名称必须完全展示。

文件名称大部分不会超过一行， 但是凡事无绝对，而且用户取的名字也不可控，所以这里就必须考虑到文件名称的长度问题，在做设计的时候就不能只把一行文字的状态展示出来，而要把所有状态都考虑到。

可以看下图中的适配方案，这些适配和所有状态我们都必须梳理好之后交付给前端。

最后最后，总结起来就一句话，站在开发的角度思考，多和开发沟通。基本上能进解决80%的问题。