来源:网络 作者:佚名
但这里有一点需要注意的是：在画分割线时会出现遗漏的问题。我们经常会用到sketch来画，但是由于sketch的默认属性，线条的线型是居中（center）的，这会导致我们画的线条在视觉上是对齐像素的，但是在数据上会显示0.5个像素。
当多个元素之间计算间距时会导致数据上显示的和实际画面中的图形不一致。这时就需要我们使用矩形工具来画一个1像素宽的线条，这样就可以既保证视觉上对齐，数据中也是整数。
一、文字行高适配
有部分设计设计师用原始方法来标注文字：如下图，标注从上面文字“科”的末端开始测量到下面灰色文字的最高点“2”结束。在这种情况下，开发人员还原出来的效果和设计稿有一定的差距，需要调试很多遍才能达到想要的效果。
后来，设计师逐渐使用了sketch文字默认的行高导出标注文件，但在验收开发版本还原度的时候，还是发现与设计稿标注的间距不一样。
这是为什么呢？因为不同的字形在高度上都会产生微小的差异，无论是使用原始方法或是使用sketch默认行高去标注文字，它都与前端在编辑文字的软件里的字体默认行高不一致。
比如，iOS的Xcode以及Android文字编辑器对应下的行高效果。
由上图可以发现：开发人员在写字体的时候会使用一个类似textview的，我们可以理解成一个文本框，字其实不是顶满这个框的，是有一定留白的。
所以，我们可以把行高可以理解为一个包裹在字体外面的无形的盒子，在标注文字的行高时，要把留白算进去，以文本框（即默认行高）的形式去标注。
具体的配合开发人员还原文字间距的标注方法，大致可以分为3种：
1. 安装插件；
2. 手动修改文字行高；
3. 文字组件化；
1.安装插件
比较偷懒的方式：在sketch装个“antofixiostextlinehinugin.sketch”插件。
这个插件适用于苹方和SF字体，点击fix即可一键修复成xcode原生行高。虽然这类插件看着能一劳永逸，但目前市面上应用较少，bug也比较多，单行文本基本可以还原，多行文本则基本不适用。
2.手动修改文字行高
最准确的方式：根据前端编辑器默认行高自行完美还原。
手动把文字行高与前端默认行高修改成一致，从而给出准确的文字间距。这种方式虽会花费不少时间，但也最精确，你可以据此设置出最美观合理的间距，而不用担心上线稿的还原度问题。
3.文字样式
最便捷的方法：手动调整sketch里的字体的默认行高并形成样式。这样规范好设计能更好的让开发人员还原设计稿，ui设计教程，也便于我们后期的页面校对和调整。
这时眼尖的朋友可能会发现，Android和iOS开发的文字编辑器默认的行高也不一样啊，难道我们要出2套设计标注文件吗？
虽然不可否认的是，最理想状态当然是设计师出2套设计稿，但在职场打滚过的设计师都会知道，多数产品都是处于快速迭代的过程，出2套设计稿花费的时间成本过高，并不符合实际情况。
对于这点，比较建议大家可以尝试把ios和安卓都设置成一样的行高，针对特殊页面再单独做标注调整。
总而言之，具体使用哪种方法去做文字的标注，要根据自己的项目具体情况具体分析。
二、文字弹性适配
文字弹性适配一般涉及的是宽度适配。
宽度适配普遍使用的是间距适配，即定好左右页边距，中间弹性拉伸。这种方式可以做到较好的适配，也是做快速常用的适配方法。
阴影作为一个重要的视觉元素，让主元素和其他元素从背景中“弹出”并拥有深度，更好地将信息层级呈现给用户。（当然，我们今天的主要目标并不是教大家如何制作阴影，而是关于弥散阴影如何更好的与开发人员对接，还原给用户更好的体验）
大家做的弥散阴影在与开发人员对接的时候是否遇到过以上痛点：
卡片位置偏移、文案对不齐、错位、弥散投影的颜色过浅或过深等等一系列问题？
面对这些实现的痛点，以及与开发人员沟通时出现的各种问题，我们又该如何解决呢？
结合自己实际的工作经验和与开发人员沟通的心得，实现弥散投影的方法，可以通过两个方法实现：
1. 切图对接开发人员；
2. css代码实现。
1. 用切图与开发人员对接
这个时候需要设计师和开发人员都比较细心，因为切图也有一些弊端，因为每个卡片都使用切图的话，会使开发的包变大，可能会出现加载慢，闪退等情况，这些体验也是很糟糕了。
所以在这个过程中的一些问题务必要提前与开发人员及项目人员沟通好。
2.前端会首选用css代码实现弥散阴影效果
常规情况下，效果都比较好，但是也会遇到一些遇到异常情况，比如不规则形状，ui设计教程，通常用代码也比较复杂，这个时候需要提前与开发人员沟通切图情况，避免后期一些问题。
代码实现教程链接：
总而言之，
在做设计的过程中，我们需要更好地理解下游的工作，达到一个高效的沟通。不管是哪一种方法，没有对错之分，关键是要懂得“权衡利弊”，提前与开发人员沟通到位。只要是适合自己公司项目且能够高效还原设计稿的方法，都是值得一用的。
为了更好的解决设计还原度问题，需要注意以下几点：
1、元素位置
使用盖楼思维进行设计并模块化标注设计稿，在输出明确清晰的标注的同时单独标注出易引发歧义的元素，以减少还原度误差；
2、组件间距
在设计开始前确定最小单位网格，并使用倍数原则确定常用间距，保证适配时各元素间的准确性，减少开发复杂度；
3、图标
根据图标盒子的尺寸进行切图与标注，以便后期开发；
4、分割线
标注中需要说明分割线在不同机型下始终保持1像素高度；
5、文字
由于开发环境下文字上下是有padding高度的，所以设计时需要手动修改行高为开发环境下的默认行高；适配多行文字时，确定好文字左右页间距，内容部分弹性拉伸即可；
6、投影
常规投影与弥散阴影推荐使用css代码完美实现；特殊情况下还需提前与开发人员沟通权衡各种方式的利弊，选择适合项目产品的实现方式。
优秀的设计离不开开发人员的落地支持。作为设计师，协同开发人员完成设计落地也是工作中重要的一环。做好以上几点，站在开发人员的角度为他们“多想一步”，高质量的设计还原指日可待。
最后献上我们团队研究组成员的集体照，不负我们2个月多的辛苦研究(づ￣3￣)づ
