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