你好，我是馊面包， 本文 2800 字，分享一些用技术思维做设计的技巧，帮助大家做出更科学的设计。

先来个大纲👇

1. 测量距离困难
2. 切图不全/多余切图
3. 插画如何交付
4. 别忘了梳理多状态
   

前言

众 所周知，开发小哥哥和设计小姐姐之间的关系一直都很微妙……

时而讨论得热火朝天，时而吵得不可开交，时而大打出手……

啊不，是 一直相亲相爱的 :)

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

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

表装，我知道你想打~

经历了几个项目后好歹没让前端追着砍了，最近我又见到了久违的让前端犯心脏病的设计交付文件……

下面盘点下哪些方面没做好会让前端哥哥想打人。

测量距离困难

自从蓝湖等众多自动标注软件出现后，设计师们就解放了双手，提前下班避免秃头。

（这篇文章再次校对发到公众号的时候，我早已抛弃了蓝湖而转战摹客了，因为蓝湖付费了，而且墨客更好用，强烈安利大家都去使用摹客，你用了就知道有多nice！）

蓝湖好用还免费，你说气不气。正因为大家伙儿都用上了蓝湖，于是对于标注这一块就没那么上心了，基本上就是项目一做，图一切，蓝湖一上传，就成 甩手掌柜 了，任前端小哥哥随便捣鼓。

这样一来，虽然时间是省了，但是更大的问题出现了，蓝湖或者是其它标注软件在测量的时候是以图层来测的。

这就造成 前端在测距离的时候如果没有一个参考，就会很难测量。

举个栗子👇

高保真中包含一个表格（如下图）

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

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

下图红色背景区域是前端想要知道的参数👇

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

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

测量的表格间距不一👇

下面是正确做法👇

给元素增加容器， 表格宽度可能不一样，一定要给每个元素增加一个容器，可以让开发直接看容器的大小，可以设置容器的透明度为0，这样就不会干扰设计稿了。

设计的时候绘制出容器👇

切图不全/多余切图

第二个问题就是切图问题，要理解怎么切图就要理解前端开发的原理，这个得靠积累，下面列举了几个切图的常见问题。

2.1 切图不全

切图不全有两种情况，一种是知道它需要切图，但是忘了，另一种是不知道它需要切图。

针对第一种情况， 没有完美的解决办法，唯一的办法就是 细心再细心一点 ，做完一个版块后检查一遍。

针对第二种情况，这就靠积累了，做的多了自然知道哪些地方需要切图哪些地方可以由研发自己写 ，建议多和研发沟通，不懂就问。

2.2 多余切图

这也是目前为止我见到过的比较多的问题，甚至在经验丰富的设计师身上都有见过，多余切图的问题在于会 给前端造成视觉干扰 ，影响他们查看标注，下载切图后也得多次筛选，非常影响前端同学的工作体验。

这种情况在XD软件中又尤为严重，目前XD没有很好地解决切图这个问题，即使是sketch自带的切图功能也不好用，需要借助切图插件。

针对多余切图的情况，我的建议是 定稿后来切图 ，对于重复使用的素材只切一个图，最大限度避免重复切图。

2.3 格式不对

关于格式这一点一定要先和前端沟通，沟通很重要， 提前沟通至少可以避免一半的问题 ，一点都不夸张。

如果拿不准图标格式，一定不要先自己闷着做，要问前端他习惯用哪种实现方式，他要png就切图，他要iconfont就做iconfont。

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

我个人的习惯是：

1）先画一个正方形

2）在正方形上画图标

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

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

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

一个图标还没啥，可是……图标多了之后，尤其是 相同板块的图标如果大小不一样 的话……

就会出现下面这种情况👇

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

插画如何交付

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

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

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

启动页的插画比较大的问题是 适配 的问题，手机屏幕尺寸太多，很难做到一稿适配所有，所以启动页在切图的时候有两种情况：

第一种是整屏

如果是整屏的话，比如下面这种，基本只能 尽量一稿适配，特殊机型另外调整一稿出来。

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

有几种适配方法：

第一种👇

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

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

第二种👇

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

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

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

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

适配方法：

• 保持为 A : B 比例在任何屏幕下都一致

• 插画适配：宽度跟随屏幕，高度自适应

• 插画距离A上下比例 b : c 不变

• 文字适配则保持与区域B上下垂直居中即可

  

别忘了梳理多状态

记得我最开始做设计的时候也经常忘记梳理多状态，导致前端做到中途老是跑来问我或者是实现出来发现有很多问题。

这样的情况多了会给别人一种 不专业的印象 ，于自己于项目都不利。所以后面在设计中我尽量把 所有的情况都考虑到 ，一来是想把自己接手的事情做到滴水不漏，二来也让别人觉得你是一个专业的设计师。

只有赢得别人的尊重才能与别人平等交流。

我们都知道一个产品不管是移动端还是web端，所包含的状态都不可能一成不变，比如文字有长有短，图片有一张也有多张或者没有图片，输入框有默认状态也有输入状态等等。

这些 所有状态不管是样式还是交互都需要我们定义好 ，前端小哥哥才能依据我们的设计实现出来，如果我们不知道怎么定义或者忘了定义，就会出现两种情况，第一种是前端根据自己的想法随意实现，第二种是前端不断地来问我们这里那里该怎么做。

如果这两种情况出现了，不是前端的锅，是我们没有把工作做到位，我们该检讨。

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

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

4.1 输入框

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

4.2 文字长度

文字部分也是比较容易忽略的地方，我们在设计的时候往往都是按照比较好看的段落来做的，但是上线后效果却不如预期。

为什么呢，因为如果是 用户上传或者运营的内容，我们很难控制字数 ，虽说可以强制控制，比如截断，可是有些地方的文字对用户比较重要，就不能截断。

遇到这些地方的时候就要 思考该如何适配，以及把所有的情况都罗列出来 ，方便前端查看。

举一个例子👇

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

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

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

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

-end-

以上，就是本次分享的内容

今日经验👇

只有赢得尊重才能与别人平等交流

下期再见

💋