4.1.2 行高的应用差异

行高始终是文字布局上最头痛的问题，为什么，看看下面的内容就知道了。

前文说过，在 Sketch 等设计软件中，只给我们提供了行高这个属性来控制行间距。但是，iOS、 Android 都有提供过 LineSpacing （行间距），而很多设计师在标注设计稿的过程中也会使用标注间距的形式。

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

并且，还有一个常见的问题，就是 iOS 在默认状态下，行高是和字号相同的，但是安卓的行高如 Skecth 一样会大于字号。所以经常会导致没有定义明确的行高，两个平台使用同一套设计时实现的效果不一致。

前面提到，多行文本势必要使用大于字号的行高，比如一个字号为 12pt 的文本区域，行高为 20pt，那么它的顶部就有 4pt 的空白，我们需要将它上移 4pt，才能保证文字边缘和其它元素的边界是持平的。

这意味着，在开发中，程序员还需要在设置属性的过程里注意高度距离的实际差异，而这中左右高度不一致的做法还会直接导致布局过程变得更繁琐，具体原因就不细说了，只需知道真实项目的情况会远比现在复杂，且布局也会更麻烦即可。

可能还有一些同学会说，如果多行文本行高需要设置，那么我将只有单行的文本设置成行高字号相同可不可以？答案依旧是否定的，这就要在下一个环节中说明了。

4.1.3 文字样式的复用

要在界面中实现字体的效果，就要用代码把它的属性和值都对应码出来。虽然这个过程很简单也很容易，但在整个应用中，出现的文本数量没有一千也有八百，难道我们要挨个设置文本样式？

显然不是。

程序员应该属于最讨厌重复造轮子的群体了，所以自然会用别的方式来实现。通所有的程序语言都会提供文字复用的功能。比如在 CSS 中，可以通过 Class（类）的定义实现样式的复用。

例如，命名了类1为 "TitleName", 类2为 "PriceAll", 它们分别包含了不同的文字属性和样式，当我们需要使用类1的时候，只要输入 "TitleName" 这个名字，类2则输入 " PriceAll " 即可，可以省去成千上万行代码。

所以，当我们在做设计规范时，为什么会有文字的部分，原因除了设计统一性的要求以外，还有就是为了方便程序员可以提前把字体的样式定义好，提升整个项目界面布局的效率。

这里要注意的就是，任何一个文本样式，只要定义过，它的所有属性和值就是绝对的，如果要调整其中任意的一个参数，那么对于程序而言，它就是一个新的样式。

所以回到前面所说的单行文本和多行文本的行高问题，如果在其它属性相同的状况下，设置了两种行高，那么实际就变成了两个文字样式，会让开发过程变得更繁琐。

所以，尽可能保证文字样式的精简，是对设计过程中对文字设置的基本要求。

4.2 设计规范中的文字

很多人以为文字设计规范就是把用过的文字列一些出来，没啥难度。这也是一个误区，想要让整个开发过程顺利，不在文字实现问题上载跟头，那么设计规范中文字的规范制定就至关重要。

从文章最开始，就说过，多行文字下，行高势必要进行调整，于是就和默认状态下有差异，而我们在设计过程中，有很多文字即可能出现单行也可能出现多行，比如下面的案例。左侧是只有一行的状态，右侧是两行的状态，于是行高上就发生了变化。

所以，为了解决后面很多不必要的麻烦，我们尽可能在制定设计中的文字规范时，就将文字的行高设置成多行显示高度下的数值，再以此进行排版。这样，就可以解决非常多不必要的问题。

所以，细心的同学应该发现了上面演示的案例中，我用的文本框高度实际上都比正常行高再多出一点。

为了保证我们设计过程中的统一性，同时要将应用过的文字样式通过软件功能进行整理。比如下图是 Sketch 中的字体样式库。

在项目开始设计的时候，随着主要页面样式的确认，我们就要着手开始规范字体的使用，将这些样式添加到软件的字体库中。

整理字体样式的过程，一定要为样式进行合理命名，绝对不能用一些完全不着调或者没意义的字符，比如 A1、A2、C1、C2 之类的。我们要尽可能根据心里所想的角色名来命名文字样式，这样在添加文字的时候我们可以通过标题来快速识别。

还有，我会习惯于将样式建立排序，根据权重的高低用数字序号来进行排列，这样在高频率和强度的使用下，可以形成肌肉记忆，而不是每次要调用样式的时候我都要查找半天（实际项目中样式数量会远不止那么一点）。

只要页面的字体样式被整理出来，那么后续的设计中，我们就要尽可能的调用这些样式来设计和排版，只有在某些新的场景下，已有的样式实在不足以支撑界面，才创建新的样式出来。

换句话说，就是要保证我们设计稿中每一个出现的文字它们都属于已经制定好得某个样式，并且它们的行高在多行和单行状态下都能一致。这样，我们只需要将设计稿上传到类似蓝湖的工具中，程序员就可以顺滑高效的将文字效果正确的实现出来。

尾声

以上，就是我暂时能想到的关于一个专业的 UI 设计师，在设计过程中对文字进行排版和设置的全部内容了。再细节的东西实在肝不动了，因为篇幅很长，而且几经修订，细节处可能会有错误，如果大家发现了，可以在评论区留言。

当然，想要脱离图文，通过更好的形式了解和学习这些知识点和实际应用方法，就需要通过视频教学的形式了，欢迎来关注我的 UI 基础课程，学习更全面有用的干货。

下一系列的内容会集中在两个部分，一是设计师自查方式，另一部分是关于面试和简历的。

敬请期待，再贱……

FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/