我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。
你好，我是馊面包，
本文 2800 字，分享一些用技术思维做设计的技巧，帮助大家做出更科学的设计。
-
-
-
-
众
所周知，开发小哥哥和设计小姐姐之间的关系一直都很微妙……
时而讨论得热火朝天，时而吵得不可开交，时而大打出手……
其实有时候还真别怪人前端小哥哥怼咱们，很多时候是
设计交付的东西没到位
，导致前端那边开发过程中遇到各种阻力，每次遇到一个问题就来问咱们，效率低下不说，咱们不烦，人家也烦了……
换位思考，如果我们拿到的产品原型不全面，做一个地方要去问一下产品经理才能进行下一步，我们也烦透了，甚至想打产品经理一顿！
经历了几个项目后好歹没让前端追着砍了，最近我又见到了久违的让前端犯心脏病的设计交付文件……
自从蓝湖等众多自动标注软件出现后，设计师们就解放了双手，提前下班避免秃头。
（这篇文章再次校对发到公众号的时候，我早已抛弃了蓝湖而转战摹客了，因为蓝湖付费了，而且墨客更好用，强烈安利大家都去使用摹客，你用了就知道有多nice！）
蓝湖好用还免费，你说气不气。正因为大家伙儿都用上了蓝湖，于是对于标注这一块就没那么上心了，基本上就是项目一做，图一切，蓝湖一上传，就成
甩手掌柜
了，任前端小哥哥随便捣鼓。
这样一来，虽然时间是省了，但是更大的问题出现了，蓝湖或者是其它标注软件在测量的时候是以图层来测的。
这就造成
前端在测距离的时候如果没有一个参考，就会很难测量。
高保真中包含一个表格（如下图）
前端小哥哥开发的时候需要测量表格
每个纵列的宽度，每行的高度
，咱们看看下面的表格在蓝湖里会如何测量。
看下面的图，
红色背景是开发需要知道的高度
，因为这样才好把文字居中垂直放置。这时候你也许会说，这不是没问题嘛，合作相当愉快呀！
下图红色背景区域是前端想要知道的参数👇
没有分割线的时候，开发小哥哥
只能测量两个图层之间的距离
，如下图所示，这时候根本没办法判断间距大小是多少，俗称：追着砍系列~
测量的表格间距不一👇
给元素增加容器，
表格宽度可能不一样，一定要给每个元素增加一个容器，可以让开发直接看容器的大小，可以设置容器的透明度为0，这样就不会干扰设计稿了。
设计的时候绘制出容器👇
第二个问题就是切图问题，要理解怎么切图就要理解前端开发的原理，这个得靠积累，下面列举了几个切图的常见问题。
2.1 切图不全
切图不全有两种情况，一种是知道它需要切图，但是忘了，另一种是不知道它需要切图。
针对第一种情况，
没有完美的解决办法，唯一的办法就是
细心再细心一点
，做完一个版块后检查一遍。
针对第二种情况，这就靠积累了，做的多了自然知道哪些地方需要切图哪些地方可以由研发自己写
，建议多和研发沟通，不懂就问。
这也是目前为止我见到过的比较多的问题，甚至在经验丰富的设计师身上都有见过，多余切图的问题在于会
给前端造成视觉干扰
，影响他们查看标注，下载切图后也得多次筛选，非常影响前端同学的工作体验。
这种情况在XD软件中又尤为严重，目前XD没有很好地解决切图这个问题，即使是sketch自带的切图功能也不好用，需要借助切图插件。
针对多余切图的情况，我的建议是
定稿后来切图
，对于重复使用的素材只切一个图，最大限度避免重复切图。
关于格式这一点一定要先和前端沟通，沟通很重要，
提前沟通至少可以避免一半的问题
，一点都不夸张。
如果拿不准图标格式，一定不要先自己闷着做，要问前端他习惯用哪种实现方式，他要png就切图，他要iconfont就做iconfont。
先说下切图比较重要的一点，
最好用正方形
，这样方便前端测量尺寸，对页面还原度也有很大的帮助。
调整间距的时候以正方形为参考调整，而不是以图标的大小为参考。
举个例子，看下面图片中的点赞图标，点赞图标是不规则的，图标的实际大小是36*40，我在设计的时候就在图标下面放了一个正方形，只要把图标框完就行，比图标实际大小大也是没问题的。
一个图标还没啥，可是……图标多了之后，尤其是
相同板块的图标如果大小不一样
的话……
就会出现下面这种情况👇
当我们把
图标都放到一个规则的矩形
里面的时候，就不会有这样的问题了。
如果我们的设计里面包含了插画，该怎么交付呢？直接把插画切图？
一般在实现的时候插画使用的都是
png的图片格式
，只要切图基本没什么大毛病，只是如何切图才能保证
实现效果最好，适配的时候不会产生形变
，这才是比较重要的问题。
因为插画的使用场景太多了，举一个启动页的例子，触类旁通，基本原则是一致的，那就是让前端更好地落地。
启动页的插画比较大的问题是
适配
的问题，手机屏幕尺寸太多，很难做到一稿适配所有，所以启动页在切图的时候有两种情况：
如果是整屏的话，比如下面这种，基本只能
尽量一稿适配，特殊机型另外调整一稿出来。
但是如果是下面这种的话，如果没有一个好的适配规则，那么就
可能出现不同手机相差太大的情况。
适配方法：把插画和文字一起整屏切图，宽度适配，高度自适应
以上两种都不是最佳方案，比较
推荐的方法是按比例适配👇
我们可以将屏幕分为两部分：
插画区域A，文字区域B
-
保持为
A : B
比例在任何屏幕下都一致
-
插画适配：宽度跟随屏幕，高度自适应
-
插画距离A上下比例
b : c 不变
-
文字适配则保持与区域B上下垂直居中即可
记得我最开始做设计的时候也经常忘记梳理多状态，导致前端做到中途老是跑来问我或者是实现出来发现有很多问题。
这样的情况多了会给别人一种
不专业的印象
，于自己于项目都不利。所以后面在设计中我尽量把
所有的情况都考虑到
，一来是想把自己接手的事情做到滴水不漏，二来也让别人觉得你是一个专业的设计师。
我们都知道一个产品不管是移动端还是web端，所包含的状态都不可能一成不变，比如文字有长有短，图片有一张也有多张或者没有图片，输入框有默认状态也有输入状态等等。
这些
所有状态不管是样式还是交互都需要我们定义好
，前端小哥哥才能依据我们的设计实现出来，如果我们不知道怎么定义或者忘了定义，就会出现两种情况，第一种是前端根据自己的想法随意实现，第二种是前端不断地来问我们这里那里该怎么做。
如果这两种情况出现了，不是前端的锅，是我们没有把工作做到位，我们该检讨。
我个人的习惯是做完了之后进行交互/UI
自查
，这样能够检查出自己有没有遗漏哪些东西。
下面就几种我们在设计过程中比较容易忽略的几个地方来讲解。
4.1 输入框
输入框可以说是最常用的组件之一了，几乎所有产品都会使用到输入框，所以输入框的定义一定不能忽略。
4.2 文字长度
文字部分也是比较容易忽略的地方，我们在设计的时候往往都是按照比较好看的段落来做的，但是上线后效果却不如预期。
为什么呢，因为如果是
用户上传或者运营的内容，我们很难控制字数
，虽说可以强制控制，比如截断，可是有些地方的文字对用户比较重要，就不能截断。
遇到这些地方的时候就要
思考该如何适配，以及把所有的情况都罗列出来
，方便前端查看。
我接手的一个项目中有这样一个版块：
按照时间顺序展示用户的检修信息。
包含检修人、单位，以及上传的文件，文件可以点击查看。因为用户明确表示这里的检修文件名称很重要，而且手机上打开文件的体验并不佳，所以需要用文件名来辅助用户判断这是一份什么文件，所以这里文件名称必须完全展示。
文件名称大部分不会超过一行， 但是凡事无绝对，而且用户取的名字也不可控，所以这里就必须
考虑到文件名称的长度问题，在做设计的时候就不能只把一行文字的状态展示出来，而要把所有状态都考虑到。
可以看下图中的适配方案，这些
适配和所有状态我们都必须梳理好之后交付给前端。👇
最后，总结起来就一句话，站在开发的角度思考，多和开发沟通。
基本上能进解决80%的问题。
-end-
以上，就是本次分享的内容
科技猎
