如何有效标注才能高度还原设计稿？（四）

四、文字适配

4.1、文字行高适配

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

后来，设计师逐渐使用了sketch文字默认的行高导出标注文件，但在验收开发版本还原度的时候，还是发现与设计稿标注的间距不一样。

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

比如，iOS的Xcode以及Android文字编辑器对应下的行高效果。

由上图可以发现：开发人员在写字体的时候会使用一个类似textview的，我们可以理解成一个文本框，字其实不是顶满这个框的，是有一定留白的。

所以，我们可以把行高可以理解为一个包裹在字体外面的无形的盒子，在标注文字的行高时，要把留白算进去，以文本框（即默认行高）的形式去标注。

具体的配合开发人员还原文字间距的标注方法，大致可以分为3种：

1. 安装插件；

2. 手动修改文字行高；

3. 文字组件化；

4.1.1、安装插件

比较偷懒的方式：在sketch装个“antofixiostextlinehinugin.sketch”插件。

这个插件适用于苹方和SF字体，点击fix即可一键修复成xcode原生行高。虽然这类插件看着能一劳永逸，但目前市面上应用较少，bug也比较多，单行文本基本可以还原，多行文本则基本不适用。（插件可在附件下载）

4.1.2、手动修改文字行高

最准确的方式：根据前端编辑器默认行高自行完美还原。

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

4.2、文字样式

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

这时眼尖的朋友可能会发现，Android和iOS开发的文字编辑器默认的行高也不一样啊，难道我们要出2套设计标注文件吗？

虽然不可否认的是，最理想状态当然是设计师出2套设计稿，但在职场打滚过的设计师都会知道，多数产品都是处于快速迭代的过程，出2套设计稿花费的时间成本过高，并不符合实际情况。

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

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

4.3 、文字弹性适配

文字弹性适配一般涉及的是宽度适配。

宽度适配普遍使用的是间距适配，即定好左右页边距，中间弹性拉伸。这种方式可以做到较好的适配，也是做快速常用的适配方法。

相关推荐

: 2020年Java程序员就业难吗？

2020年Java程序员就业难吗？2020年无论是对于企业还是个人都是比较艰难的一年，在这年因为疫情有些企业扛不住了，倒了下来，有些人呢！失业啦！所以2020年对于大家来说都比较艰难，但是学习Java成为Java工程师就业会好转吗？Java工程师好就业吗？饱和了吗？

: Java工程师是干什么的？

Java工程师是干什么的？我们经常听到Java工程师就业薪资高，都想通过Java培训成为Java工程师，但是具体到Java工程师是做什么的可能在参加Java培训班之前我们并不清楚今天小编汇总一下Java工程师是做什么的。

: Java工程师前途在哪里？

Java工程师前途在哪里？有些小伙伴参加完Java培训成为Java工程师，现在做的还不错，有些小伙伴参加完Java培训班直接转行了，现在Java工程师的前景到底怎么样？还好吗？下面小编分析一下Java工程师的前途如何？

: Java学到什么程度可以就业？

Java学到什么程度可以就业？我们参加Java培训无非就是为了就业，很多零基础学习Java的小伙伴特别想了解自己学习Java技术到什么程度就可以就业啦，其实不同的公司对于Java程序员的要求是不一样的，而且还有初级Java工程师，高级Java工程师之分，其实技术多多益善最好，不过小编针对不同重量级的公司进行简单介绍。