开发文字错位，UI设计师需要知道的解决办法

在实际开发过程中，字体上遇到的问题是最多，也是最难以解决的。不知道小伙伴在验收的时候会不会遇到这样的情况，开发明明是按照设计图上的字体和间距来的，可跟设计稿的间距还是有差异，这是为什么呢？今天和大家分享一下，文字怎么搭建和使用，如何正确的设置文字做出正确的设计，且符合项目开发的实际需要。

一、排版属性

1. 行高

行高是一行文本垂直方向的高度，这个高度和字高无关，文字内容默认处于这个高度的水平居中位置，如下图所示。

在一般的UI软件中，我们可以发现通常默认行高一定比字号本身更大，例如字号为 12dp的文字行高为17dp，导致文本区域高度大于实际的字高。这是一个正常现象，因为如果行高和文字同高或更小，那么在多行文本状态下就无法正常显示。

2. 行间距

在 Sketch、XD 等软件中没有包含的属性需要引起我们重视，那就是“行间距”。

行间距是一个独立于行高之外的属性，在一些复杂的设计、排版软件中会出现，以及iOS、Android 等前端语言中也有提供这个属性，它是造成我们标注与实际开发过程出错的罪魁祸首。

无论是设计过程中，或者设计标注文件中，都要抛弃掉任何有关行间距的概念，虽然 iOS 使用行间距可以实现，但是实现的效果和设计稿是有出入的。因为设计稿中我们只能使用行高，所以在一个文本区域中，它的上下两侧都有行高增加的空白区域，但是实现过程里面没有这一截间距，导致实际文本区域和上方元素的距离效果有偏差。

3. 其他

除了行高、行间距，还有段间距、对齐方式、字间距等排版样式，但对开发的影响不大，设计的小伙伴应该都懂，所以这里不过多讲解。

二、文字行高适配

目前文字行高间距的标注方法有3种。

1. 自己手动标注行高

有部分设计设计师用原始方法来标注文字，即用文字最低点和最高点作为行高就行标注，如下图，标注从下面文字“丽丽”的开始测量到下面灰色文字的最高点“阿卓”结束。在这种情况下，开发人员还原出来的效果和设计稿有一定的差距，需要调试很多遍才能达到想要的效果。

（错误的方式）

2. 使用sketch默认的行高

使用sketch默认的行高进行标注，这是UI设计师常见的操作习惯，但在验收开发版本还原度的时候，还是发现与设计稿标注的间距不一样。

（错误的方式）

这是为什么呢？因为不同的字形在高度上都会产生微小的差异，无论是使用原始方法或是使用sketch默认行高去标注文字，它都与前端在编辑文字的软件里的字体默认行高不一致。

3. 手动修改sketch行高为开发环境下的默认行高

手动修改文字行高，把sketch文字行高与前端默认行高修改成一致，从而给出准确的文字间距。这种方式虽会花费不少时间，但也最精确，你可以据此设置出最美观合理的间距，而不用担心上线稿的还原度问题。

下图是iOS的Xcode以及Android文字编辑器对应下默认的行高。

最便捷的方法：手动调整sketch里的字体的默认行高并形成样式。这样规范好设计能更好的让开发人员还原设计稿，也便于我们后期的页面校对和调整。

这时眼尖的朋友可能会发现，Android和iOS开发的文字编辑器默认的行高也不一样啊，难道我们要出2套设计标注文件吗？虽然不可否认的是，最理想状态当然是设计师出2套设计稿，但在职场打滚过的设计师都会知道，多数产品都是处于快速迭代的过程，出2套设计稿花费的时间成本过高，并不符合实际情况。

对于这点，比较建议大家可以尝试把ios和安卓都设置成一样的行高，针对特殊页面再单独做标注调整。

总而言之，具体使用哪种方法去做文字的标注，要根据自己的项目具体情况具体分析。

总结

由于开发环境下文字上下是有padding高度的，设计师需要手动修改sketch行高为开发环境下的默认行高。

以上就是个人的小小的经验，希望可以给大家一些启发和借鉴～

转载声明：本文来源于网络，不作任何商业用途